Another Big Site Gets a CSS Makeover | February 2, 2004
The AOL site has been given a CSS makeover and I have to say, it looks pretty good.
Like most big site makeovers, the first thing people notice are the sites problems. In the case of AOL, the site doesn’t validate, a lot of the text is image based, the text is a little small and overlaps its containers when resized.
The site also uses Javascript to show/hide layers of content. However instead of using a method like this, when Javascript is turned off, some of the content is inaccessible.
All that being said, the site looks great. It’s got a very macromedia.com/Windows XP feel about it. It’s good to know that the old idea about CSS sites looking square and ugly is well and truly out of the window.
Comment
I use Netscape 7.1 (Mozilla 5) and the AOL site and others I’ve seen slides off the screen to the left with no scroll bar if I narrow the window. What gives?
Comment
It’s the centering method they are using. It’s the same one I use.
CSS doesn’t have a great way (as far as I know) for keeping a div in the middle of the screen both horizontally and vertically, so this is the hack.
Place the container div absolutely positioned with the left set to 50%. Then set the width to a fixed value (width: 500px). Finally, set a negative magin on the left side. (margin-left: -250px) that is half the width.
div#container {
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px;
}
This will make the content center - the issue is that I am guess browsers assume that if you specificy a negative margin, that they don’t need to put in a scroll bar. Bug or no, I am not sure.
Comment
Always good to see more sites go with standards, even if it is AOL.
Comment
Thanks Jeff, I get it. Is window resizing an issue or does everyone just maximize when looking at sites? Andy, your site does this in my browser.
Comment
Seems like a good reason not to use that method of centering to me.
Comment
Ditto as Chris said: Good to see another site up and running with Standards.
Comment
It actually looks good. Works well with most browsers, job well done!
Comment
If all you want to do is center horizontally this is all you need:
body { text-align: center; /* For IE PC */ }
#container { margin: 0 auto; text-align: left; }
…
Whoa just checked, apparently Moz has a problem with that technique too. Stupid dino. :D
Comment
aol.com forgot to set the body background to white.
Comment
Sorry if I’m wrong, but doesn’t this work on IE PC:
#container { margin: auto auto; width: 770px; }
?
Comment
Re: CSS margin centering, I think IE stumbles over “auto” shorthand, at least in versions which understand “auto” to begin with. Use…
#body { text-align: center; }
#container { text-align: left; margin-left: auto; margin-right: auto; }
… and it should work fine in most any IE version.
On topic, I was amazed to see AOL going the standards way. The code’s trimmer, but there are still lots of unquoted attributes in there.
Comment
Ack. I don’t know why I put the “#” before the “body” selector. I do that a lot, then I wonder why my CSS doesn’t work. Coffee must not be working today. :P
Comments on: Another Big Site Gets a CSS Makeover
Jump to the comment form