Steve Taylor photo

IE CSS box height bug

A small but infuriating CSS bug in IE… No shit.

I’m creating a box with rounded corners around some content using my usual method:

  • Place empty
    s with ids above and below the content
  • Create background images for the top and bottom of the box
    s, and put them in (with fixed width and height for the
    ) with CSS
  • Continue the border along either side of the content
    with CSS borders

All well and good. Only, on IE6/Win, the top

wouldn’t shrink to less than about 16px, leaving a gap of whitespace below the 8px high background image.

After much searching, I found a workaround buried in the life-saving Explorer Exposed pages. You can read about the ins and outs over there; here you’re just going to get a nice quick fix.

Put this in the CSS rule for the

:

overflow: hidden;