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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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?
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.  

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.