Is there an alternative to padding for IE that doesn't make the text disappear?

Question

Is there an clean alternative that doesn't make the text disappear in the following:

<div style="background-color:#ddd; padding:10px 0 50px 0;">
<ol><li>In what year were you born?</li></ol>
<div><select name="c_record" size="1">
    <option value="">-- Select One --</option>
    <option value="1">1900</option>
    <option value="2">1902</option>
</select></div>
</div>

If I change the padding on the outside div to: padding:10px 0 0 0; the text shows up again.

I have also tried adding a second div inside the outmost div and adding the padding to it, but that doesn't work either. Add margin to this inside div doesn't have any affect for the top and bottom margins.

Any ideas?

Edit: I am using IE 6 & 7 and I have no other code on the page, no doctype, stylesheets--just the above code.

Answer 1

Try margin instead of padding?

Answer 2

Are these the only styles? If there is anything floating things get complicated fast. Please try this in it's own file with just the doctype, html, head, etc. There is nothing wrong with the above, in isolation.

Answer 3

Adding position:relative; to your style will fix this problem. It's called affectionately the Peekaboo bug.

Here is a link that explains it in a little more detail.

I would agree that you should just try using margin though since adding position:relative can cause other problems. Also browsers don't consistently follow the box model standard with padding.

Answer 4

I am using IE 6 & 7 and I have no other code on the page, no doctype, stylesheets--just the above code.

It is just foolish to try to solve problems by letting IE default to quirks mode.

In any case, @Jeremy B has a good solution with the height: 1%. This works just fine for me in IE6:

<div style="background-color:#ddd; padding:10px 0 50px 0; height: 1%;">