CSS Problem with IE6/win

design

#1

Hi everyone –

I was wondering if someone could tell me how I might be able to fix my CSS so that this page will render properly in IE6/win:

http://sportbucket.com/index.php

CSS is here:

http://sportbucket.com/default.css

It’s supposed to be a 2-column layout. It looks great in Safari, Firefox, and IE5.2/mac, but breaks in IE6/win. The problem almost certainly lies in the “float: right” element that makes up the sidebar, but I can’t figure out how to remedy it without breaking the others. I don’t have easy access to an IE6/win machine, so it’s hard to trouble-shoot the problem like I normally would, by trial-and-error.

I would really appreciate any help you could offer.


#2

I haven’t looked at the CSS, but you might try floating your content to the left as well. Sometimes IE miscalculates percentages on widths and padding, so they might be worth checking out as well.


Simon Jessey
Keystone Websites | si-blog


#3

[code]/* Hide from IE/Mac */

  • html .mainCol {
    margin-right: 180px;
    }
    /* end hiding */[/code]
    This causes IE6/Win to render the main column with a right margin of 180px and all other browsers will render it at 200px instead.

This hack works because the selector ‘* html’ is supposed to match elements that have the HTML element as a descendant. There is never an element with HTML element as descendant, so this ruleset should be ignored. IE6/Win gets this wrong and applies the ruleset as if the asterisk were not there.

Edited: forgot the comments to hide from IE/Mac

:cool: Perl / MySQL / HTML CSS


#4

That worked wonderfully. Thank you!