1
Understandably I know that the real issue is in IE but at the moment everything looks good in IE and not Firefox.
THE PROBLEM
The problem that I am having is that my navigation menu is out of wack when viewing it in Firefox the browser seems to be pushing everything on the right to the left and I can't for the life of me solve the problem. Basically the menu is suppose to be sitting on the right side of the website but when viewing the website in firefox it seems the style sheets for the menu lays on the left overlapping images and text. Any help would be a blessing I have been working on this for awhile. Thank you all for the time.
The HTML CODE
<div id="menu"><ul id="menu" name="menu">
<li>
<div id="postit"></div>
<div id="newsletter">
<div id="postit"></div>
<a href="index.html" target="_blank" class="worldclass">World Class<span></span></a></li>
<li><a href="welcome.asp" target="_blank" class="welcome">Welcome<span></span></a></li>
<li><a href="menu.asp" target="_blank" class="menu">Menu<span></span></a></li>
<li><a href="accolades.asp" target="_blank" class="accolades">Accolades<span></span></a></li>
<li><a href="events.asp" target="_blank" class="events">Events<span></span></a></li>
<li><a href="directions.asp" target="_blank"class="directions">Directions<span> </span></a></li>
<li><a href="reservations.asp"target="_blank" class="reservations">Reservations<span></span></a></li>
<li><a href="contact.asp"target="_blank" class="contact">Contact Us<span></span></a></li>
</ul></div>
THE CSS CODE
#menu {
list-style: none;
padding: 0;
margin: 0;
width:200px;
height:600px;
left: 20px;
top: 180px;
background: url(#) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span{
display: block;
}
#menu .worldclass {
width: 200px;
height: 122px;
left: -5px;
top: -179px;
background-image: url(../index_files/worldclass.png);
background-repeat: no-repeat;
}
#menu .welcome {
width: 144px;
height: 52px;
left: 25px;
top: -54px;
background-image: url(../index_files/welcome.png);
background-repeat: no-repeat;
}
#menu .menu {
width: 144px;
height: 52px;
left: 25px;
top: 0px;
background-image: url(../index_files/menu.png);
background-repeat: no-repeat;
}
#menu .accolades {
width: 144px;
height: 51px;
left: 25px;
top: 54px;
background-image: url(../index_files/accolades.png);
background-repeat: no-repeat;
}
#menu .events{
width: 144px;
height: 51px;
left: 25px;
top: 107px;
background-image: url(../index_files/events.png);
background-repeat: no-repeat;
}
#menu .directions {
width: 144px;
height: 52px;
left: 24px;
top: 160px;
background-image: url(../index_files/directions.png);
background-repeat: no-repeat;
}
#menu .reservations{
width: 144px;
height: 51px;
left: 24px;
top: 214px;
background-image: url(../index_files/reservations.png);
background-repeat: no-repeat;
}
#menu .contact {
width: 144px;
height: 51px;
left: 23px;
top: 267px;
background-image: url(../index_files/contact.png);
background-repeat: no-repeat;
}
