Borders disappear in IE

I have an outer <div> that is relatively positioned, with a fixed width. Inside is another <div>, and inside that is another <div>. The inner most div should have a border, but it doesn't unless I remove the "position:relative" style from the outer most div, OR I add padding-top to the 2nd level div.

This must be a known bug, but I don't know what the name of it is or what the best fix is for it. Anyone have any idea?

Below is the code to reproduce it. It has been stripped to what I think is the bare essentials.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
 <title>Test</title> 
 <style type="text/css"> 
#container 
{ 
 /* Comment out either of these rules */ 
 position: relative;  
 width: 770px; 
} #content 
{  
 /* 
 padding-top: 1px; 
 */ 
} 
#status 
{ 
 border: 10px solid #f00; 
} 
</style> 
</head> 
<body> 
<div id="container">  
 <div id="content"> 
  <div id="status"> 
   Hello World 
  </div><!-- status --> 
 </div><!-- content -->  
</div><!-- container --> 
</body> 
</html>

Borders disappear in IE

Ancestor is relatively positioned, no padding

Fotiman

createErrorMsg

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week