Background CSS image not shown only in IE7

Question

html:

<div class="choose-os"> <p> <a href="someLink" class="windows">Microsoft Windows</a> <a href="someOtherLink" class="macos">Apple Mac OS</a> </p> </div> 

CSS:

 .choose-os { margin: 20px 0; padding: 20px; background: #e7eefa; } .choose-os p { margin: 0; } .choose-os pa { display: inline-block; text-indent: -100000px; height: 56px; width: 308px; } .choose-os p a.windows { background: url(../images/button-windows-bg.png) 0 0; } .choose-os p a.macos { background: url(../images/button-macos-bg.png) 0 0; } .choose-os pa:hover { background-position: 0 -56px; } 

Any suggestions would be greatly appreciated that the background image is also displayed on IE7.

Answer 1

text-indent: -100000px; combined with inline-block , this is what causes two elements to not be visible in IE7 due to an error.

You need to find another way to hide text for IE7 (or not use inline-block , see below for this more suitable fix).

Parameters include the method in the @Sotiris comment or:

 .choose-os pa { display: inline-block; height: 56px; width: 308px; text-indent: -100000px; /* for ie7 */ *text-indent: 0; *font-size: 0; *line-height: 0 } 

Uses *property: value hack several times to hide text in IE7.

---

The problem seems to be related to using display: inline-block .

So, another workaround (which I prefer to my previous one):

 .choose-os { margin: 20px 0; padding: 20px; background: #e7eefa; overflow: hidden } .choose-os pa { float: left; margin-right: 4px; text-indent: -100000px; height: 56px; width: 308px; } 

Answer 2

To display inline-block correctly in IE7, add the following styles to .choose-os pa

 zoom:1 *display:inline 

(The star is important! It is ignored by modern browsers, but not IE6 / 7)

IE7 does not respect the built-in block, so you need to do a little magic to make it work. There is a great description here: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

[edit] If text indentation is also part of the culprit, you can better stick to display:block and set float:left to your elements. Probably several valid paths: 1)

Answer 3

IE7 has some serious limitations in CSS. I would recommend avoiding shorthand notation and declare each property explicitly, and then check the CSS sheet here .