ASP.NET MVC Html.ActionLink CSS Background Image

Question

Hi,

I have been trying to set an image on an HTML.ActionLink by adding a CSS class for a link (a) and using the background-image to display the link as an image. This works great in all browsers but IE 6 and IE7. I need to get it working in these browsers, but can not figure it out. Any ideas???

a.edit 
{
    background-image: url("../Images/Buttons/edit.png");
    background-position: top left;
    background-repeat: no-repeat;
    width:49px;
    height:22px;
    display: inline-table;
    text-decoration:none;
    clear:none;
}

a:hover.edit 
{
    background-image: url("../Images/Buttons/editOn.png");
    background-position: top left;
    background-repeat: no-repeat;
}

And the link with the edit CSS class

<%= Ajax.ActionLink(" ", "EditClaim", "Driver", new { claimId = item.Id }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "claim", OnSuccess="showAddClaim", OnComplete = "updateClaim"}, new { @class = "edit" })%>

I would be very grateful, If anyone could help me solve this. I have spent ages trying to solve this one!

Thanks

Answer 1

couple thoughts...

is the class name acctually changing? check this by adding a border to the new class or another style to see it working. adding the border may in fact make it work, so then maybe you can make this border the same color as the background (preferably do this in a conditional stylesheet)

then im wondering about the display:inline-table ... why this, have you tried display:block;

finally, its probbaly some kind of hasLayout issue, try reading this article

http://www.satzansatz.de/cssd/onhavinglayout.html

Answer 2

it's a.edit:hover, not a:hover.edit