3 replies [Last post]
Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 7 years 8 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

Hello,

I've been trying to get my head around a strange problem that IE 7 has with semi-transparent png backgrounds.

If you look at this link in IE 7 (WinXP) http://radutanasescu.ro/work/sun/ you'll notice that only a part of the footer's background is transparent. The rest is opaque. And if you scroll up and you'll notice that the transparent area moves to the top, while the bottom side becomes opaque.

The entire footer has the exact same background. A semi transparent png tile of 128x128 pixels set to "repeat".

It's the same background tile used on the header, and it's actually the same class:

.light-pattern {
background: url("../images/tile-bkg-pattern-white.png");
z-index: 1;
}

Anyone know why this is happening?

The same background issue seams to be happening on another page. This time the background doesn't loose it's transparency. It vanishes altogether:
http://radutanasescu.ro/work/sun/magazine-listing.html

Scrolling up and down, just like in the case of the footer on the homepage, changes the size of the missing background area.

In the past I simply replace various properties of the divs that have this issue until the problem disappears. I simply try to change everything in a tedious trial and error process that never really helped me figure out why this happens.

I don't use any ms filters or anything like that.

Thanks for the help!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try adding a width

Could be a hasLayout issue and adding a width will trigger it. Also, if you're going to be put z-index on .light-pattern, you need position:relative as well; z-index won't work without position: aboslute/relative.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 7 years 8 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

Thank you, I'll try to add

Thank you, I'll try to add zoom:1 (just for IE) to see what happens and I will remove the z-index, without positioning it doesn't do anything and I can't remember why I put it there in the first place Smile

Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 7 years 8 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

It worked. Setting zoom: 1 on

It worked. Setting zoom: 1 on all divs fixes everything. Not just the transparency bug, it also fixez a strange behaviour of floated divs where paddings went crazy.

I took down the website from my domain. I'm sorry about that, I would have left it there to help other with similar problems but I might get sued because the project is not yet official Smile

Thank you so much!