473,836 Members | 1,434 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Mozilla & Firefox ignoring negative top property...

I'm just starting the process of reorganising my modest little website
and cleaning up all the HTML, and the logical place to begin was with
the homepage. I made a simple little ASP.NET control that I can drop
into the beginning of any page and it will generate HTML to display my
logo, a link, and (optionally) a quote of the day, all of which will be
horizontally centered at the top of the page by my default stylesheet.
For the main page, though, I want to use the exact same HTML but have
it centered vertically, too, using a style defined in the page itself.
It *almost* works...

I'm using a variation on the vertical centering solution where you wrap
the content to be centered inside of a <div>, absolutely position the
wrapper <div> halfway down the browser window (using top: 50%;), set a
height on the block containing the actual content, and then set the top
margin for that same block to the negated value of half the height.
The way I've done it is different in that I didn't specify a height and
just set the top of the content block to -50%;...and it actually works.
Well, for the most part.

If I use this style...

#BannerContaine r
{
left: 50%;
position: absolute;
top: 50%;
}

#Banner
{
left: -50%;
margin: 0;
position: relative;
top: -50%;
}

....in IE 6 it displays perfectly: my banner is horizontally and
vertically centered in the browser window. In Mozilla 1.7.11 and
Firefox 1.5, though, it's centered horizontally but *not quite*
vertically. The top of the banner block is halfway down the browser
window, whereas what I want is the *middle* of the banner to be halfway
down the browser window. So, I don't know if it's a bug or expected
behavior, but in Mozilla/Firefox it's ignoring my top value, and that's
not what I want. Oddly enough, it seems to accept a negative value for
the left property just fine, so I don't know what it doesn't like about
top. Also, if I open the DOM Inspector in Firefox and look at the
Computed Styles for #Banner, it says the top property is being
calculated as -62.4667px, which sounds about right. So, it looks like
it's seeing the top property and correctly applying it to the #Banner
element, it's just that for some reason that's not carrying over to the
rendered page.

I know I could just solve this by reverting to the aforementioned "set
a specific height and use negative margins" solution (which is actually
what I use on my current homepage), but I'd like to stick with this one
if possible because A) the programmer in me doesn't like the idea of
hard-coding a height for content of variable or unknown height, B) this
solution is surprisingly flexible (the banner block will grow as needed
for whatever content is in there, and if I set a specific width then
the text for longer MOTDs wraps nicely, too), and C) like I said this
method works *almost* perfectly and I feel like I'm just a tweak or two
away from getting it to work in Mozilla/Firefox. I just can't figure
out what that tweak might be. I tried adding !important to my top
property, but that didn't change anything. Any ideas?

The page I'm working on is located at http://nocab.org/Index2.aspx and
the external stylesheet is at http://nocab.org/NOCAB.css. I added the
colorful borders to everything just so it's easier to see what's
actually going on.

Some notes:
- I rolled my own server-side solution for IE's PNG alpha transparency
bug, which is why you'll see slightly different HTML for the banner
logo in IE compared to non-IE browsers.
- I know having a homepage that does nothing but link to itself is
pretty pointless...but A) that's how it's always been and B) that's how
it will be until I get my site's content hierarchy all figured out.
- Though I do enjoy learning how to create semantically-rich HTML and
style it appropriately, I'm not very good artistically and still have a
lot of ropes to learn with CSS...so go easy on me!

Thanks for the help.

Jan 9 '06 #1
5 5807
BACON wrote :

[snipped]

If I use this style...

#BannerContaine r
{
left: 50%;
position: absolute;
top: 50%;
}

#Banner
{
left: -50%;
margin: 0;
position: relative;
top: -50%;
}

...in IE 6 it displays perfectly

Can you back up your claim, substantiate your claim here with relevant
chunks of the CSS2.1 specification regarding the css declarations you
use, in particular how relatively positioned block-level elements with
negative %tage offset values should be positioned within their
containing block. Please quote the CSS2.1 spec detailing how browsers
should handle that.

There is such a thing as getting the layout your code requested (that's
what acid2 test is about, btw). And Mozilla & Firefox may be doing just
that.
The page I'm working on is located at http://nocab.org/Index2.aspx and
the external stylesheet is at http://nocab.org/NOCAB.css.


Are you claiming that Mozilla & Firefox are ignoring any/all negative
top offset values? Do you claim that Mozilla & Firefox are ignoring
negative top %tage offset values?

Gérard
--
remove blah to email me
Jan 10 '06 #2
I'm really not sure what you're suggesting with your first paragraph.
I never said that I felt that Mozilla/Firefox were behaving contrary to
the CSS specifications nor have I made any "claims". I really don't
know the CSS specification as well as I'd like to, which is why I came
here and asked for help. Like I said, I really don't know if this is a
bug or expected behavior. All I do know is that left: -50%; is giving
me the desired horizontal centering effect in both IE and
Mozilla/Firefox, whereas top: -50%; only gives me the desired vertical
centering effect in IE while in Mozilla/Firefox it doesn't appear to do
anything. Regardless of what IE decides to do, logically I'd think
that the left and top properties would be treated no differently within
the same browser, but, then again, I could be wrong. I did note that
there appears to be a discrepancy between the DOM Inspector and what
actually gets rendered, but I could also be wrong with that, too.

So, no, I'm really not claiming anything, just stating facts and asking
that someone more knowledgeable than I please explain them to me.

Jan 10 '06 #3
I'm really not sure what you're suggesting with your first paragraph.
I never said that I felt that Mozilla/Firefox were behaving contrary to
the CSS specifications nor have I made any "claims". I really don't
know the CSS specification as well as I'd like to, which is why I came
here and asked for help. Like I said, I really don't know if this is a
bug or expected behavior. All I do know is that left: -50%; is giving
me the desired horizontal centering effect in both IE and
Mozilla/Firefox, whereas top: -50%; only gives me the desired vertical
centering effect in IE while in Mozilla/Firefox it doesn't appear to do
anything. Regardless of what IE decides to do, logically I'd think
that the left and top properties would be treated no differently within
the same browser, but, then again, I could be wrong. I did note that
there appears to be a discrepancy between the DOM Inspector and what
actually gets rendered, but I could also be wrong with that, too.

So, no, I'm really not claiming anything, just stating facts and asking
that someone more knowledgeable than I please explain them to me.


It renders exactly the same in Opera 8.5, Firefox 1.0.7 and MSIE 6
here....
--
Chris Hughes
"Reality is that which, when you cease to believe, continues to exist."
http://www.epicure.demon.co.uk
Jan 10 '06 #4
Bah. When I read your comment I was starting to think maybe it was a
bug introduced with with Firefox 1.5, but then I remembered that I was
experimenting with it and changed it to top: -64px;. Though that
achieves the desired affect, it wouldn't be centered correctly if I had
longer text that wrapped down to another line or changed to a different
image. Anyways, I forgot to change it back, which is likely why it
appeared to work fine when you looked at it. Sorry, I probably should
have created another test page for that rather than using the one I
linked to here.

I've changed it back to top: -50%; just now so in Mozilla/Firefox the
banner should once again be noticeably lower than center. I'd be
curious to know which way Opera renders it, though...

Jan 10 '06 #5
BACON wrote:
Bah. When I read your comment I was starting to think maybe it was a
bug introduced with with Firefox 1.5, but then I remembered that I was
experimenting with it and changed it to top: -64px;. Though that
achieves the desired affect, it wouldn't be centered correctly if I had
longer text that wrapped down to another line or changed to a different
image. Anyways, I forgot to change it back, which is likely why it
appeared to work fine when you looked at it. Sorry, I probably should
have created another test page for that rather than using the one I
linked to here.

I've changed it back to top: -50%; just now so in Mozilla/Firefox the
banner should once again be noticeably lower than center. I'd be
curious to know which way Opera renders it, though...


http://edmullen.net/temp/temp.html

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Jan 10 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
6582
by: Quintus Snapper | last post by:
Hi everyone. I'm just making new HTML pages for a site. This time round I've brushed up on my CSS and trying to use as much of it as possible and as well as trying to keep it W3C compliant. So far everything's been going well and the code is currently about 1/3 smaller and running it through the W3C validator doesn't throw any errors! :-) I've basically got it how I want it minus one problem. And that is that I can not seem to figure...
1
4975
by: Ryan Stewart | last post by:
If you don't want to read this post because of its length, I understand. I've spent two and a half days on this problem and have a good deal of information to relate. And this is kind of a long shot, but I'm just hoping someone here has experienced a similar problem and has a better idea of what's going on than I do. First, I've tested this in IE 6.0, Netscape 7.2, Mozilla 1.75, and Firefox 1.0. It works fine in IE (even though I was...
10
28813
by: lac | last post by:
Hello all, I am trying to make horizontal bars of different lengths. I tought either SPAN or DIV would work but it only works for IE. I have a small example at: http://sedivy.com/test.htm Let me know if I missed something. Thanks, Lac
27
3865
by: Daniel Vallstrom | last post by:
I'm having problems with inconsistent floating point behavior resulting in e.g. assert( x > 0.0 && putchar('\n') && x == 0.0 ); holding. (Actually, my problem is the dual one where I get failed assertions for assertions that at first thought ought to hold, but that's not important.) At the end is a full program containing the above seemingly
7
1951
by: Stefan Mueller | last post by:
I choose 'Entry 4' and click then on the button 'Set' to set the index to 'Entry 2'. If you press now the cursor down key 'Entry 5' instead of 'Entry 3' shows up with Mozilla Firefox. With Internet Explorer and Opera it works fine; 'Entry 3' shows up. Is this a bug within Mozilla Firefox or do I have any possibility to change this wrong behavior? Stefan ========================
0
1436
by: BACON | last post by:
I'm just starting the process of reorganising my modest little website and cleaning up all the HTML, and the logical place to begin was with the homepage. I made a simple little ASP.NET control that I can drop into the beginning of any page and it will generate HTML to display my logo, a link, and (optionally) a quote of the day, all of which will be horizontally centered at the top of the page by my default stylesheet. For the main page,...
10
2383
by: News | last post by:
I have a page up trying to learn how to ID a browser and other info. http://wyght.com/warren/testPos.html here is the code <script type = "text/javascript"> var space = ", "; var name = navigator.appName;
23
4384
by: Hallvard B Furuseth | last post by:
As far as I can tell, (x & -1) is nonzero if the integer x is negative zero. So for signed types, x == 0 does not guarantee (x & foo) == 0. Is that right? (Not that I expect to ever encounter a non-two's-complement machine. Just wondering.) -- Hallvard
19
3257
by: Taras_96 | last post by:
Hi all, A poster at http://bytes.com/forum/thread60652.html implies that using strtoupper in transform doesn't work because ctype.h may define strtoupper as a macro: "The problem is that most implementations of the standard C <ctype.h> header define functions like toupper/tolower/etc as macros. To make it work in STL algorithms, you have to include <cctypeheader instead of <ctype.h>. At least on my PC (Debian/gcc 3.3),...
0
9672
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10854
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10559
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10601
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10260
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7794
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6981
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4460
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4023
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.