Subcide

12. Getting it right in IE

Note: To follow this section, you'll need to install the IE standalone versions. These are unsupported hacks of old IE versions that you can install along side your current IE version.

Let's start the hacks at the current problem child, IE5.

Load up your IE5 browser. There's 2 things that I notice instantly that are wrong. The first is that the page isn't centered in the browser like it should be, and the second is that the footer has a weird alignment issue.

The alignment issue is well known, so we'll tackle that one first.

IE 5 and 5.5 do not recognise the margin: auto; css property like they should. To get around this we need to use the text-align: center; property on the body which will center the container div.

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	text-align: center;
}

This will center your container div, but will also center all the text inside that div. We don't want that, so we need to override the text-alignment inside the container div.

#page-container {
	width: 760px;
	margin: auto;
	text-align: left;
}

That solves the centering issue. Now the weird footer.

I couldn't actually find any references to this paticular bug with a brief google search, so I just set out to figure out how to fix it. I guessed that the bug had something to do with the floated "altnav" div, but couldn't work out what the problem was exactly. So eventually I tried putting a div around the copyright info, and that made the bug dissapear.

<div id="copyright">
Copyright © Enlighten Designs<br />
Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

This triggered some padding-top issues on the footer, so I removed the padding-top: 13px; attribute from the #footer rule, and added it to both the #copyright div and the #altnav div.

#footer #altnav {
	clear: both;
	width: 350px;
	float: right;
	text-align: right;
	padding-top: 13px;
}

#footer #copyright {
	padding-top: 13px;
}

There's one last IE bug that I can see, and that is that when you mouseover the selected nav item, it reverts to the white background mouseover as if it wasn't selected. We don't want the selected item to change on mouseover.

If we add a few hover rules to our big rule that sets the nav selection, that will fix our problem.

body.about dt#about,
body.about dt#about a,
body.about dt#about a:hover,
body.services dt#services,
body.services dt#services a,
body.services dt#services a:hover,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.portfolio dt#portfolio a:hover,
body.contact dt#contact,
body.contact dt#contact a,
body.contact dt#contact a:hover {
	background-position: 0 -100px;
}

And there you have it. Hopefully you've learned something about CSS layouts. My reccommendation is to have a look at some major CSS sites, like the ones listed below, and have a look through their HTML/CSS to see how they've done things. If in doubt about something, Google it.

Feel free to suggest changes or improvements to this tutorial, or ask for tutorials on other topics (just not dropdown navigation menus plz).

Final Example

After half a million requests for example HTML/CSS files, I've put some up:

http://www.subcide.com/tutorials/csslayout/example/

If you're still having problems, please run through my Debugging CSS tutorial before emailing me questions. Thanks :D

Historical Disclaimer

This tutorial is coming up 3 years old now, looking back and creating this example file I realise there are problems with the tutorial, such as forgetting to format the sidebar's content or add proper padding to it. My best practices have evolved over the years as everyone's should, and I plan to write another more up to date, and more in depth tutorial in 2009.

Good Resources