Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>text</title>
<style type="text/css">
body {
font-family: verdana, sans-serif;
font-size:1em;
background: #fff;
color:#000;
}
#container {
width: 30em;
text-align: center;
}
#content {
border-left:1px solid #000;
border-right:1px solid #000;
padding: 5px;
background: #D6DFEF;
}
.top {
display:block;
font-size:1px;
background:transparent;
}
.bottom {
display:block;
font-size:1px;
background:transparent;
}
.b1, .b2, .b3, .b4 {
display:block;
overflow: hidden;
}
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {background: #D6DFEF; border-left:1px solid #000; border-right:1px solid #000;}
.b1 {margin:0 5px; background:#000;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0px 1px;}
</style>
</head>
<body>
<div id="container">
<b class="top">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
</b>
<div id="content">
<p>some text here</p>
</div>
<b class="bottom">
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</b>
</div>
</body>
</html>
it's collapsing margins/clearance that's affecting the bottom div in IE I think, In any case the easiest fix I could find is to add width: 100%; to the .top and .bottom classes which it should be by default anyway.. this seems to work without affecting other browsers too.
Suzy
Anyway, many thanx SuzyUK (hope to say it in person if you are going to NO :-))
