CODEWITHSUNDEEP
cssfirefox
Chirag Khatsuriya
Chirag Khatsuriya

Reputation: 635

CSS is not apply in Firefox

In Chrome and other browsers this works fine, but in Firefox it's not. In firefox it's show me "Edit" text and Image also. I just want to show Edit image.

HTML Code

<td align="center">
<a id="lnkEdit" class="RemoveDecoration" href="javascript:__doPostBack('lnkEdit','')">
<img id="imgEdit" class="EditImage" style="border-style:None;" alt="Edit" src="">
</a>
</td>

My CSS:

.EditImage a{
    background-image:url(../Images/Edit.png) ;
    background-repeat:no-repeat;
    height:14px;
    width:13px;
    background-position:-20px -3px;
    border:none;
     }  .EditImage:hover {
    background-image:url(../Images/Edit.png) ;
    background-repeat:no-repeat;
    height:14px;
    width:14px;
    background-position  : -2px -2px;
    border:none;
     }

See Image:

enter image description here

Upvotes: 1

Views: 74

Answers (1)

Bgi
Bgi

Reputation: 2494

It is showing "Edit" because the src="" attribute of the image tag is empty. So it shows the alternate (alt=) text.

The background-image is litterally in the background, so the

Bad empty src=""

<img id="imgEdit" class="EditImage" style="border-style:None;" alt="Edit" src="">

do that instead:

<img id="imgEdit" class="EditImage" style="border-style:None;" alt="Edit" src="../Images/Edit.png">

and remove the background-image attribute in the CSS

Upvotes: 1

Related Questions