Browsers

[Steve25]

When creating this website that i'm doing now i was only really using one browser which i realise now was a big mistake. The site appears fine in firefox but not in IE. There were things all over the place but i've managed to fix most of these errors however i'm still have an issue on something.

The second div in the navigation bar is higher than the first one in IE but is perfectly level in firefox. I'm not sure how to fix this. Also, i don't know whether it's just the browser or not but in firefox the header appears to have more height than in IE and i can't seem to figure that one out either. Here is my css thanks for any help. By the way i validated both the css and html the other day.



body {
padding: 0;
margin: 0;
height: 100%;
background: #57483d;
}

#head {
position: relative;
background: #630000;
left: 0px;
width: 680px;
height: 100px;
margin: auto;
border-right: 2px solid black;
border-left: 2px solid black;
}

#nav-1 {
position: relative;
top: -15px;
width: 680px;
height: 25px;
left: 0px;
margin: auto;
background-image: url("images/Nav-bar-1.gif");
background-repeat: repeat-x;
border-right: 2px solid black;
border-left: 2px solid black;
}

#nav1-home {
position: relative;
top: 5px;
left: 137px;
width: 60px;
height: 20px;
}

#nav1-about {
position: relative;
top: -29px;
left: 200px;
width: 80px;
height: 20px;
}

#nav-2 {
position: relative;
top: -15px;
width: 680px;
height: 25px;
margin: auto;
background-image: url("images/Nav-bar-2.gif");
background-repeat: repeat-x;
border-right: 2px solid black;
border-left: 2px solid black;
}

#about-nav {
background: #DDDDDD;
position: absolute;
top: 0px;
left: 145px;
width: 200px;
height: 25px;
display: none;
}

#shop-nav {
position: absolute;
top: 129px;
left: 435px;
width: 300px;
display: none;
}

#delivery-nav {
position: absolute;
top: 129px;
left: 435px;
width: 200px;
display: none;
}

#contact-nav {
position: absolute;
top: 129px;
left: 435px;
width: 200px;
display: none;
}

p.nav-1-text {
font-family: "Arial";
font-size: 11pt;
color: #FFFFFF;
text-align: center;
}

p.nav-2-text {
font-family: "Arial";
font-size: 11pt;
color: #FFFFFF;
}

#flash {
position: relative;
background: #CECECE;
width: 680px;
height: 100px;
top: -15px;
margin: auto;
border-right: 2px solid black;
border-left: 2px solid black;
}

#main {
position: relative;
background: #FFFFFF;
width: 680px;
height: 530px;
top: -27px;
margin: auto;
border-left: 2px solid black;
border-right: 2px solid black;
}

#welcome-text {
position: relative;
width: 580px;
height: 250px;
top: 60px;
left: 10px;
margin: auto;
}

#buy-text {
position: relative;
width: 290px;
height: 200px;
top: -5px;
left: 60px;
}

#guarantee-text {
position: relative;
width: 250px;
height: 250px;
top: -217px;
left: 380px;
}

#bottom {
position: relative;
background: #000000;
width: 680px;
height: 80px;
top: -28px;
left: 0px;
margin: auto;
border-right: 2px solid black;
border-left: 2px solid black;
border-top: 5px solid #4c4c4c;
}

p.main-text {
font-family: "Arial";
color: #000000;
font-size: 9pt;
}

h1 {
color: #4a0202;
font-family: "Arial";
font-size: 18px;
}

span {
word-spacing: 28px
}

a {
text-decoration: none;
color: #000000;
}

a:visited {
color: #000000;
}

[infinityspiral]

overflow:hidden is going to be your biggest friend here. ie adds padding and borders differently than firefox which is why you're having problems. Overflow hidden keeps that width and height to a certain amount and hides the 1 or 2 pixels overlapping that cause the usual problems. I've found the process is much shorter if I get it working in ie6, then move to ie7 and Firefox.

[Steve25]

I'll give this a go, thanks :)