Kom ihåg mig?
Home Menu

Menu


z-index på bilder, IE6 (blir tokig snart)

Ämnesverktyg Visningsalternativ
Oläst 2009-09-23, 19:31 #1
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
Tool 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;filterrogidXbildTransform.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 är inte uppkopplad   Svara med citatSvara med citat
Oläst 2009-09-23, 23:38 #2
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
olsserik olsserik är inte uppkopplad
Flitig postare
 
Reg.datum: Jul 2007
Inlägg: 300
Det löste sig till slut!

jag skippade z-index helt och lade helt sonika "inline" istället för "block" på display.
olsserik är inte uppkopplad   Svara med citatSvara med citat
Oläst 2009-09-24, 15:13 #3
Hjalmarsson Hjalmarsson är inte uppkopplad
Medlem
 
Reg.datum: Jun 2008
Inlägg: 98
Hjalmarsson Hjalmarsson är inte uppkopplad
Medlem
 
Reg.datum: Jun 2008
Inlägg: 98
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
Hjalmarsson är inte uppkopplad   Svara med citatSvara med citat
Svara


Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)
 

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


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

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