IE 6 bugs, CSS that works everywhere... apart from IE6 Options

[Recess]

Hi folks,

I had a quick look through here for an answer, but couldn't find one - if I've been blind, please feel free to re-direct me.

Simply, I've designed a couple of websites (well, designed is maybe a bit strong - I've 'tweaked' some templates) which work perfectly in IE7, Firefox and Safari - but IE6 doens't agree with my layout etc.

The first one - www.fishingontv.com is supposed to have the links to the right of the text, under the banner - which it does in everything - apart from IE6 - where they appear at the bottom of the page instead. CSS file is at www.fishingontv.com/default.css

The second - www.recess.co.uk has a lot more problems. Immediately, the drop-down layout is wrong, but if you look at a page like www.recess.co.uk/html/thepoint.html - you'll see the the right hand side of the text just gets slashed off. (CSS is at http://www.recess.co.uk/css/html1_setup.css)

Does anybody know the hack I need to put into the CSS file in order to make the pages appear like they should? I guess this is the bad thing about just using templates - you don't learn anything about how to put them together!!

I'd love to here some opinions on this, and sorry again if this has been asked 1000000 times before.

John Steventon
www.recess.co.uk

[Darin McGrew]

The first one - www.fishingontv.com is supposed to have the links to the right of the text, under the banner - which it does in everything - apart from IE6 - where they appear at the bottom of the page instead.

This is a feature of well-made CSS layouts, when they are viewed in a browser window too small for two columns. Unfortunately, MSIE never thinks there is enough room for both columns. My guess is that it's a problem with MSIE's broken box model. If you reduce the width of everything by a couple percent, then MSIE should find the room it needs. There may also be an issue with quirks mode vs standards mode, but I think your DOCTYPE declaration is putting MSIE into standards mode.

The second - www.recess.co.uk has a lot more problems. Immediately, the drop-down layout is wrong, but if you look at a page like www.recess.co.uk/html/thepoint.html - you'll see the the right hand side of the text just gets slashed off.

Interesting. FWIW, it happens only in MSIE. It might have something to do with

CODE

overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;

(which appears in many places of your style sheet).

[Recess]

Hi Darin,

Thanks very much for that. I'll take a look at the Fishing site later today and hopefully sort that out - but in the meantime, I removed all mentions of

"!important /*Firefox*/; overflow:hidden /*IE6*/;"

And the Recess site is aligned a lot better now. Odd that a fix which was in there to try to sort out a bug with IE6 was just causing it!!

Thanks again, and I'll keep you informed about the fishing site.

John