CODEWITHSUNDEEP
htmlcssinternet-explorer-6
SirMoreno
SirMoreno

Reputation: 1107

IE6: span (inline) with background-image

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

Upvotes: 2

Views: 7822

Answers (8)

paulslater19
paulslater19

Reputation: 5917

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 }

Upvotes: 0

Mitchell
Mitchell

Reputation: 241

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;
}

Upvotes: 0

Ballsacian1
Ballsacian1

Reputation: 17324

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.

Upvotes: 1

SirMoreno
SirMoreno

Reputation: 1107

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;}

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388326

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;
}

Upvotes: 0

kkyy
kkyy

Reputation: 12450

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

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

(Note that there is an extra space in the &nbsp; 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; }

Upvotes: 2

Anthony
Anthony

Reputation: 37065

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>

Upvotes: 0

ullmark
ullmark

Reputation: 2479

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.

Upvotes: 0

Related Questions