Internet Explorer 8 shows gradient instead of background image

Question

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.

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

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/

Answer 1

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.