[thelist] IE6 and it's box model....

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