6 replies [Last post]
snemeis
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-05-23
Posts: 3
Points: 0

Hello and thank you for taking the time to read my post. I'm currently working on an e-shop layout with somewhat of a pretentious design and i really need to use PNGs (transparency) in order to match the design. The problem is that it has to work on ie6 so i use the following technique:

for each div(class) that has PNG background i have two styles:

.header{
width:453px;
height:230px;
background-image:url(img/chick.png);
background-position:center;
z-index:1;
}

*html .header{
width:453px;
height:230px;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/chick.png', sizingMethod='image');
z-index:1;
}

Since the *html selector is only recognized by IE this works just fine and it seems a reasonable solution. The problem is that with this method i'm bound to have (sooner or later) problems with unclickable links in IE (even in ie7).

Does anybody know what causes this? I googled and found some explanations, specifically using a higher z-index for the div that has non-clickable links. This absolutely does not work no matter what kind of position: I set on my div. Also, i found that if i remove the *html .header {} completely the problem is fixed with IE7 but i need that fix for ie6.

Also, if any of you guys or gals have a better solution in using PNGs PLEASE advise. The site has to render perfectly in ie6, ie7 and firefox.

Finally, i have a more general, kind of existential question:

As a designer, if I must target browsers starting from ie6, is it ok to try and use transparency with hacks and stuff or should i just forget it and go on with my life without so much pain and suffering?

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, to tell you i havnt

hi,
to tell you i havnt tried this kinda method yet.. but i found a bit of a problem in ur css.

You have given z-index to both elements, but its "1" to both. and also, when you define z-index you also have to giv the position tag i.e. position:absolute/relative
So you could try giving positions and z-index 1 & 2 to your two codes...

mihir. Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

snemeis
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-05-23
Posts: 3
Points: 0

Thanks for the reply

Thanks for the reply mihirc.

The two styles must have the same z-index since they style the same div for different browsers.

Also, which method have you tried? Did it work okay in ie6?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

mihirc is correct about

mihirc is correct about z-index. It has no effect at all if the element doesn't have position (which will be why it doesn't fix the problem you are having on your page). Giving an element position:relative moves it in front of all other non-positioned elements without any need for z-index. So swap your z-index for position:relative. You will only need z-index as well if the link is being displayed below another positioned element.

Also, you only need two styles in your IE6 style rule.
- reset the background to none.
- the filter statement
IE6 will quite happily pick up the styles in the normal style rule!!!

Your method for overcoming lack of basic support of alpha transparency PNGs is the ONLY method. The "other" methods are bits of javascript that automate conversion of standard HTML+CSS pages with PNGs to use the filter for IE6.

I am surprised at your IE7 problems. Quite possibly it has nothing to do with PNGs but to do with hasLayout. Try adding zoom to major layout elements in your design to see if it corrects the problems.

IE6 is a rapidly declining browser. Check your server logs to see the proportion of visitors using which browsers. In my (limited) checking IE6 is already down below 40% (from 80-90%). I think its quite reasonable to start considering alphatransparency in your web pages. However, there is no need to force it. Try to use gifs first, convince the designer not to have image overvlays that vary in different directions. After all, one year ago you had no real choice but to use one of the above methods. If neither of the above works then use alpha transparency. Have a fall back for IE6. First choice fall-back should probably still be gifs and a slightly degraded web page. If the designer/client is willing to pay for your extra time to handle all of this - go for it Smile

snemeis
Offline
newbie
Last seen: 13 years 22 weeks ago
Joined: 2007-05-23
Posts: 3
Points: 0

FIXED. Thanks a lot

FIXED. Thanks a lot everyone.

In case someone else has trouble with this issue here is how i've done it and works great.

for every div that has PNG alpha transparency there are two styles:

.style {
width:100px;
height:100px;
background-image:url(pic.png);
}

*html .style{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic.png', sizingMethod='image');
}

i was having trouble with unclickable links in ie7 and ie6 so i created one more div for content which brings the elemnts in front (thanks Chris)

.style_content{ position:realtive; }

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

realtive?

realtive?

Laughing out loud

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, did you try directly

hi,
did you try directly giving the position:relative tag. I really didnt understand why you would have to another div to it.

mihir. Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com