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
ids above and below the content
- Create background images for the top and bottom of the box
<div>s, and put them in (with fixed width and height for the
<div>) with CSS
- Continue the border along either side of the content
<div>with CSS borders
All well and good. Only, on IE6/Win, the top
<div> 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