CSS ISSUES IN FIREFOX (Need Help)

[jdvictor]

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.htm l" target="_blank" class="worldcla ss">World Class<span></span></a></li>
<li><a href="welcome.a sp" target="_blank" class="welcome" >Welcome<span ></span></a></li>
<li><a href="menu.asp" target="_blank" class="menu">Me nu<span></span></a></li>
<li><a href="accolades .asp" target="_blank" class="accolade s">Accolades<sp an></span></a></li>
<li><a href="events.as p" target="_blank" class="events"> Events<span></span></a></li>
<li><a href="direction s.asp" target="_blank" class="directio ns">Directions< span></span></a></li>
<li><a href="reservati ons.asp"target= "_blank" class="reservat ions">Reservati ons<span></span></a></li>
<li><a href="contact.a sp"target="_bla nk" 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.pn g);
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;
}

[Death Slaught]

Just to get this out of the way now......

Firefox is displaying your page properly. Are you using a DOC Type? If not then you're using IE in quirks mode, which means that it's displaying the page incorrectly.

Do you have a link to a test site?

[drhowarddrfine]

Not displaying it properly but displaying what is written. Never trust IE to be doing anything correctly.

First issue is id names are to be unique to one element on a page but you are using the same name multiple times.

A link to an online page would be better since we don't have the images to insert into this. I know you are trying image replacement and I had similar issues on some of my sites with IE. You'll notice Opera will display the same as Firefox.