By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,640 Members | 1,600 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,640 IT Pros & Developers. It's quick & easy.

Mozilla & Firefox ignoring negative top property...

P: n/a
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...

#BannerContainer
{
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
Share this Question
Share on Google+
5 Replies


P: n/a
BACON wrote :

[snipped]

If I use this style...

#BannerContainer
{
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.