IE6: span (inline) with background-image

Question

I'm trying to find a good why to display my Icons.

I want to use a CSS and not an img tab.

My code:

<span id="Span1" class="iconPrinter"></span>

.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 8px;}

or

.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; width:16px;}

It works fine on FF but on IE6 I can't see the Icons, only if I insert a span in the span.

When I use a div or display:block; it work fine, but I need it to be inline.

Thanks

Answer 1

The simplest way I found to insert an inline tag like span what will work with IE6 is:

(for 16px icon)

<span id="Span1" class="iconPrinter">&nbsp;</span>

.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}

Answer 2

IE6 probably won't show the inline element with padding if it has no content. Try adding   into the span;

<span id="Span1" class="iconPrinter">& nbsp;</span>

(Note that there is an extra space in the   as the code coloring mangles it otherwise )

On the other hand, in order to give the span a width, you could also try using

.iconPrinter { display: inline-block; }

Answer 3

In order to get around FF2 issues with inline-block I found a suggestion online which worked for my setup. Now for my setup I have a text which also has padding-left and a background-image set to the left side of the text. I needed the whole span to fire an event when clicked, which just wasn't happening when I used display block in IE6 or IE7.

I came here and it was suggested to use inline-block which fixed my issues, but left me with FF2 compatibility issues. I then found this solution.

display: -moz-inline-box; display: inline-block;

Having both display calls doesn't seem to have any adverse effects in any of the browsers I tested IE6,7,8, FF2, 3.

Answer 4

What is your purpose with the icons? Do you just want to show the icons, why not use the "img"-tagg. If you should be able to click them wrap them in an "a"-tagg.

ie6 has a bug with vertical-padding on inline elements. You could also use divs and float them.

Answer 5

What is inside of the span? Anything?

Try adding:

#iconPrinter{
    background:url(../images/BWIcons.gif) no-repeat 0 0; 
    padding: 8px;
    text-indent: -100000px;
    overflow: hidden;
}

And if the span is just there for the icon, add some kind of html special character. This may force IE to acknowledge that something is there, and it's more accessible for those without CSS or with screen readers, something like:

<span id="iconPrinter">&#9113;</span>

Answer 6

Try to give css height to the span class. Something like

.iconPrinter{
    background:url(../images/BWIcons.gif) 
    no-repeat 0 0; 
    width:16px;
    height: 16px;
}

Answer 7

I realize this is an older post, but I came across this question while searching and thought that this might help others. I was using CSS background images for links and also had trouble with IE6 and IE7.

Here's the HTML:

<a href="edit_admin.php" class="icon-edit" title="Edit Admin">Edit Admin</a>
<a href="delete_admin.php" class="icon-delete" title="Delete Admin">Delete Admin</a>

Here's my css for browsers other than IE6 and IE7.

.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
height: 16px;
width: 16px;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 0px;
float: none;
display: -moz-inline-box;   /* For FF 2 */
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}

Here's the additional css that I conditionally add only for IE6 and IE7:

.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}

Answer 8

Use padding and add a zoom: 1 in your css class

<span id="Span1" class="iconPrinter"></span>

.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }