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.

Posted at February 2, 2004 10:13 AM

Comments

Jane said on February 2, 2004 3:24 PM

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?

Jeff said on February 2, 2004 7:07 PM

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.

Chris Vincent said on February 2, 2004 7:37 PM

Always good to see more sites go with standards, even if it is AOL.

Jane said on February 2, 2004 7:37 PM

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.

Joel said on February 2, 2004 10:30 PM

Seems like a good reason not to use that method of centering to me.

Amit Karmakar said on February 2, 2004 11:19 PM

Ditto as Chris said: Good to see another site up and running with Standards.

Chungh said on February 3, 2004 2:11 PM

It actually looks good. Works well with most browsers, job well done!

Shaun Inman said on February 3, 2004 8:39 PM

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

huphtur said on February 3, 2004 10:06 PM

aol.com forgot to set the body background to white.

Tom said on February 4, 2004 4:06 AM

Sorry if I’m wrong, but doesn’t this work on IE PC:

#container { margin: auto auto; width: 770px; }

Paulo said on February 4, 2004 3:45 PM

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.

Paulo said on February 4, 2004 3:47 PM

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