Position Problem im IE7, Firefox und IE8 funktioniert

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):

Beispiellink: hausladc.ha.funpic.de/Hovertest/

Ob sich da überhaupt was ändert, hängt wohl davon ab, was
es mit dem java-script-Zeug auf sich hat und ob das interpretiert
wird. Insofern ist der Dateiname von deinenm Beispiel schlecht,
da es sich gar nicht um CSS:hover handelt, sondern um einen
event-handler vom Typ onmouseout bzw onmouseover. Mit
:hover kann man es allerdings wohl auch realisieren
(was den Vorteil hat, daß sich der event-handler erübrigt. Bei
älteren MSIE funktioniert allerdings :hover nicht bei jedem
Element, event-handler funktionieren bei jeglicher Version eines
jeden browsers nicht, wenn Skriptinterpretation deaktiviert ist).

Als ungetestete Vermutung könnte man erstmal annehmen, daß
der MSIE Probleme mit float und Positionierung zusammen bei
einem Element hat oder auch mit position:relative etc, wenn da
nicht angeben ist, wohin es positioniert werden soll
(z.B. top:1ex; left:0.2em).

Du musst nicht so viel mit position arbeiten, der Großteil geht auch ohne:

div.hover-container {width: 400px; height: 300px; padding: 0;}
div.hover-container img { display: inline-block; width: 200px; height: 150px; margin: 0;}
div.hover-container img.img0 { width: 400px; height: 300px; display: none; }
div.hover-container:hover img { display: none; }
div.hover-container:hover img.img0 {display: inline-block; }
<div class="hover-container">
  <img class="img1" src="" alt="" />
  <img class="img2" src="" alt="" />
  <img class="img3" src="" alt="" />
  <img class="img4" src="" alt="" />
  <img class="img0" src="" alt="" />
</div>

Beim Hover werden die Bilder 1-4 ausgeblendet und durch 0 ersetzt.

ungetestet.

Das funktioniert ja schon fast…nur…

Mein Problem ist aber dass ich nicht nur eines austauschen will sondern jenachdem welches Bild gehovert wird soll dieses dann in groß alle überdecken d.h. ich habe 4 kleine die jenachdem mit einem der 4 großen gewechselt wird…
:S

Bin gerade draufgekommen, dass mein erster Ansatz nur im IE7 nicht funktioniert.
Safari, Opera, Firefox, IE6, IE8, Chrom; hier überall funktioniert es einwandfrei.

Gibt es vl. einen speziellen IE7 Bug, weil im IE6 geht das Script auch…

Lg