Bizzare affect when setting png to repeat in IE7.


I am using a series of 1px by 1px transparent PNG images as backgrounds to DIVs on my website. This gives the intended affect (one large evenly transparent window) on most browsers. However, when i view it on IE7, it appears to get progressively more opaque the further it gets from the top left hand corenr of the DIV.

To see what I mean please view this link and navigate through pages.

Any ideas on how to remidy this would be greatly apprecited.

LVL 12
Dean OBrienAsked:
Who is Participating?
You may want to make your png's a little larger than 1px X 1px.  Say maybe 10px X 10px.  
See if that helps remedy the problem.  
So far so good in IE8. But to be frank, I cannot find the png's you are talking about. Not in the HTML, nor in the CSS.

Can you post a screenshot of your experience with IE7?
Hi easynow11,
IE shouldn't be acting in such a way and also it might not make sense that opacity changes through x-y, since I've never heard of such attitude.

I believe it might have something to do with the background images and the degree of your transparency, maybe IE is not displaying the exact transparency level like the other browsers you're trying, which still shouldn't be the case.

I've viewed the site in IE7, IE8, FF and they all seem to be ok in terms of the png background.
On some pages the effect might seem o cease towards some edges but that's due to the background image not having contrast/different patterns in such a section.

Try reducing to slightly reduce the opacity to get it more apparent, one would rarely notice the transparency if you didn't mention though, this should also let you check if it was behaving correctly or not.

I've attached a screen capture for IE which works well
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Dean OBrienAuthor Commented:
Thanks for all the comments.

I tried again on a different machine running IE7 and i couldnt reproduce the problem. Turns out the first problematic machine was running XP 64bit - this could be the poblem.

Juamez - the png is defined in a class at the top of the css {i.e. lightblue {....background-image:url('..)}.

remorina - i tried reducing the opacity and it had no affect.

LZ1 - The larger 10x10 image appears to have solved the problem....

I have attached a screen grab of the weird affect if your interested.

The only problem with transparant png's in IE is that IE can't handle a size of 1x1. Just change it to 1x2 and everything works fine. The 1px height always (really always) gives problems in IE. Make the height 2px and all problems in all browsers are gone. I had this with websites of my own as well :)
Glad you solved it.  I know sometimes when making transparent images, smaller is not always better.  A few extra pixels won't make the image that much larger and will often solve this type of issue.
Dean OBrienAuthor Commented:
Thanks for the help people.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.