Problem in Firefox with CSS for image rollovers

HTML & CSS
1

Hi I am Drew Tirona. I am currently trying to redesign our website with the use of CSS. I am trying to make a navigation menu that is horizontally placed with the use of images and links on top of the background images. When rolled over the images should change as well as the color of the font of the links. The problem I am encountering is that when i see the page render in Firefox…the images bunch up and is not aligned or is misaligned or not in their rightful place.
But when i check out the page in IE7 the page is just fine.

here is my code:


<!DOCTYPE html PUBLIC " -//WRC//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head><style type="text/css">
html {
padding-top: 300px;
background-image: url(splash-tshirt-background-red.gif);
background-repeat: repeat-x;
background-color: #FFFFFF;
}
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: 0;
color: #333333;
}
h1+p {
margin-top: 0;
}
.highlight {
background-color: #FFFFCC;
color: #B22222;
}
p {
text-align: justify;
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
color: #333333;
}
.capitalize {
text-transform: capitalize;
}
ul {
list-style-type: none;
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;


}

body {
font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-position: 98&#37; 2%;
margin: 0;
padding: 46px 20px 20px 46px;
}
#navigation {
padding-top: 20px;
padding-left: 210px;
width: 1300px;
height: 100px;
}
#navigation {
font-size: 80%;
}
#navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
#navigation li {
    display: inline;
}
#nav1 a:link, a:visited{
background: url(buttonwhitesmall.gif);
padding-left: 53px;
padding-top: 20px;
padding-right: 53px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #000000;
}
#nav1 a:hover{
background: url(buttonblacksmall.png);
padding-left: 53px;
padding-top: 20px;
padding-right: 53px;
padding-bottom: 10px;

color: #FFFFCC;
}
#nav2 a:link, a:visited{
background: url(buttonwhitesmall.gif);
padding-left: 50px;
padding-top: 20px;
padding-right: 50px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #000000;
}
#nav2 a:hover{
background: url(buttonblacksmall.png);
padding-left: 50px;
padding-top: 20px;
padding-right: 50px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #FFFFCC;
}
#nav3 a:link, a:visited{
background: url(buttonwhitesmall.gif);
padding-left: 23px;
padding-top: 20px;
padding-right: 23px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #000000;
}
#nav3 a:hover{
background: url(buttonblacksmall.png);
padding-left: 23px;
padding-top: 20px;
padding-right: 23px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #FFFFCC;
}
#nav4 a:link, a:visited{
background: url(buttonwhitesmall.gif);
padding-left: 47px;
padding-top: 20px;
padding-right: 47px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #000000;
}
#nav4 a:hover{
background: url(buttonblacksmall.png);
padding-left: 47px;
padding-top: 20px;
padding-right: 47px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #FFFFCC;
}
#nav5 a:link, a:visited{
background: url(buttonwhitesmall.gif);
padding-left: 49px;
padding-top: 20px;
padding-right: 49px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #000000;
}
#nav5 a:hover{
background: url(buttonblacksmall.png);
padding-left: 49px;
padding-top: 20px;
padding-right: 49px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #FFFFCC;
}
#nav6 a:link, a:visited{
background: url(buttonwhitesmall.gif);
padding-left: 35px;
padding-top: 20px;
padding-right: 35px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #000000;
}

#nav6 a:hover{
background: url(buttonblacksmall.png);
padding-left: 35px;
padding-top: 20px;
padding-right: 35px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #FFFFCC;
}

</style>
</head>
<body>
<h1> Chinese-style stuffed peppers</h1>
<p class="capitalize"> These <span class="highlight">stuffed peppers</span> are lovely as a starteir, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.</p>
<p>Heat the oil in a wok. Add the garlic and stir fry until golden.</p>
<br>
<div id="navigation">
<ul>
<li id="nav1"><a href="#">home</a></li>
<li id="nav2"><a href="#">profile</a></li>
<li id="nav3"><a href="#">how to order</a></li>
<li id="nav4"><a href="#">t-shirts</a></li>
<li id="nav5"><a href="#">events</a></li>
<li id="nav6"><a href="#">contact us</a></li>
</ul>
</div>
</body>
</html>

let me know if you guys can help me out…I really need the help…
thanks a bunch…

God Bless
Drew Tirona…(in dire need of help!!!)

2

Hi Drew, and welcome to SitePoint!

Firstly, a golden rule is to design for Firefox (or other standards-complaint browsers) and then test in IE (which tends to be quite faulty).

However, I’ve tested your code with a few images of my own and it seems to work fine, so it would be good if you could clarify what the problem is. Preferably, provide a live link so we can see what the images are doing, or post a link to the images or link them to a post. At least tell us the dimensions of the images.

This is a somewhat inefficient way to do rollovers, by the way, so your code could be simplified quite a bit. But firt let’s establish what the current problem is. :slight_smile:

3

Hi, are you aware these rules

#nav4 a:link, a:visited{
background: url(buttonwhitesmall.gif);
padding-left: 47px;
padding-top: 20px;
padding-right: 47px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #000000;
}

Is the EXACT same as

#nav4 a:link{
background: url(buttonwhitesmall.gif);
padding-left: 47px;
padding-top: 20px;
padding-right: 47px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #000000;
}
a:visited{
background: url(buttonwhitesmall.gif);
padding-left: 47px;
padding-top: 20px;
padding-right: 47px;
padding-bottom: 10px;
width: 150px;
height: 50px;
color: #000000;
}

It’s working locally, can you show us a site where it isn’t happening for you?

4

As Ryan said you missed out the selector that points to your nav.

It should be:


#nav1 a:link,[B]#nav1 [/B]a:visited {
    etc....
}

There is no need either to duplicate styles that haven’t changed so the anchor rules above could be reduced significantly to this.


#nav1 a {
    background: url(buttonwhitesmall.gif);
    padding:20px 53px 10px 53px;
    width: 150px;
    height: 50px;
    color: #000000;
}
#nav1 a:hover {
    background: url(buttonblacksmall.png);
    color: #ffc;
}

As mentioned above swapping an image on hover should be avoided as its too slow.

You should use either a double image so that you just switch the background-position on hover; or pre-load the over state in the background of the parent holding the anchor and then overlay the normal image in the anchor like so.

5

Hey Ralph,

Thanks for the quick reply. The dimensions of the image is 150px wide and 50 px in height. What the images are doing is some of the images are doing what they are supposed to…which is switch when rolled over at the right spot while others are not showing completely or showing completely and repeating while it is on a link state at the beginning while it hasn’t been rolled over yet. I am thinking this has to do with the browser itself or something. It renders great on IE7 and safari… But when you rollover on a button image with the link over the image the other images move over to the right …
I dont have my own server to place the page to…

Drew (need assistance)

6

Make sure to look at the answers posted after mine. :wink:

7

Paul,

Thanks for the assist…that helped…it worked!!!

Drew