467,077 Members | 952 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,077 developers. It's quick & easy.

CSS ISSUES IN FIREFOX (Need Help)

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;
}
Mar 13 '08 #1
  • viewed: 1354
Share:
2 Replies
Death Slaught
1GB
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?
Mar 13 '08 #2
drhowarddrfine
Expert 4TB
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.
Mar 13 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

87 posts views Thread by expertware@libero.it | last post: by
4 posts views Thread by Dan Diephouse | last post: by
2 posts views Thread by Steve Mauldin | last post: by
11 posts views Thread by sllrphoto@yahoo.com | last post: by
1 post views Thread by rahulthathoo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.