Transparent .png overtop of a link. Not clickable in IE7…
Posted: 16 October 2009 11:55 AM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2009-10-16

I have 2 divs - one above the other on a page.

<div id="div1"></div>
<
div id="div2"></div>

Div1 contains some content with links.
Div2 has a CSS background that is a partially transparent .png file (png-24).
I used a negative margin-top on div2 so that they would overlap a little bit. This was a requirement of the design I am following.

Essentially, the png on div2 is OVERTOP of the links in Dev1. However - these links are clickable in FF3, IE8, Safari4 because of the transparancy. IE7 is the only browser that seems to have a problem. Any ideas or guidance? I could not find anything on Google about this.

Image Attachments
2009-10-16_1247_001.jpg
Profile
 
 
Posted: 08 December 2009 01:38 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  17
Joined  2009-12-07

They do not support it, thats all :P Transparency in IE7 and below does not work as people would expect. Why would you have links, then another div ontop for clicking? Use a background image (using css) on the first div where the links are.

EDIT: Try also using Z-INDEX and set the div with the links on a higher z-index then the div with the image if you decide to stick with your way.

Profile
 
 
Posted: 02 May 2010 10:12 AM   [ Ignore ]   [ # 2 ]
Sr. Member
RankRankRankRank
Total Posts:  133
Joined  2010-04-23

Try nesting the divs or as suggested the z-index to make the div with the links come to the front.
____________________
sudoku - social - puppies

Profile
 
 
Posted: 26 October 2010 04:56 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  1
Joined  2010-10-26

This is an annoying subject. One reason is not one listens to the problem and the other is that no one seems to understand the question.
Fact is that you cannot click a link under a transparent png. Try it people instead of making dumb assumptions. It doesnt seem to work with any browser. Everyone keeps getting stuck on IE. NO BROWSER lets you click a link under a transparent png. You’d think this could get fixed. Mind bending teh guy what answered “why would you do it” Clearly not a web designer. If you do IRS forms, yes you probably would not do it. But if you do anything creative, it happens frequently.

Now to the real question, is there a way to click a link under a transparent png? Any fixes by any of the browsers? Any tricks by anyone who knows what we are talking about?

(it surprised me to hear people saying they could not click a link on top of a transparent png, I’ve never seen that)

Forget IE, what about any other browser?

ALSO, z-index WILL NOT WORK. So please don’t tell people that. Experiment look and see whats going on.

Profile
 
 
Posted: 21 December 2010 10:22 AM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  3
Joined  2010-12-21

Just nesting the divs won’t work i guess

Profile
 
 
Posted: 20 February 2011 03:15 PM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  23
Joined  2011-01-06

It’s long been known that IE6’s support for alpha-blended PNGs is non-existent.

Profile
 
 
Posted: 23 February 2011 04:43 PM   [ Ignore ]   [ # 6 ]
Jr. Member
RankRank
Total Posts:  44
Joined  2010-10-13

img {
filter
progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

Profile
 
 
Posted: 08 March 2011 02:27 AM   [ Ignore ]   [ # 7 ]
Sr. Member
RankRankRankRank
Total Posts:  133
Joined  2010-04-23

You best bet is to use one div and make all offsets off of the one div.
_____________________________
Sudoku - Flash Game - Flash Game
Flash Game - xnxx - Flash Game

Profile