Welcome to WebmasterWorld Guest from

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

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

Preferred Member

10+ Year Member

joined:Feb 14, 2005
posts: 475
votes: 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?

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

Junior Member

10+ Year Member

joined:June 20, 2007
posts: 42
votes: 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.

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

Preferred Member

10+ Year Member

joined:Feb 14, 2005
votes: 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...


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members