I launched a new blog for our company a few weeks ago and was dismayed to recently learn that IE6 garbles the CSS layout.  This is my first foray into CSS layout and I thought everything was working fine.  It looks good on IE 5 for Mac and any other modern browser I throw at it. 

The left column shoots all the way down to the bottom though in IE 6.  I did a little research, but everyone says to do something different and none of the techniques I tried worked.

Anyone out there had this problem before?  Know a quick fix?

Here’s the url:  http://www.inthesetimes.com/ittlist

I’m afraid I don’t have time to do any investigations into it for you.  It sounds like it might be a “float” issue having to do with width.  (Maybe having to do with IE/win’s incorrect support of the CSS Box Model.  See the box model hack.)

Also, you should definitely understand that Internet Explorer for the Mac and PC are completely different programs.  Totally different codebases, rendering engines, etc.  One isn’t simply a port of the other.

There’s some discussion in this thread about how to test browsers if you’re on a mac.

I’m at home so don’t have a PC to check this on but the problem could be that you’ve applied the box-model hack where its not needed in two places, the sidebar, and the content divs. You don’t have any left or right padding on either of these so get rid of the hacks and just declare the actual widths. You should count the padding only for the actual element you are applying the hack to, not for any nested elements. As a result, IE would see your sidebar as 310px wide but you only have a 280px left-margin for your main content div. Other broswer would see the intended widths.

Also a possibility, because you are using auto margins to center your content, you might also want to apply text-align: center to you body tag and then text-align: left to your content tag to reset it for your text content. I’m not sure if this is an IE 6.0 issue but it is a cross-browser issue, so might be worth trying if the first doesn’t help.

Love the layout of your main site BTW. great stuff. Like I’m reading a broadsheet. Also, nice bloggy design for this one.

Didn’t mean apply those rules to body TAG and content TAG of course. Apply them in your CSS. You know what I mean.

I don’t know if this will do it, but try adding a float:right to your #main div.