hidden background image in IE

Question

I have an edit button which appears on the page when users have access to edit. I've implemented it as a link:

<a class='editlink' href='edit.html'></a>

My corresponding css renders the editlink class as a pencil icon:

.editlink{
 background-image: url(../img/pencil.png);
 background-repeat:no-repeat;
 padding: 2px 8px;
}

This works fine in Firefox, but doesn't appear at all in IE. If I put an & nbsp; inside the <a> tag then it shows the pencil, but I was hoping to keep the tag empty. Is there a modification I can make to the CSS to fix this?

Answer 1

It's actually quite a common problem in IE. Even table cells with no content fail to actually render or appear in the document. It's very normal. My advice to you would be to keep the space in there or to make the link "display:block;" and then use width and height to make it bigger or smaller. This has it's own problems associated with positioning, as it will no longer be an inline element.

One solid alternative would be to take the link and do the following to it:

<a class='editlink' href='edit.html'><img src="img/pencil.png"></a>

This would ensure it stretches the anchor correctly in all browsers.

Answer 2

You can set a width and a height on the link in your stylesheet. This renders correctly in FF, IE, and Chrome:

.editlink{
 background-image: url(../img/pencil.png);
 background-repeat:no-repeat;
 padding: 2px 8px;
 width: 10px;
 height: 20px;
}

Answer 3

This is a bug again related to the hasLayout property in IE.

Try adding

zoom:1;

to your style and it should work fine.