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.
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.