kostenloser Webspace werbefrei: lima-city

Layoutprobleme mit position: absolute unter Firefox

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   h******h

   21:56, 9.4.2013

   Hi,
   ich habe mich letztens an ein neues tag/layout">Layout gewagt. Nur leider habe ich ein Problem. Die website wird unter allen Browsern, bis auf Firefox korrekt dargestellt.
   
   Aussehen sollte das alles eigentlich so:
   http://imageshack.us/photo/my-images/585/bildschirmfoto20130409u.png/
   Unter Firefox sieht es aber leider so aus:
   http://imageshack.us/photo/my-images/32/bildschirmfoto20130409u.png/
   Jeder div tag hat zwei Bilder. Ein Hintergrundbild und ein Rolloverbild. Diese habe ich mit z-index übereinandergelegt. Das Problem ist, dass wenn ich die position auf relative setzte dass der z-index nicht funktioniert. Weiß irrgendjemand Rat?
   
   Hier noch der relevante Teil des Codes:
   
   HTML:
   
   

   <div id="content">
   	<div id="headline3">Latest News:</div>
     	
     		<div id="selection">
     			<img src="Images/bioshockinfinite.jpg" class="bgimage" />
     			<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','Images/Main/foreground1.png',1)"><img src="Images/Main/foreground2.png" width="320" height="181" class="bgimage" id="Image14" align="left" /></a> 
     			<div id="selectiontitle">Überschrift</div>
   			<div id="selectiontext">
       		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
      			</div>
           </div>
     
   		<div id="selection">
     			<img src="Images/wipeout2048.jpg" class="bgimage" />
     			<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','Images/Main/foreground1.png',1)"><img src="Images/Main/foreground2.png" width="320" height="181" class="bgimage" id="Image15" align="left" /></a>
     			<div id="selectiontitle"><a href="#">Überschrift</a></div>
      	  	  	<div id="selectiontext">
             	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
          	  	</div>
           </div>
     
   		<div id="selection">
           	<img src="Images/doom4.jpg" class="bgimage" />
     			<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','Images/Main/foreground1.png',1)"><img src="Images/Main/foreground2.png" width="320" height="181" class="fgimage" id="Image16" align="left" /></a>
     			<div id="selectiontitle"><a href="#">Überschrift</a></div>
           	<div id="selectiontext">
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, et. Lorem ipsum dolor sitki hgug hhg amet...
           	</div>
     		</div>
   </div>

   
   
   CSS:
   
   

   .bgimage {
   	z-index: 1;
   	position: absolute;
   	float: left;
   	width: 320px;
   	height: 181px;
   }
   .fgimage {
   	z-index: 2;
   	position: absolute;
   	float: left;
   	height: 181px;
   	width: 320px;
   }
   #content {
   	width: 960px;
   	height: auto;
   	margin-right: auto;
   	margin-left: auto;
   	margin-bottom: 50px;
   	overflow: hidden;
   	background-image: url(../Images/Main/texture2.png);
   	background-repeat: repeat;
   }
   #selection {
   	width: 320px;
   	float: left;
   	height: 350px;
   	text-align: left;
   }

   
   
   Beitrag zuletzt geändert: 9.4.2013 22:02:00 von hq-flash

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. mathesoft

   

   mathesoft hat kostenlosen Webspace.

   1:49, 10.4.2013

   Hier steht was über den z-index bei bei Firefox:
   http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index.
   Vllt hilft dir das?

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?