Help Resolve Problem With Absolute Positioning Nested Inside Relative

Discussion in 'CSS' started by johnywhy, Mar 11, 2010.

0
  1. #1
    Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)?

    The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON.

    How can I adjust my CSS so both versions work?

    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="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>
    Code (markup):
    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="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
</a>
    Code (markup):
    THANKS
     
    johnywhy, Mar 11, 2010 IP