Software: IE6 crops child elements

While trying to implement a list of buttons, I found that IE6 crops the tops and bottoms of child elements when the parent element is a block level element. For example, if the parent is a ul element, the li elements would be cropped.

If you are using IE6, you should see that the top and bottom borders of the following TEST boxes are missing. Firefox users would see two boxes with borders around each one, as expected.

• TEST

TEST

Below is the code to generate the TEST boxes.

<ul style="position:absolute">
 <li style="border:1px solid darkgreen;display:inline;">TEST</li>
</ul>
<div style="position:absolute">
 <span style="border:1px solid darkgreen">TEST</span>
</div>

The work-around is to add padding at the top and bottom of the parent element, e.g. padding:1px 0px 1px 0px, resulting in …

• TEST

TEST