Forum Moderators: not2easy
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
************
Doc declaration: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
***********
It solves the problem for IE7, but not IE6. IE 6 displays my left column (sidebar)with it's full length - the right column begins where the left(sidebar) ends and then fully displays it.
I tried {height: 1%;} fix, but that displayed everything at 1% height on IE6...
I am now moving on to trying this:
<!--[if IE 6]>
<style type="text/css" src="ie.css" mce_src="ie.css" />
<![endif]-->
Is this a more stable approach? I appreciate ANY help - you all know the frustration.
Thanks.
<link rel="stylesheet" type="text/css" href="/style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/ie7.css" />
<![endif]-->
Advantages:
- doesn't target IE8 (odds are it won't need much at all), and you can apply different fixes for IE6 and IE7.
- only loads once for all of your site instead of transferring of the fixes (which I've gotten sometimes to be longer than the original) with each page itself.
I've seen haslayout expand floated blocks to the width of their parent if they have no width specified themselves. Try adding a width to the floated element. (Yeah, I understand, but if you just do it for IE6, it'll probably degrade somewhat ok in that browser, and work as intended in the others)
I did not realize it mattered where the
<link rel="stylesheet" type="text/css" href="/style.css" />
was located (as in: above the <!--[if IE 6]> comment). Makes sense, but am new to CSS styling.
The site now displays properly in IE6. Can't thank you enough!
