WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   z-index på bilder, IE6 (blir tokig snart) (https://www.wn.se/forum/showthread.php?t=1038151)

olsserik 2009-09-23 19:31

z-index på bilder, IE6 (blir tokig snart)
 
Hej!
Jag har trixat bra länge med följande kod, får det inte att fungera i IE6.

bg_paa.png är en större bild som bildar en ram till intro.jpg.
Det funkar fint i IE8 och FF, men i IE6 (kan inte testa IE7) förblir bg_paa.png ovanför intro.jpg med resultatet att intro.jpg inte syns.

Har provat med en massa trix för att komma runt den där IE6-7 buggen med att z-index skapar ny stackordning titt som tätt, men lyckas inte, någon css guru som kan hjälpa mig?

Koden:

<!-- HTML:n -->
<div class="paa">
<div class="innehalldiv">
<div class="paa_textbox">
<div class="paa_innehall">
<h1 class="paa_titl"><a href="/intro/" rel="titel" title="introheader">Välkommen</a></h1>
<div class="paa_text">här är utdragstexten ?>
</div>
<div class="paa_knapp"><a href="/intro/" rel="titel" title="introheader">Läs vidare...</a>
</div>
</div>
</div>
<div class="paa_bildbox">
<div class="paa_bild" style="background: url(/bilds/intro.jpg) no-repeat; ">
</div>
</div>
</div>
</div>
<!-- Slut html -->

/* CSS:en */
.innehalldiv {position:absolute; width:980px; height:100%; left:0; top:0; visibility:hidden;filter:progid:DXbildTransform.Mi crosoft.alpha(opacity=100); -moz-opacity:1; opacity:1}
.paa {display:block; position:relative; z-index:-999; width:980px; height:400px; margin:10px auto; background: url(bilds/blue/bg_paa.png) no-repeat;}
.paa_textbox {float:left; display:block; width:410px; height:315px; margin:45px 0 20px 20px;}
.paa_titl {}
.paa_text {display:block; height:120px;}
.paa_knapp {font:bold 13px/30px Arial, Helvetica, sans-serif; text-align:center;}
.paa_innehall {display:block; width:350px; height:320px; padding:20px 30px 20px 20px;}
.paa_bildbox {float:left; position:relative; display:block; width:540px; height:350px;}
.paa_bild {position:relative; z-index:100; display:block; width:478px; height:280px; margin:47px 0 0 6px;}

olsserik 2009-09-23 23:38

Det löste sig till slut!

jag skippade z-index helt och lade helt sonika "inline" istället för "block" på display.

Hjalmarsson 2009-09-24 15:13

Japp som sagt så är IE6's stackorder jävligt sur att jobba med och skapar ny stackorder på positionerade (eller är det bara på relativa, uhm får kolla upp) element. Går dock med lite krux att jobba sig förbi, inkluderar dock en del matte heh :)

Det är dock lite jobbigt att sätta sig in i din kod, kod-taggar är ju att föredra, lite mer betydelsefulla namn och gärna live-exempel.

Oavsett om du löste det eller inte så ser koden ut som skit, lite semantik skadar inte. :S


Alla tider är GMT +2. Klockan är nu 00:05.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson