[thelist] IE6 and it's box model....
Alexander C. Garcia
Alexander at Garcia.Name
Thu Jul 10 15:17:57 CDT 2003
Hello everyone
I'm somewhat complete with a site, and decided against using frames for
many reasons that I'm sure everyone knows about. So instead I'm using
<div>'s and CSS positioning and it's box model, the site works beautifully
on Moz1.3, NN7.1, and Opera7.11 , and degrades gracefully in those browser's
previous versions thanks to their excellent CSS box model support. Then
there's IE. Nuff said....
I'm having the hardest time creating a simple box?!?! I want to create a
box that is 100% wide but is only 10px in height. I had another box with
double it's height, and same width, one below the other with z-index. It
works fine in the other browser but IE6 set's it to a minimum height of
20px! I can make it bigger and it does adjust, but anything lower than 20px
is still rendered at 20px.
I sound crazy even when I read back what I wrote, but it's true. Here's
the code I used...
.............................................
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
body {
margin:0;
padding:0;
background-color:#ff0000;
}
#header {
display:block;
position:relative;
width:100%;
height:80px;
margin:0;
padding:0;
background-color:#ffffff;
border:1px dotted #00ff00;
z-index:1;
}
#logo, #logo a {
display:block;
position:relative;
float:left;
width:80px;
height:80px;
border:0px none;
margin:0px;
padding:0px;
background:transparent url(images/iejqlogochalk00.gif) no-repeat fixed
0% 0%;
z-index:2;
}
#logo a:hover {
background:transparent url(images/iejqlogochalk01.gif) no-repeat fixed
0% 0%;
z-index:2;
}
#bar1 {
display:block;
position:absolute;
width:100%;
height:20px;
top:160px;
margin:0;
padding:0;
border:0 none;
/* background:#ffffff url(images/bar_top.jpg) no-repeat; */
background-color:white;
z-index:1;
}
#box1 {
display:block;
position:absolute;
width:80px;
height:10px;
top:160px;
left:200px;
border:1px dotted #339933;
background-color:#000000;
z-index:2;
}
-->
</style>
</head>
<body>
<div id="header">
<div id="logo">
<a href="#"></a>
</div>
<div id="styles">
</div>
</div>
<div id="bar1">
</div>
<div id="box1">
</div>
</body>
</html>
.............................................
My question is, what am I doing wrong?!?!
Thank you.
Peace be with you.
Alexander Garcia
Alexander at Garcia.Name
More information about the thelist
mailing list