YUI-css in IE 6 and 7
If you look at the screenshot below you can see that the right menu box in red has the wrong position in IE6 and 7:
alt text http://horgenweb.org/yui.png
<div id="doc4" class="yui-t2"> //yui-t2 = 180px on the left
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc"> // yui-gc 2/3, 1/3
<div class="yui-u first">content</div> // 2/3
<div class="yui-u">right menu</div> // 1/3
</div>
</div>
</div>
<div class="yui-b">left menu</div> // 180px
<开发者_如何学Go;/div>
<div id="ft">footer</div>
</div>
Anyone know how I can fix this problem?
I was going nuts trying to solve this float bug in IE7. I noticed the bug only affects special grids .yui-gc (2/3,1/3) and .yui-gd (1/3,2/3).
Therefore, I'm serving a star hack to the first unit to decrease the unit's width by 1 or 2 percent. The smaller width (on the first unit) allows the units to float side-by-side in IE7.
.yui-gc .first {*width: 65% !important;} .yui-gd .first {*width: 31% !important;}
I hope this helps, and if there's a better solution, I'm all ears.
精彩评论