help with simple 3 column CSS layout using IE6

[RobSoukup]

It works fine in Firefox but IE6 padds the bottom of the header and adds pixels to my three columns. Anyone know what's going on here?

http://robsoukup.info/next/template.html

Here is a jpg image of the problem - 9546




This is a description of my wireframe layout:

Wrapper that hides the bottom of the three columns so they all appear equal sized.

Header

three columns all floated to the right
navigation column content column rightcolumn

Footer

[Centauri]

First of all, for the benefit of IE6, any element that is floated and has a margin on the floated direction, also needs display:inline as IE6 will double the margin width - this applies to your header, right column and footer.

The gap under the header is due to the gaps below each menu link image - an inline image will have a space below it for text decenders (even if there is no text around). The fix is to convert the images to block display, which also means they will have to be floated to sit beside each other, which then causes other problems due to you <br> in the middle. These problems are easily fixed if the menu is marked up for what it semantically is - an unordered list of text links, which can then be styled with the appropriate background images (the images should not be in the html as they are presentational). There is also no need for that javascript either - the rollovers can be done via css much easier.


PS: I find the SnapShots "enhancement" rather annoying on the menu links...

[RobSoukup]

So I take back everything I said about IE6. I have a lot to learn. Thanks for the help.

My columns were off because the Snap graphic was too large and it expanded the column.

I turned off the Snap previews everywhere except the body of the page.

Big One - I learned how to use CSS instead of javascript for rollovers. There is still a flicker on mouseover between the background and the text. Still working on that glitch.

Thanks for the help. It is appreciated.