Help, please! gradient background, repeat-y, weird in IE

Forum Moderators: not2easy

Message Too Old, No Replies

Help, please! gradient background, repeat-y, weird in IE

Other browsers render ok; IE places visible edge at end of gradient image

albo

2:38 pm on Sep 9, 2007 (gmt 0)

I thought it was a color-rendering problem, at first, so I tried it with "web-safe" colors; no help.

I've tried this on <div>, and alternately on <body>. Same result.

I have a small (31px high by 200px wide) gradient image, one edge of which is the same color as the background. I use it on one side of the involved area, e.g. background-position: right top ...then produce edge via background-repeat: repeat-y;

The other browsers behave properly. IE7 places an obvious edge along the image...where it's supposed to flow into the area background.

Is it, simply, my (png) image creation skills?

SixTimesEight

11:27 pm on Sep 9, 2007 (gmt 0)

Does your png contain any transparent areas?

I know that IE6 does not handle png transparency properly. It would fill in any transparent areas with a purplish color. Not sure about IE7 though.

albo

11:44 pm on Sep 9, 2007 (gmt 0)

No transparency whatsoever...the part of the gradient projecting within the div (or body) is precisely the same color as the background-color defined for the area...weird, huh?

In my own website, it is particularly visible because the divs involved are #666, but I got curious and went to a client's website I had written in a similar manner, in a much brigter color (in the neighborhood of #cfc) and though it was bright enough to disguise it to a "casual" glance, one could detect it upon careful inspection...