Problem: Linje utenfor vanlig flow, z-index: -1, Firefox "bug"

[eivihnd]

Holder på å sette opp en nettside, men har møtt på et lite (men likevel stort) problem:

 

På siden skal det være en linje som går over hele skjermen, som vist på bildet.

 

 

All tekst ol. skal komme over denne igjen. Den skal rett og slett tas ut av normal flow.

 

Følgende css er brukt:

#line {
height: 137px;
width: 100%;
background: url(../images/bg.png) repeat-x;
position: absolute;
z-index: -1;
top: 464px;
}

 

Problemet kommer når en opner det i FF:

 

Firefox støtter ikke z-index: -1; , og plasserer bildet bak BODY.

 

Setter jeg z-index: 0; , kommer linja OVER innholdet. Det er bare denne <div'en> som er posisjonert med postition: absolute.

 

 

Så, er det noen der ute som har svaret på problemet jeg har brukt x-antall timer på å løse?

Hadde vært veldig greit, da jeg nærmer meg deadline...

(Kan ikke oppgi URL, pga konfidensialitet)

Endret 16. januar 2008 av eivihnd

[Gjest Slettet+9018234]

Du kan sette innholdet i egen divisjon med pos absolute og z-index: 1; Deretter kan du ta la din #line ha z-index: 0. Hvis jeg forstod problemet ditt riktig.

 

ca. slik:

 

div#content {

position: absolute;

top: 430px;

z-index: 1;

}

 

div#line {

position: absolute;

top: 400px;

height: 137px;

min-height: 137px; // Husk å ha min-height fordi IE skjønner ikke height.

z-index: 0;

}

 

HTML:

<div id="line">

<div id="content">Innhold og annet lurt her</div>

</div>

 

Det lar seg også gjøre å kutte vekk div#content hvis du ikke trenger å stile denne noe spesielt, og heller ta disse attributtene i #line.

 

mvh

Endret 17. januar 2008 av Slettet+9018234

[eivihnd]

Tusen takk for svar. Men det fungerte dessverre ikke. Det førte bare til at margin: auto ikke fungerte...

 

Siden består av hovedsakelig tre kolonner: Left, center, right. Center inneholder all informasjon, left og right er visuelle. For å slippe en ekstra #content_wrapper div har jeg brukt body width og margin. Alle tre (left, center, right er float: left;)

 

PS sobient:

 

Er det mulig å sende en PM?

Endret 18. januar 2008 av eivihnd