[CSS] probleem z-index in firefox - Softwareontwikkeling

woensdag 16 november 2005 17:42

Acties:

Verwijderd

Topicstarter

Hey,

Ik ben (voor informatica) bezig met het bouwen van een website en aan de zijkanten van mijn site komen blauwe randen als achtergrond. Dit doe ik met behulp van een paar blauwe jpegs die ik naar z-index -1 zet met css. In IE doet dat het perfect maar in Firefox zie je helemaal niks als je een bestand een negatieve z-index geeft. Iemand een oplossing?

EDIT - SNAP HET AL - EDIT

sorry voor het openen van een loos topic, maar terwijl ik dit bericht typte bedacht ik iets wat misschien de oorzaak van het probleem kan zijn: firefox kan niet met negatieve z-index getallen omgaan ofzo, want toen ik alles een positief getal gaf deed ie et wel. dus slotje aub.

[ Voor 31% gewijzigd door Verwijderd op 16-11-2005 17:45 ]

woensdag 16 november 2005 17:46

Acties:

crisp

Devver

Pixelated

Simpelweg omdat je geen negatieve waarden mag opgeven voor z-index. En als die plaatjes bedoelt zijn als achtergrond, waarom gebruik je dan geen background: daarvoor in CSS?

Intentionally left blank

woensdag 16 november 2005 18:30

Acties:

Verwijderd

Topicstarter

nou, ten eerste heb ik dat z-index gebeuren pas een week geleden voor het eerst 'geleerd' via http://www.w3schools.com, de officiele site van w3c en daar stond alleen maar een voorbeeld van een negatieve z-index, dus als zelfs w3c het verkeerd zegt.......

ik gebruikt het niet als achtergrond omdat ik op deze manier de site goed zichtbaar maak voor mensen met uiteelopende resoluties.

woensdag 16 november 2005 18:35

Acties:

crisp

Devver

Pixelated

w3schools.com is op geen enkele manier verbonden met het w3c (en imho ook niet echt van hoog niveau)...

Intentionally left blank

woensdag 16 november 2005 18:49

Acties:

RubZie

Een z-index moet een integer als waarde hebben, en die mag ook negatief zijn.
Van het echte w3c:

Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign.

Usarchy: nieuws over usability en online marketing

woensdag 16 november 2005 21:03

Acties:

crisp

Devver

Pixelated

Je vergeet een stukje te quoten:

quote: http://www.w3.org/TR/CSS21/syndata.html#value-def-integer
Note that many properties that allow an integer or real number as a value actually restrict the value to some range, often to a non-negative value.

Edit: z-index mag wel negatief zijn, maar je element zal dan ws achter je canvas komen te liggen.
Anyway, stacking order en contexts lijkt nogal complex te zijn - na 1 keer lezen snapte ik het iig nog niet helemaal.

2 voorbeelden:

HTML:

1
2
3

<body>
    <div style="position:relative;z-index:-1">foo</div>
</body>

div niet zichtbaar, ligt ws achter het root-element wat al standaard een background-color heeft

HTML:

1
2
3

<body style="position:relative;z-index:0">
    <div style="position:relative;z-index:-1">foo</div>
</body>

body creeerd een nieuwe stacking-context; de div ligt daar achter maar nog boven het canvas.

[ Voor 63% gewijzigd door crisp op 16-11-2005 21:24 ]

Intentionally left blank