CODEWITHSUNDEEP
internet-explorer-8css-spritesfirefox-12
MiBerG
MiBerG

Reputation: 35

CSS Sprites work in FF12 but not IE8

This HTML-Code...

<a href="LINK" class="testclass"></a>

...works with this CCS-Code...

  a.testclass
  {
    background: transparent url(sprite.png) no-repeat -125px -671px;  
    display: block;
    width: 378px;
    height: 150px;
  }

...in Firefox 12 but not in Internet Explorer 8.

The code is inspired by this question regarding anchors, sprites and CSS. I've found a similar questions, but since this code is placed within a rather complex Drupal installation, I still hope that there's an easier way to fix this issue than going through the code to find some "absolutely positioned outer div and some menu styles", which had been responsible for the issue in 2.

Thanks for your help.

Edit-1:

This is the Firebug HTML-Log:

<div id="banner-area">
  <div id="banner-left">
    <div class="region region-banner-left">
      <div>
        <a href="LINK">
          <img width="378" height="150" alt="ALTTEXT" src="IMAGE.GIF">
        </a>
      </div>
    </div>
  </div>
  <div id="banner-right">
    <div class="region region-banner-right">
      <p>
        <a class="testclass" href="LINK"></a>
      </p>
    </div>
  </div>
</div>

The referenced CSS-Code is:

#banner-area {
    width:756px;
    margin:0;
    padding:0;
    overflow:hidden;
}

#banner-left {
    width:378px;
    float:left;
    margin:0;
    padding:0;
}

#banner-right {
    width:378px;
    float:right;
    margin:0;
    padding:0;  
}

The first picture (IMAGE.GIF) is shown in FF and IE8. The second hoever, the one i'd like to replace with a sprite, is only shown in FF but not in IE8.

I've turned transparency on and off as Florian suggested, but to no effect. I've reduced the image size by 10px in width and height, but that didn't help either.

Upvotes: 1

Views: 1688

Answers (2)

MiBerG
MiBerG

Reputation: 35

After two days of wasted time I've found out that IE8 doesn't import more than 31 css-files: http://drupal.org/node/228818?page=1

After enabling the "optimize css-files"-feature again in the Drupal administration panel of my installation, which I had turned off so it doesn't interfere with my development, everything worked fine.

Upvotes: 1

Florian Rappl
Florian Rappl

Reputation: 3189

This question is related: IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)

so change your code to:

a.testclass
{
  background: url(sprite.png) no-repeat -125px -671px;
  display: block;
  width: 378px;
  height: 150px;
}

if you really need to erase that background-color (and therefore setting it to transparent) try other settings like

a.testclass
{
  background-color: transparent;
}

However, IE8 does not like that so be aware to have some fix included for IE8.

Upvotes: 0

Related Questions