Link Class That Works In Ie But Not In Firefox.

[makeitspiffeh]

So what I'm trying to do here is make it so both the text and the background image for this link class to change when a mouse is hovering over them. This works fine in IE. It goes all the way across like I want it to (213px) and it changes on mouse over. But with Firefox it it doesn't go all the way across and the hover effects do not work.CSS

a.side:hover {color: #493f37; font:12pt Tahoma; font-variant: small-caps; text-decoration: none; background-image: url(images/sidelink.jpg); width:213; height:35 background-repeat: repeat-x right; }a.side:active {color: #493f37; font:12pt Tahoma; font-variant: small-caps; text-decoration: none; background-image: url(images/sidevisit.jpg); width:213; height:35  background-repeat: no-repeat;}a.side:link {color: #ffffff; font:12pt Tahoma; font-variant: small-caps; text-decoration: none; background-image: url(images/sidehover.jpg); width:213; height:35 background-repeat: no-repeat;}a.side:visited {color: #ffffff; font:12pt Tahoma; font-variant: small-caps; text-decoration: none; background-image: url(images/sidehover.jpg); width:213; height:35 background-repeat: no-repeat;}

HTML

<a href="link.htm" class="side">LINK</a>

I've tried putting in the width of the background image, and changing the repeat to "repeat-x" and "repeat-x right" but neither work. Does anyone have an alternative code that works in both IE and Firefox?I would do an image rollover instead, but I need text based because of the number of links and the constant changing of them.This is exactly what I need:I need to have a link class for a vertical menu. Background images and text need to alternate on hover.Background image must span the entire width of the background picture/menu div layer.Must work in IE and Firefox.It is not an option for me to change the menu to just images. I need to change the text from page to page. Please help!

[makeitspiffeh]

Aw cmon... 30 visits and nothing so much as a suggestion.... I'm really stuck here.

[cedric]

there are mistakes in youre css code that prevent it to work well. a.side:hover {color: #493f37; font:12pt Tahoma; font-variant: small-caps; text-decoration: none; background-image: url(images/sidelink.jpg); width:213; height:35 background-repeat: repeat-x right; }a.side:active {color: #493f37; font:12pt Tahoma; font-variant: small-caps; text-decoration: none; background-image: url(images/sidevisit.jpg); width:213; height:35 background-repeat: no-repeat;}a.side:link {color: #ffffff; font:12pt Tahoma; font-variant: small-caps; text-decoration: none; background-image: url(images/sidehover.jpg); width:213; height:35 background-repeat: no-repeat;}a.side:visited {color: #ffffff; font:12pt Tahoma; font-variant: small-caps; text-decoration: none; background-image: url(images/sidehover.jpg); width:213; height:35 background-repeat: no-repeat;}when you want to call the link you should do it like this:.side:hover ...(because you gave the 'a' a class)the order the pseudo-classes are put in could also cause a problem, it should be (link, visited, hover, active)after the height: 35 you forgot the ';' sign so the background-repeat is not read.repeat-x right doesn't exist I think (i'm not sure)I rewrote it like this and it seems to work in IE7+, FF,...CSS

.side	{	width:213px; height:35px; background-color: red;color: #ffffff;	background-image: url(smiley.gif); background-repeat: no-repeat;}.side a	{ font:12pt Tahoma; font-variant: small-caps; text-decoration: none;}.side:hover {color: #493f37; background-image: url(maan.gif); background-repeat: repeat-x; }.side:active {color: #493f37; background-image: url(bg.jpg); background-repeat: no-repeat;}

HTML I put it in a div to set the with of the background

<div class="side"><a href="link.htm">LINK</a></div>

Hope this does it for you!

[makeitspiffeh]

Thanks, I'll try it out, see if it works. And I'll let you know.

[Ingolme]

The :link and :visited pseudo-classes must be declared before :hover and :active.

[makeitspiffeh]

The :link and :visited pseudo-classes must be declared before :hover and :active.

You think that will solve the issue with my original code????Ok I did this:

a.side {width:213px; height:30px; background-image: url(images/sidehover.jpg); background-repeat: no-repeat; text-decoration: none;}a.side {width:213px; height:30px; color: #ffffff; font:12pt Tahoma; font-variant: small-caps; text-decoration: none;}a.side:hover {width:213px; height:30px; color: #493f37; background-image: url(images/sidelink.jpg); background-repeat: repeat-x; text-decoration: none;}a.side:active {width:213px; height:30px; color: #493f37; background-image: url(images/sidelink.jpg); background-repeat: no-repeat; text-decoration: none;}

It switches back and forth in both IE and MF but, in MF it still doesn't span the 213px and it's not picking up the height either.... help!The code that was suggested didn't work at all unless I put class="side" in the <a href.. and with the <div class="side" it protruded the top link in the menu.. so I took that out, and it solved that problem. But it didn't have Tahoma as the font, nor was the font white on mouse-out... It also had an underline on the links. I better off with my original code. So I changed it up a bit... but I can't seem to get the width and the height to work in firefox, no matter where I put it. Sooooo stressful... I should hire someone to do the coding, and do what I do best - Designing!

[makeitspiffeh]

Ok you can close this now..... I broke down and   'd it for firefox.... so now it looks exactly the same on both.... Using the code I just posted... It works, I'm happy, it's just really sloppy now.