I realise this is a hot topic around google, but have only found one piece of advise which is
#divname {
margin:0;
padding:0;
}
and this isn't working for me no matter if I apply it to all my divs.
I have a fixed layout and the #CONTENT div should line up to height with the #BOUNDINGBOX Div. Its width is lining up fine, but the height in IE is about 10-20px lower than in FF.
Here is my CSS:
[CODE]
body
{
font-size: 11px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, Lucida;
background-image: url(/layoutpics/bg.jpg);
background-repeat:repeat;
}
a:link {
text-decoration: none;
color: #a2a1a1;
display: inline;
width: auto;
}
a:active {
text-decoration: none;
color: #a2a1a1;
}
a:visited {
text-decoration: none;
color: #a2a1a1;
display: inline;
}
a:hover {
display: inline;
color: #a2a1a1;
text-decoration: underline;
}
span.c4 {
color: #CC3366;
}
span.c3 {
color: #6B4D4A;
}
span.c6 {
font-size: 150%;
}
p {
max-width:500px;
}
#header {
height: 50px;
width: 700px;
background-color: transparent;
margin-bottom: 10px;
padding-left: 30px;
padding-top: 20px;
}
#boundingbox {
height: 470px;
width: 900px;
background-color: #fff;
margin-top: 20px;
margin-left: 30px;
padding-left: 30px;
background-image: url(/layoutpics/linebg.jpg);
background-repeat: no-repeat;
}
#nav {
float: left;
width: 180px;
height: 450px;
background-color: transparent;
margin-bottom: 10px;
padding-top: 20px;
}
#content {
float: right;
height: 450px;
width: 660px;
padding-top: 20px;
background-color: transparent;
overflow: auto;
}
I'm so confused and everything is working fine except this one teeny weeny issue!
Thanks in advance,
Shona
I thought I would update - I have noticed this is only a problem in IE7 and below. - version 8 works fine just like Firefox. Therefore for a solution I have used a <!--[if IE 7]> css. However, it would be nice to know if there is a solution without using the css hack.
