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. An alpha-blended PNG will not blend at all, and you’re left with a horrible grey background where your nice blending and/or transparency should be. To work around this, most sites will use the AlphaImageLoader filter from DirectX to show the image instead. Instead of using a PNG directly (either through a background image or an <img> tag), one uses a DirectX filter to show the same image with proper blending. There’s a few issues with it — it’s not really an image for one — but they’re mostly easy to work around. The one big problem with this method, though, is that it if a link is placed over top one of these filters, alan adı sorgulama, web tasarım, masaj salonu, plaka sprgulama, kızlık zarı, altın fiyatları, telefon sorgulama it often won’t work. That’s not to say it always won’t work, but it often won’t. Depending on the styles of the elements and even the size of the image sent in to the filter, it might work.

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(...);
}

That may sound like a problem solved, but all is not as it may appear botoks. Firstly, as you may realise, there’s no CSS property called filter in the W3C CSS spec. It’s a proprietary extension added by Microsoft that could potentially cause other browsers to reject your entire CSS rule.
Secondly, AlphaImageLoader does not magically add full PNG transparency support so that a PNG in the page will just start working kepçe kulak. Instead, when applied to an element in the page, it draws a new rendering surface in the same space that element occupies and loads a PNG into it. If that sounds weird, it’s because that’s precisely what it is. However, by and large the result is that PNGs with an alpha channel can be accommodated meme küçültme.

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