Annoying FF background image spacing

I am working on a website for myself and I have run into some funny spacing with some background images in Firefox.

The page is here:
http://www.ashleywalters.net/templates/business/businessasp/default.htm

The CSS is here:
http://www.ashleywalters.net/templates/business/businessasp/css/style.css

I am using a simple rollover effect using CSS, links, and background images to create icons that highlight. I am using a spacer image in the code with a link and class attached to get the desired effect. The spacer is the same size as the background icon images. However Firefox displays the background image halfway down the spacer image cutting the icon off. I have noticed this before on a least two other occasions while working on other websites and have used a hack. Instead of using a hack this time, I want to know why it is happening, and perhaps if there is a way to fix it.

The icons look fine in IE, go figure.

Here is a snippet of code from my website that creates the bar with the icons in it:

<div id="bar">
<a class="home" href="#"><img src="images/icon.gif" alt="Go to the Home Page" /></a>
<a class="contact" href="#"><img src="images/icon.gif" alt="Go to the Home Page" /></a>
<a class="support" href="#"><img src="images/icon.gif" alt="Go to the Home Page" /></a>

</div>

Here is the corresponding CSS:

a.home {background: url(../images/home.gif) no-repeat top left; width: 32px; height: 27px;}
a.contact {background: url(../images/contact.gif) no-repeat top left; width: 32px; height: 27px;}
a.support {background: url(../images/support.gif) no-repeat top left; width: 32px; height: 27px;}

a.home:hover {background: url(../images/home2.gif) no-repeat top left; width: 32px; height: 27px;}
a.contact:hover {background: url(../images/contact2.gif) no-repeat top left; width: 32px; height: 27px;}
a.support:hover {background: url(../images/support2.gif) no-repeat top left; width: 32px; height: 27px;}


Any ideas? Most likely the problem is deep within my CSS so I have provided the link to it above. Thanks for your help.

Figured it out! I made my links display:block and then made them all float right. I added some right-margin and now it looks just the way I wanted.

Posted this in case someone else had the same problem.

The efficiency of your CSS could be improved. Currently, you have:

a.home {display:block; float: right; background: url(../images/home.gif) no-repeat top left; width: 32px; height: 27px; margin-right: 1.5em;}
a.contact {display:block; float: right; background: url(../images/contact.gif) no-repeat top left; width: 32px; height: 27px; margin-right: 1.5em;}
a.support { display:block; float: right; background: url(../images/support.gif) no-repeat top left; width: 32px; height: 27px; margin-right: 1.5em;}

a.home:hover {background: url(../images/home2.gif) no-repeat top left; width: 32px; height: 27px;}
a.contact:hover { background: url(../images/contact2.gif) no-repeat top left; width: 32px; height: 27px;}
a.support:hover { background: url(../images/support2.gif) no-repeat top left; width: 32px; height: 27px;}

Better would be:

#bar a { float: right; width: 32px; height: 27px; margin: 0 1.5em 0 0; background: no-repeat; }
.home { background-image: url(../images/home.gif); }
.contact { background-image: url(../images/contact.gif); }
.support { background-image: url(../images/support.gif); }
.home:hover { background-image: url(../images/home2.gif); }
.contact:hover { background-image: url(../images/contact2.gif); }
.support:hover { background-image: url(../images/support2.gif); }

Why thank you.

I haven't had time to clean up my CSS yet. I have a lot weeding out to do yet with this template, but help is always appreciated. :thumbsup:


EDIT: Oops, nothing shows up when I do the way you suggested. I shall investigate.

Hmm..

I can't figure it out actually. Do you know why the code you present isn't showing the background images Arbitrator?

Actually, it was the background: no-repeat; that kept the icons from showing.

Thus the code that works is:

#bar a { float: right; width: 32px; height: 27px; margin: 0 1.5em 0 0; }
a.home { background-image: url(../images/home.gif); }
a.contact { background-image: url(../images/contact.gif); }
a.support { background-image: url(../images/support.gif); }
a.home:hover { background-image: url(../images/home2.gif); }
a.contact:hover { background-image: url(../images/contact2.gif); }
a.support:hover { background-image: url(../images/support2.gif); }


compliments of Mister Arbitrator. EDIT: Taking out the no-repeat might be dangerous for others wanting to use this rollover technique. I have checked in Firefox and IE and because the size of my link blocks have been specified with the same specifications as the images, the images aren't repeating. Hopefully taking out the no-repeat declaration will not affect the appearance of the background images for other people.

Actually, it was the background: no-repeat; that kept the icons from showing.Yeah, my mistake. I forgot that the #bar a selector would have greater specificity than the class selectors. If you want to declare no-repeat, then you need to use background-repeat: no-repeat so that the background-image declarations don’t get overridden.

Thank you very much for your help Arbitrator. It makes perfect sense now that you have explained it. Silly me for not thinking about the oder in specificity! *Hits head*

Shouldn't have been such a mystery. The CSS your provided is much more efficient. I shall get to work on the rest.