CODEWITHSUNDEEP
cssinternet-explorer-8background
Mary Camacho
Mary Camacho

Reputation: 470

CSS Background-image on a-tag not displaying in IE8

I have researched this and found some IE CSS bugs, but none of the known fixes seem to cover this scenario.

This site went live today and the issue that was found is that the logo does not display in SOME versions of IE8. If the person resets IE to factory settings it works, but otherwise the logo is invisible.

Site can be seen here: http://www.ethicsgame.com/exec/site/index.html

CSS to display the logo is

h1 a {

background:url(images/logosmall.gif) no-repeat left center;
padding-left:325px;
text-decoration:none;
color:#1f396d;
position:relative;
top:45px;
left:15px;
width: 325px;

}

Upvotes: 1

Views: 3502

Answers (5)

John
John

Reputation: 1

ie8 doesn't support background image position, in your case "left center". If you remove "center left" it should work. You might be able to specify background image position if you specify !DOCTYPE

Upvotes: 0

PHP Ferrari
PHP Ferrari

Reputation: 15666

It works perfectly alright on IE8 but if does not show earlier versions of IE then replace center with left in background attribute.

background:url(images/logosmall.gif) no-repeat center left;

Upvotes: 0

justbeez
justbeez

Reputation: 1387

Mary,

This has to do with the fact that A tags are inline elements. in IE < 8, the height/width of the element isn't getting rendered--so it's collapsing and becoming invisible. Adding display: block; into your CSS declaration for this element will fix this in IE < 8. You'll want to apply this same principle to other inline elements that you're trying to get to behave more like block-level elements (setting width/height/margin/padding is usually a good hint on this behavior).

If you don't need to support IE 5.5 (which most people don't nowadays), you can also use display: inline-block; (keep in mind that IE 6-7 only support inline-block on elements that are natually inline elements, such as A, SPAN, STRONG, EM, etc.). You can find much helpful compatibility information here: http://quirksmode.org/css/display.html

You'll probbaly also notice that once you change that display type, the padding which isn't being rendered will be--so you might need to change that markup a bit to compensate.

Using the Developer Toolbar in IE is a great way to test old versions, as well as test these solutions in the older versions.

Upvotes: 0

PREEB
PREEB

Reputation: 1362

Looks like a difference in spacing with IE8 vs Chrome. Check it out in the fiddle: http://jsfiddle.net/5Vt3f/.

Basically your image is probably displaying, just too far to the left that it's not visible.

Also, you have "left" and "center" on the image. This is conflicting. It's either left or center.

Upvotes: 0

ckozl
ckozl

Reputation: 6761

it seems to be working fine on my IE8, have your tried adding display: inline-block to its css? Also, for good measure you could throw a &nbsp; inside the a tag.

so you get:

<h1><a href="index.html">&nbsp;</a></h1>

just so it has content...

good luck -ck

Upvotes: 2

Related Questions