ASP.NET MVC Html.ActionLink CSS Background Image

Question

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

Steve Perks · Accepted Answer · 2009-04-28 15:22:10Z

1

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

answered Apr 28, 2009 at 15:22

Steve Perks

5,5324 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nickmorss · Accepted Answer · 2009-04-28 15:17:11Z

0

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

answered Apr 28, 2009 at 15:17

nickmorss

6211 gold badge6 silver badges10 bronze badges

1 Comment

andyJ Over a year ago

correct it was the display:inline-table, changed to display:block and back in business. Cheers

Collectives™ on Stack Overflow

ASP.NET MVC Html.ActionLink CSS Background Image

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related