✔ Problem mit der obersten Positionierung

[ByeBye 246039]

Hallo liebe Programmierer,

ich habe heute mal wieder ein Problem, bei dem ich nicht weiter komme:
Ich habe mehrere Galerien auf meiner Seite, welche ich mit folgendem Code programmiert habe:

<ul class="foto" style="float:right;">
	<li>
        <a href="#"><img src="pic/ref/nagelprodukte_grosshandel_4.jpg" width="212" height="150" />
        <img src="pic/ref/nagelprodukte_grosshandel_4_gr.jpg" width="353" height="250" class="gross" /></a>
    </li>
  </ul>

...

  <ul class="foto" style="float:right;">
	<li>
		<a href="#"><img src="pic/ref/nagelprodukte_grosshandel_1.jpg" width="106" height="150" />
        <img src="pic/ref/nagelprodukte_grosshandel_1_gr.jpg" width="177" height="250" class="gross" /></a>
    </li>
  </ul>

Die Galerie habe ich mit folgendem CSS-Stiel formatiert:

.foto { margin: 0; padding: 0; }

.foto img { border: #999999 solid 1px; margin-right:20px; z-index:1; }

.foto li { list-style: none; position: relative; } 

a .gross { display: none; z-index:2; } 

a:hover .gross { display: block; position: absolute; top:0px; left:0px; z-index:3; }

Nun habe ich das Problem, dass das vergrößerte 1. Bild hinter dem kleinen 2. Bild steht. Allerdings ist das nur im Internet Explorer der Fall. Bei Firefox und Safari funktioniert es, wegen dem z-index. Ich habe aber keine Ahnung, wieso das nicht im IE klappt. Hat jemand einen Vorschlag, wie ich das auch für den Internet Explorer hübsch hinbekomme?

LG
SuLeu

 

[Jan-Frederik Stieler]

Hi,
nim mal in deinen CSS-Code an die stellen wo du den z-Index deklarierst noch position: relative mit rein.

Gruß

 

[Maik]

Hi,

dieses Problem kann ich mit deinem gezeigten Code in keiner IE-Version (6, 7, 8) reproduzieren.

In welcher IE-Version tritt bei dieser Fehler auf?

mfg Maik

 

[ByeBye 246039]

das mit dem Position relative klappt leider auch nicht. Keine Änderung.

Ich verwende auch den IE 8. Kann das evtl. auch Lokalhost liegen? Der Test ist jetzt noch nicht online. Oder es liegt am Quelltext dazwischen?

<div style="width:100%; border:0;">
  <img src="pic/ref_01_1.jpg" width="52" height="52" style="float:left; margin-right:10px; margin-bottom:100px;" />
  <p class="grUberschrift">Din-lang-Flyer
  
  <ul class="foto" style="float:right;">
	<li>
		<a href="#">
			<img src="pic/ref/flyer_karibian_night.jpg" width="75" height="150" />
			<img src="pic/ref/flyer_karibian_night_gr.jpg" width="200" height="400" class="gross" />
		</a>
	</li>
  </ul> 
  
  </p>
  <p class="Text">Kundenvorgaben: ...</p>
  <p class="Text">Auflage: ...<br />
    Druck: ...</p>
  <p class="Text">&nbsp;</p>
  <p class="Text">&nbsp;</p>
  <p class="Text">&nbsp;</p>
</div>
<br />
<hr>
<div style="width:100%; border:0;">
  <img src="pic/ref_01_1.jpg" width="52" height="52" style="float:left; margin-right:10px; margin-bottom:150px;" />
  <p class="grUberschrift">A5-Katalog 
  
  <ul class="foto" style="float:right;">
	<li>
        <a href="#"><img src="pic/ref/nagelprodukte_grosshandel_4.jpg" width="212" height="150" />
        <img src="pic/ref/nagelprodukte_grosshandel_4_gr.jpg" width="353" height="250" class="gross" /></a>
    </li>
  </ul>
  <ul class="foto" style="float:right;">
	<li>
		<a href="#"><img src="pic/ref/nagelprodukte_grosshandel_1.jpg" width="106" height="150" />
        <img src="pic/ref/nagelprodukte_grosshandel_1_gr.jpg" width="177" height="250" class="gross" /></a>
    </li>
  </ul>
...

Das große Bild vom flyer_karibian_night.jpg liegt unter dem kleinen Bild nagelprodukte_grosshandel_4.jpg

 

[Maik]

Schau selbst:



Kannst du mal zum Gegenvergleich den Link zur Seite nennen?

mfg Maik

 

[ByeBye 246039]

Ich habe gerade mein Test hochgeladen.

Und mir fielen die Augen aus, das klappt da.

Wie kann das denn sein? Lokalhost mit xamp V.2.1

Ich freu mich, geht scheinbar alles.

 

[Maik]

Ich hab es ebenfalls auf dem XAMPP-Server überprüft, und das Ergebnis hast du ja in meinem Anhang gesehen ;-)

Woran es bei dir lokal liegen soll, kann ich dir leider nicht sagen ...

mfg Maik