35

I have a weird error. I'm tiling a semi-transparent 1x1 pixel yellow PNG image in a DIV that overlays some text. With normal browsers, everything looks like it should. There's some text and a yellow, semi-transparent overlay above it.

This is how it looks in Chrome

In Internet Explorer 8 however, instead of tiling the 1x1 PNG image, a gradient (!) is displayed.

This is how it looks in Internet Explorer 8

The CSS is rather simple:

.edit_section_overlay {
  position: absolute;
  z-index: 150;

  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;

  border: 1px solid #afad9d;
  background: url('../../images/content/edit/section/overlay/background-color.png') repeat;

  min-height: 34px;
  cursor: move;
}

I've never seen a bug like this before and Google doesn't help me…

Here's a demo in jsFiddle, http://jsfiddle.net/jUVfS/

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Lukas
  • 9,752
  • 15
  • 76
  • 120
  • 1
    Can you give us a link to a demo site? And why do you use a semi-transparent background *image* instead of a semi-transparent background *color* in the first place? – phihag Oct 14 '11 at 08:15
  • 100% sure you're not using any IE specific css? Very strange effect – Alex Oct 14 '11 at 08:26
  • 1
    @phihag Here's a demo on JSFiddle: http://jsfiddle.net/jUVfS/ (I'm using IE8.0.7600.16385) – Lukas Oct 14 '11 at 08:45
  • @Alex Absolutely no IE-Specific stuff, check out the JSFiddle: http://jsfiddle.net/jUVfS/ – Lukas Oct 14 '11 at 08:46

1 Answers1

115

Your .png image needs to have larger dimensions, at minimum 1x2 instead of 1x1.

See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/

Internet Explorer 8 doesn't perform the repeat of a 1x1 pixel semi-transparent background image correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency.

thirtydot
  • 224,678
  • 48
  • 389
  • 349