Here’s a rather quick css tutorial, but in my opinion, a rather important one. Have you ever noticed when you code a website that uses floating div’s that IE6 does some really weird things with the margin widths?

I’ve came across this before, normally you can get away with a few extra pixels without having to worry, but when you’re coding sites that have large margins on a floating div it can really get messy. Anyway I decided enough was enough, I wasn’t going to leave it, I fiddled around for an hour or two with my CSS file and finally I came up with the reason IE6 doubles the margin on a floating div and that reason is…..(drum roll..)….there is no reason, it shouldn’t do it, it can only be described as a bug!

The Fix

Now to the important part, how to fix the weird margin problem in IE6, and the fix is just as weird as the problem you simply add:

display: inline;

Into the CSS code for the floating element.

Again there’s no reason why this should happen, it’s just one of those things!

I find if you use this technique with the essential css code from my other tutorial I can quickly create layouts that are very, very cross browser compatible.

In this guide I’ll be going through how to start out learning CSS. Hopefully by the end of this tutorial you will be much more comfortable using CSS to code websites.

I used to find it hard to find a list menu that was compatible with all the browsers I use without having to use any CSS hacks that’s why when I created this one I decided to keep it and use it as my standard list menu, that way I only have to change certain aspects of the styling to make it look how I want it to look.

When I’m coding a layout I like to start with a ready made CSS file that contains some code to make the actual coding of the layout easier. In this guide I’ll go through what I use and explain why. You should at least be familiar with CSS to properly understand this guide.