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, 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.
