css height/spacing issue in IE

Hi there,

I am building a site which is working fine in Netscape but is not showing correctly in IE 6. The yellow line I have is not "listening" to its 10px height and there is some mystery spacing occuring around it at well....I have looked around, but can't seen to figure out what the fix is. I would really appreciate some help!

Here is the .css and the link: http://www.kohlrbaby.com/vcc/boxlesson.htm

body {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #eee;
background-color: #ffffff;
text-align: center;

}
a {
text-decoration: none;
color: #eee;
outline: none;
font-size: 12px;

}
a:visited {
color: #ccc;

}
a:active {
color: #ccc;

}
a:hover {
color: #990000;
text-decoration: underline;

}
p {
font-size: 12px;
line-height: 22px;
margin-top: 0px;
margin-bottom: 0px;

color: #000000;
text-align: left;

}
#head {
padding: 0px;
margin-top: 30px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
border-top: none;
border-right: 1px solid #43709e;
border-bottom: none;
border-left: none;
text-align:left;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 726px;
height: 110px;

}
#yellowStrip{

width: 726px;
background-color: #e7d77e;
height: 10px;/*height is not functioning?? */
padding: 0px;


}
#lftBar {
width: 93px;
background: #43709e;
float: left;

}
#mainBox {
border-right: 1px solid #43709e;
margin-top: -1px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: #43709e;
border-top: none;
width: 726px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 726px;
}
.innerbox {
padding: 30px;
background-color: #ffffff;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left:93px;


}
#bottom {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:left;
voice-family: "\"}\"";
voice-family:inherit;


}
#bottomText{
padding: 0px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:center;
voice-family: "\"}\"";
voice-family:inherit;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #ccc;
}

the yellowstrip isn't showing up at all in mozilla nor opera,
the header box is too short,
just remove the height from the #header and you'll see the yellowStrip

in msie, use font-size:0; and the box will take the 10px heigh,
msie has a minheight of 1em for an element,

but why use an empty element just to make a yellow line?

why not use border-top in the mainBox?

border-top:10px solid #e7d77e;



and just another side comment on your markup,
you should always make sure that your document is valid,
you got several elements which isn't closed,

and secondly it looks like your quite fond of the br-tag,
rather than br use margin in css to controll the layout,
there is seldom use for a br-tag if you use proper html/css properly,
in both the left and the bottom text you could have use a unordered list rather than br,
whereas br has no sematical meaning the list would easier tell the useragent what purpose the content has.

more about semantics
http://www.camaban.co.uk/semanticwhat.php
http://www.webaim.org/techniques/structure/

Hi there,

Thank you so much for your help! I also really appreciate the extra site feedback. I'm just learning .css so any extra learning is always appreciated. I will give those things a try.

I did give those things a try and definitly that is better, now, however, i'm running into a width pixel issue between netscape and IE. In the mainBox area if i place it at 726px it shows up perfectly in Nets. but one pixel off in IE and if I make it 727px, the opposite is true. I"m not sure if this is some interaction because of the 1px border, but the header has a 1px border as well so it doesnt' seem like the case.....
I would love some feedback! Here is hte .ccs presently.

body {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #eee;
background-color: #ffffff;
text-align: center;

}
a {
text-decoration: none;
color: #eee;
outline: none;
font-size: 12px;

}
a:visited {
color: #ccc;

}
a:active {
color: #ccc;

}
a:hover {
color: #990000;
text-decoration: underline;

}
p {
font-size: 12px;
line-height: 22px;
margin-top: 0px;
margin-bottom: 0px;

color: #000000;
text-align: left;

}
#head {
padding: 0px;
margin-top: 30px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
border-top: none;
border-right: 1px solid #43709e;
border-bottom: none;
border-left: none;
text-align:left;
width: 726px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 726px;


}


#lftBar {
width: 93px;
background: #43709e;
float: left;
margin-top: 50px;

}

.navText{
text-align: center;
voice-family: "\"}\"";
voice-family:inherit;
width: 93px;

}
#mainBox {
border-right: 1px solid #43709e;
border-top: 10px solid #e7d77e;
border-bottom: none;
border-left: none;
margin-top: -3px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: #43709e;
width: 726px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 727px;
}
.innerbox {
padding: 30px;
background-color: #ffffff;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left:93px;


}
#bottom {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:left;
voice-family: "\"}\"";
voice-family:inherit;


}
#bottomText{
padding: 0px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: 20%;
margin-left: 20%; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:center;
voice-family: "\"}\"";
voice-family:inherit;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #ccc;
}

Thanks Again

Sileebailey