YUI-css problem in IE 6 and 7

Question

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:

<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
  </div>
  <div id="ft">footer</div>
</div>

Anyone know how I can fix this problem?

Answer 1

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.

Peace, Luke Robinson