Background image of Anchor not working with Safari/Firefox

HTML & CSS
1

Hi,

I have following Css where i have used back-ground image. Then i am generating Anchor and assigning css class which has image. It works fine with IE but does not work with Safari,Firefox and Chrome.

Can anyone help me on how to fix it. I have given details below.

Thanks,
Chandan

Css

.HOME
{
BACKGROUND-IMAGE: url(…/images/home.jpg);
WIDTH: 56px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 20px
}
.HOME A
{
WIDTH: 56px;
HEIGHT: 20px
}
.HOME A:hover
{
BACKGROUND-IMAGE: url(…/images/home1.jpg);
WIDTH: 56px;
HEIGHT: 20px
}

Html Code

<td class=“HOME”><A href=“#abc.html” Class =“Home” onclick=“OpenPage()”/></td>

2

Did you try to use the image in the <a attribute, i.e.


.HOME {
    width: 56px;
}

.HOME a{
    height: 20px;  background: url(../images/home.jpg) no-repeat;
}

.HOME a:hover{
    background: url(../images/home1.jpg);

}
3

Hi Welcome to Sitepoint :slight_smile:

You can’t assign dimensions to inline elements such as anchors unless you first make them display:block. (.home a {display:block})

From the look of your code I’m guessing that you don’t have a doctype and that’s why IE appears to work because you are tripping quirks mode and using legacy behaviour. Always use a full doctype or all versions of IE will behave like ie5 and you lose any new features. That’s just a guess by the way as you didn’t provide html :slight_smile: