Menu
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.
[CODE]
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;
}