Overrule * i stylesheet

hvordan ser dit CSS ud??

.noboxsizing {
    -moz-box-sizing:none;
}
* {             
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

Prøv at bytte om på rækkefølgen:

* {             
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.noboxsizing {
    -moz-box-sizing:none;
}

har prøvet det

Jeg kan kun sige at det virker fint hos mig. Nu har jeg så også testet med andre parameter, for at se ændringningerne. Her er den kode jeg har brugt:

<style>
*{
  border:1px solid black;
  color : black;
}
.noboxsizing {
  border:none;
  color : red;
}
</style>

<div>
kshdcjsdb<br>
kshdcjsdb<br>
</div>
<div class="noboxsizing">
kshdcjsdb<br>
kshdcjsdb<br>
kshdcjsdb<br>
kshdcjsdb<br>
</div>
<div>
kshdcjsdb<br>
kshdcjsdb<br>
kshdcjsdb<br>
kshdcjsdb<br>
kshdcjsdb<br>
kshdcjsdb<br>
</div>

Ja det burde også virke men ved ikke om der er noget specielt ved -moz-box-sizing:border-box;

Har prøvet alle de muligheder jeg kan komme på.

Skal begge attributter ikke også sættes til none:

* {             
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.noboxsizing {
    box-sizing:none;
    -moz-box-sizing:none;
}

Det skal de faktisk ikke. Du må lige smide et svar så får du points som tak for hjælpen. Løsningen er at -moz-box-sizing:border-box; ikke står i * men i andre classes som bruges af de divs som skal have den.

... Det var også kun en ide. Sand at sige har jeg ikke hørt om "-moz-box-sizing" før dette ?, men det lyder da som en smart lille ting mozilla folkene har lavet der. Så jeg må lige få kikket på det engang når jeg får tid :o)

.o) <-- One Eyed Jack

jeg kan heller ikke finde "-moz-box-sizing" i w3's dokumentation uden dog at vide hvad deres validator siger. Men den udligner en kant-forskel ml. IE og mozilla.

Den står der næppe, da det er en special funktion til mozilla. Det er der jeg plejer at lave noget javascript til at tjekke for browser type, men dette er betydlig nemmere.

En definition af noget i en klasse, som ovenikøbet følger bagefter en definition for alle elementer, skal af flere grunde absolut override ...

For det første fungerer css-tolkning på den måde, at man kan sige, at stylesheetet tolkes fra oven og nedad, og hver eneste definerede property skrives ind i DOM-træet, som er er browserens bibliotek over hvordan hvert enkelt element skal tegnes på skærmen ...

Derudover gælder der et nærhedsprincip for style-properties, så jo 'fjernere' fra selve elementet en property er angivet, jo mindre prioritet har en property, og vil derfor ikke virke, hvis der findes en angivelse med højere prioritet !-)

Prioriteringen er:

Først en programmatisk sat på selve elementet (javascript-et-eller-andet on-the-fly !-)
Derefter i en style-attribut på selve elementet
Så i en property med en id-selector (id="id" -- #id{} )
Så i en property med en class-selector (class="class" -- .class{} )
Så i en property med en type-selector (<tag> -- tag{} )
-- og til allersidst med universalselectoren * ...

Så gentages det hele for elementets parent-element (hvis den pågældende property arves til elementet !-)

Op igennem hierarkiet sker det samme, men f.eks. udnyttelse af arv kan modificere prioriteringen en anelse, da f.eks. en #menudiv a{} vil override både <tag>- og *-selectorer !o]

<ole>

Hvis man gerne vil vænne sig til at skrive kode, der på et senere tidspunkt kan konverteres til XHTML, skal man dog nok undlade at bruge inline-styles, da denne mulighed er på vej ud - og helt forsvinder i XHTML2.0

/mvh
</bole>