Position Problem im IE7, Firefox und IE8 funktioniert

[christof11]

Hallo,

ich habe ein Problem.


Ich habe 2x2 Bilder die per mouseover ausgeblendet werden sollen und anstelle der 4 Bilder ein Bild eingeblendet werden soll...
Das wird über die visibility gelöst...

Im Firefox und IE8 funktioniert es.

Im IE7 nicht, niedrigere konnte ich leider nicht testen...


Hier der Code:
CSS

.allpics {width:250px; height:188px; z-index:6; position:absolute;}
.bild1 {width:125px; height:94px; float:left; z-index:5; position:relative;}
.bild1g {width:250px; height:188px; z-index:8; visibility:hidden; position:absolute; border:solid 2px #000;}
.bild2 {width:125px; height:94px; float:left; z-index:5; position:relative;}
.bild2g {width:250px; height:188px; z-index:8; visibility:hidden; position:absolute; border:solid 2px #000;}
.bild3 {width:125px; height:94px; float:left; z-index:5; position:relative;}
.bild3g {width:250px; height:188px; z-index:8; visibility:hidden; position:absolute; border:solid 2px #000;}
.bild4 {width:125px; height:94px; float:left; z-index:5; position:relative;}
.bild4g {width:250px; height:188px; z-index:8; visibility:visible; position:absolute; border:solid 2px #000;}

HTML

        <div class="allpics" id="allpics">
        <div class="bild1g" id="bild1g"><a href="level1.htm" title="Gleitringdichtungen"><img src='gleitringdichtungen-1.png' border='0' onmouseout='javacript:verstecke1()' /></a></div>
        <div class="bild2g" id="bild2g"><a href="level1.htm" title="Gleitringdichtungen"><img src='gleitringdichtungen-2.png' border='0' onmouseout='javacript:verstecke2()' /></a></div>
        <div class="bild3g" id="bild3g"><a href="level1.htm" title="Gleitringdichtungen"><img src='gleitringdichtungen-3.png' border='0' onmouseout='javacript:verstecke3()' /></a></div>
        <div class="bild4g" id="bild4g"><a href="level1.htm" title="Gleitringdichtungen"><img src='gleitringdichtungen-4.png' border='0' onmouseout='javacript:verstecke4()' /></a></div> 
            <div class="bild1" id="bild1" onmouseover="javascript:zeige1();"><a href="level1.htm" title="Gleitringdichtungen"><img src="gleitringdichtungen-1_klein.png" border="0" /></a></div>
            
            <div class="bild2" id="bild2" onmouseover="javascript:zeige2();"><a href="level1.htm" title="Gleitringdichtungen"><img src="gleitringdichtungen-2_klein.png" border="0" /></a></div>
            
            <div class="bild3" id="bild3" onmouseover="javascript:zeige3();"><a href="level1.htm" title="Gleitringdichtungen"><img src="gleitringdichtungen-3_klein.png" border="0" /></a></div>
            
            <div class="bild4" id="bild4" onmouseover="javascript:zeige4();"><a href="level1.htm" title="Gleitringdichtungen"><img src="gleitringdichtungen-4_klein.png" border="0" /></a></div>
                        
      </div>

Die 4 Bilder sind genau nebeneinander und zusammen so groß wie eines, so erziele ich das ein Bild alle 4 überdeckt.


Nur im IE7 wird es nicht überdeckt sondern wird es daneben angezeigt...
Also an der Oberkante des 4ten Bild.

Bug:

Richtig (eines überblendet alle 4):

Link: Unbenanntes Dokument


Lg
Christof