Help! CSS Rollovers Work only in Opera, not Firefox or Safari

**bbender** · 03-08-2010, 04:35 PM

Hey all:

I am new to this thread and just getting started in web development. Been in print design for 10 years and I'm trying to build a nice web portfolio and really need these rollovers to work because the Mistral font is an integral part of the header font scheme. It's a png file with the word "specials" changing from white to gold on a hover, both words stacked in the two colors in the same file, that links to another page called "specials.html". I first tried the lengthy JavaScript rollover code and had the SAME problem with the SAME browsers! I saw the CSS rollover trick and thought it was way easier and would likely work. I was wrong. ANY help would be greatly appreciated!!

The HTML code sample for the div link is this:

HTML Code:

<div id="cateringspecialfooter"><a href="special.html">
</a></div>

and my stylesheet for the div looks like this:

#cateringspecialfooter a {
display:block;
width: 200px;
padding:10px 10px 20px 7px;
font: bold 13px sans-serif;;
background: url(../images/specialcssrollover.png) 0 0 no-repeat;
text-decoration: none;
}
#cateringspecialfooter a:hover { 
background-position: 0 -33px;
}

Any help would be greatly appreciated, and I promise to make myself indispensable for anyone else who has some beginner web development issues.

Glad to be aboard, and thanks to everyone in advance!!

**James.H** · 03-08-2010, 05:00 PM

I recommend using my tutorial I made just a second ago on this very subject, it's very easy to use and works the best:

CSS Tutorial: How To Create Hover / Rollover Image Menu