Home/ Questions/Q 3345580
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T01:12:09+00:00

I have a 1px by 1px grey pixel. It is used as a BG

  • 0

I have a 1px by 1px grey pixel. It is used as a BG image:

background-attachment:scroll;
background-color:transparent;
background-image:url("../image/vertical-border.png");
background-position:393px 0;
background-repeat:repeat-y;

So I expect a grey, vertical line the height of whatever is tallest in the div. Common trick.

So I see this properly in every browser EXCEPT IE 8. In IE 8 it displays as a gradient. Dark up top, light down below. How crazy is that? I’ve never seen anything like this, and would love some insight.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Unfortunately this is a PNG rendering bug (surprise surprise), in most cases people increase the size of the tiled PNG image to say, 10×10 and the problem is removed. Hopefully this is ok for you – perhaps use a 1×10, or even better a 1×50…

    A partial explanation, from memory, was the amount of processing required by IE to apply its filtering to 1×1 images, when you multiply it by the number of times it appears on the screen – its just too hardcore for IE.

    See: IE8's rendering of transparent pngs is FUBARed on my site, and related posts/comments.

    EDIT:
    Hey, since it’s just a vertical line, is it possible to just use GIF format instead? Or perhaps 8-bit, non alpha transparent PNG?

    • 0