Help Resolve Problem With Absolute Positioning Nested Inside Relative

you have not told us what you're trying to achieve. Is this a menu with hover states? If so, this should be structured as a UL list.

And you should be using forward slashes not back slashes

this is not a menu or unordered list.

if you load the "good version" into a browser, you'll see an image, which, on mouseover, becomes transparent, revealing another image. The images are surrounded by a link tag.

(the backslashes were correct, when using images on the local hard-drive.)

guy, we cant see your "local" images. Why dont you just provide a link instead of making us jump thru hoops?

sorry 'bout that, my bad, here are versions with web-urls, no hoops.

GOOD VERSION

<style> 
a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute;  }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; } 
a.IMAGEBUTTON img {width:150px; }
</style> 
 
<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="http://bit.ly/afX0nB" /> 
<img class="BOTTOMIMAGE" src="http://bit.ly/aH6fET" /> 
</a>
 
<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="http://bit.ly/afX0nB" /> 
<img class="BOTTOMIMAGE" src="http://bit.ly/aH6fET" /> 
</a>

BAD VERSION

<style> 
a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute;  }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; } 
a.IMAGEBUTTON img {width:150px; }
</style> 
 
<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="http://bit.ly/afX0nB" /> 
<img class="BOTTOMIMAGE" src="http://bit.ly/aH6fET" /> 
</a>
 
<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="BOTTOMIMAGE" src="http://bit.ly/aH6fET" /> 
<img class="TOPIMAGE" src="http://bit.ly/afX0nB" /> 
</a>

two changes fixed it, except for a sporadic problem mentioned below.

the two fixes were:
--add position:relative to a.IMAGEBUTTON
--add left:0px to the top image

Quote:
Originally Posted by thecaligarmo
Did you add position:relative to a.IMAGEBUTTON?

-yes, that helped. But i thought relative is the default setting, so why does it have to be explicit?

Quote:
if you want the top image to be above the bottom image make sure that it has a z-index greater than 1.

-i read that 0 is the lowest z-index. z-index of 1 seems to work fine.

Quote:
add top:0px, left:0px to the top image

-left:0px alone seems to do the trick.

the sporadic problem is that the same html does not render consistently without changing anything (see below)--sometimes, the top of the top image is too high, exposing some (not all) of the bottom image. But if i hover, or refresh, or just switch to another window and switch back again, then it displays properly. Seems like it might be related to caching. How can i fix that?

Bad Render:

lh4.ggpht.com/_yJ0zKAWYfxo/S5reI5gaKiI/AAAAAAAAALU/CdqBScKb_xQ/badcss.png

Setting top:0px on the top image caused it to render incorrectly, such that it's top edge is touching the bottom edge of the bottom image, instead of on top of it. see below:

lh5.ggpht.com/_yJ0zKAWYfxo/S5riEgjE0pI/AAAAAAAAALc/-iJ9qnRqXL0/with%20top%200.png

Quote:
add position:relative and z-index:1 to the bottom image just so in the future you know whats happening.

-that's good form, but technically should be unnecessary, right?

I don't see a height for the a tag, or the image. Maybe look into that?

getting closer, maybe. the following works perfectly for one button, but with multiple buttons, does not render right.

in this version, both top and bottom images are absolutely positioned, which makes them line up with each other perfectly.

but the bottom image needs to be relative, so that multiple buttons render side-by-side. or else the whole thing needs to be contained within some kind of relative element. surrounding it with a relative 'span' does not help.

i want the whole object (both images) contained within the 'a' tag to render as a single, relatively-positioned element.

height and width attributes on the 'a' element seem to have no effect.

 
a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute; left:0; }
a.IMAGEBUTTON img.BOTTOMIMAGE { z-index:0;  position:absolute; left:0; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; } 
a.IMAGEBUTTON {position:relative; width:150px; height:100px; }
 

<a class="IMAGEBUTTON" href="http://google.com" rel="nofollow"> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
</a>

<a class="IMAGEBUTTON" href="http://google.com" rel="nofollow"> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
</a>