By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,662 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

CSS ISSUES IN FIREFOX (Need Help)

P: 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;
}
Mar 13 '08 #1
Share this Question
Share on Google+
2 Replies


Death Slaught
100+
P: 1,137
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 5K+
P: 7,435
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.