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!

Alex Mcp
  • 19,037
  • 12
  • 60
  • 93

2 Answers2

2

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

A partial explanation, from memory, was the amount of processing required by IE to apply its filtering to 1x1 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?

Community
  • 1
  • 1
danjah
  • 2,939
  • 2
  • 30
  • 47
  • Changing to the 1px by 10px PNG made this work swimmingly. What a strange problem to have had... Thanks! – Alex Mcp Nov 11 '10 at 00:39
0

If it's just a 1px grey border you're after, why not just use a 1px grey border?

Example:

border-right: 1px solid #cccccc;
DaveShaw
  • 52,123
  • 16
  • 112
  • 141
one giant media
  • 1
  • 1