ie6 Issue

ahfeckit

Pretty common ie6 issue from the looks of things but still cant find a fix for it -.-

I built the site http://www.cobhcalls.com. The index page has a 3 column layout and the right hand column drops down below the left and middle on ie6 but stays floated to the right.

It works fine on every other browser. Anyone know how I can get it back to the top?

DonkeyStyle \o/

It's usually a padding issue, the columns are effectively wider on IE6 because of the way it treats padding on the divs. Because they're wider, they can't all fit in the same horizontal space, so they wrap.
There are a few things you can do, but what I'd do is find out what padding/margins/div-size IE6 is happy with, then put in a CSS hack for it.
Say most browsers work with 10px padding, but IE6 needs 6px to look normal, you can set it this way in your CSS:

padding: 10px;
//padding: 6px;

Compliant browsers ignore the second line as a comment, so they'll only use the first line, IE6 on the other hand will process it and take 6px as its margin.

There are nicer ways of doing it, like using a conditional statement in the html to load a seperate stylesheet, or you could ditch the padding and instead be creative with your use of margins around the trouble-spots to side-step the whole thing.
Like instead of adding padding to a div, add a margin to its contents, or padding to an inner-div that doesn't have the same risk of badly breaking the layout.

Liam Byrne

IE6 has a "double-float" bug.

If you're floating columns, be sure to set "display:inline", or else it'll double the margins, leading to the above.

The good news is that this won't affect other browsers.