I’m curious to know if it is possible to have one div below another (same size). The lower Div has an image in it that is a link. The div on top has a translucent image (a color tint) that is not a link. Is it possible to us CSS display:none; or visibility: hidden; (I tried both properties and both work the same) property to remove the higher div with rollover and be able to click the link in the bottom div?
Note that this won’t work in IE6, as it doesn’t support :hover on anything other than anchors (links). Also, don’t forget the alt text for images. Alternatively, you could simply use that image as a background on the “info” DIV, and make things a bit neater and simpler.
Not sure where the paragraph is supposed to appear, but it’ll be hidden by the boxes (as it is now).
Is there a way to do this just backwards? This method looks great, however I need the my image that has a translucency to be the same on every page on these divs with a different image behind it. So basically I need the background image to overlap the actual image…therefore needing two divs, one over the top.
Do you know of a better method to accomplish this?
Your method seems to be working. I’m still tinkering with it.
As far as putting position: relative on my <a> it didn’t work. I think I’m doing it wrong cuz I’m a bit lost.
I haven’t looked at your page but if adding position:relative still doesn’t allow you to click the links in IE6 then you have no choice but to add an intermediate element to hold the transparent png.
This means that your original element can be the positioned element and you nest an element inside this and apply the transparent png as a background to that element instead. This new element has no position:relative or position absolute applied but of course should have a height and width to match the png image.
This is a common problem with pngs in IE6 and the only optimal solution.
Ok well right now I have my originaly Div at the lowest z-index and that is the <a href>. Then I have the same size div with the same elements at a higher z-index with my .png as the background. When I hover over that div, it disappears and allows me to select the link. However in IE6 the background div doesn’t disappear. So it doesn’t allow me to click the link.
I added Position: relative to the <a href> but didn’t work. Are you saying I should have one div that is the parent and has my linked image in it, then next a child div that holds my png background inside the parent div and not have any position applied to that?
I just want to make sure I’m understanding this correctly?
Paul is saying you have an element with a png background that has a position:relative or absolute.
You need to create an element inside that nad place the image on that element instead. Make sure it doesn’t have position:relative; or absolute (basically ths is another wrapping div. The extra element is needed unfortunately :()
Basically the divs called: greentint, bluetint, orangetint, & yellowtint are inside the parent div called: tintbox1…2,3&4. In my CSS I have position:absolut; applied to the tintbox divs not the "color"tint divs. This is what I have and IE6 still doesn’t work.
What am I missing? I think I’m just confusing myself more and more.