Avatar billede jkampmann Nybegynder
24. juni 2008 - 19:14 Der er 7 kommentarer

z-index virker ikke i firefox

Hejsa. Hvordan kan det være, at det virker fint mht zindex i Internet Explorer 7.0 - men ikke i firefox?

Prøv se her:
http://pointsafari.dk/vindere.html

Kig i højre side, ved den grå stjerne hvor der står "Værdi 250 kr" - den er placeret perfekt i IE, men ikke firefox - hvad skal jeg gøre?
Avatar billede w13 Novice
24. juni 2008 - 19:29 #1
Teksten står jo fint oven på, men det er måske kun stjernen, der er sat med z-index?

Prøv at vise, hvad du gør i koden ved det sted. Det kan tage lang tid for os at lede hele din HTML- og CSS-kode igennem efter det. =)
Avatar billede w13 Novice
24. juni 2008 - 19:35 #2
*Men det er måske kun for stjernen, at z-index ikke virker?
Avatar billede olebole Juniormester
24. juni 2008 - 19:37 #3
<ole>

Du skal positionere et element for at kunne bruge z-index på det. F.eks:
    style="position:relative;z-index:2; .............."

/mvh
</bole>
Avatar billede w13 Novice
24. juni 2008 - 19:41 #4
Dog har aldrig oplevet en situation, hvor z-index var nødvendigt at sætte.

Hvis jeg har elementA, som skal ligge nederst i "stakken", og elementB, som skal ligge oven på elementA, så placerer jeg bare elementB's kode under elementA's kode således:

<elementA></elementA>
<elementB style="positions-halløj her"></elementB>

Alle nutidige browsere placerer de første elementer "nederst i stakken" og de sidste elementer "øverst i stakken".
Dog dermed ikke sagt, at de får et z-index, men resultatet bliver det samme.
Avatar billede mclemens Nybegynder
24. juni 2008 - 20:05 #5
Hmm den position:absolute; redder det - men man kan måske spare lidt html ved at rette:
(ville bare lige nævne alternativet også)

                          <div style="text-align:center;"><img src="http://pointsafari.dk/konkurrence_billeder/matas.gif" alt="" style="width: 100px; height: 75px;z-index:1" /></div>

<div id="cuPoN" style="z-index:99999;margin-top:-80px;margin-left:105px;background-image:url(http://pointsafari.dk/vaerdi.png);height:75px;width:75px;text-align:center;">
  <div style="padding-top:14px;color:#fff"><strong>Værdi</strong><br />200 kr.</div>
</div>

->

<div style="background: transparent url('http://pointsafari.dk/konkurrence_billeder/matas.gif');width:100px;height: 75px;margin:0 auto;" id="cuPoN">
  <div style="background-image:url('http://pointsafari.dk/vaerdi.png');margin-left:80px;width:41px;height:41px;padding:17px;color:#fff;"><strong>Værdi</strong><br/>200 kr.</div>
</div>

... Det fordrer dog at matas billedet rettes til de 100x75px
Avatar billede mclemens Nybegynder
24. juni 2008 - 20:25 #6
^ - transparent i ovenstående var overflødigt og background
i den nederste div istedet for background-image var nok.
Avatar billede w13 Novice
06. august 2008 - 14:50 #7
Kommet videre?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester