[CSS] Firefox telt border niet mee bij breedte cel

[Limhes]

Ik loop hier tegen een vervelend verschil aan tussen IE en Mozilla Firefox. Het lijkt namelijk dat Firefox de border van een span element niet meetelt bij de breedte, en IE wel.
Ik merk dit op het moment dat ik een div van 600px breed wil vullen met 4 spans (display: block en float: left) van elk 25% breed, die elk een border van 1px breed hebben. IE rendert dit zoals ik het wil, dus netjes op een rijtje. Firefox pleurt de laatste span echter onder de andere drie, omdat deze volgens hem niet meer past.
Als ik de border op 0px zet werkt het wel, dus ik verdenk Firefox ervan de border niet mee te tellen met de breedte van de cel.

Wie weet een fatsoenlijke oplossing voor dit probleem, zonder dat ik een span in een andere span hoef te plaatsen om zo toch een border te krijgen?

[Verwijderd]

zoek eens op boxmodels, dit is echt al veel te vaak voorbij gekomen.

overigens doet ff het op de w3c manier, maar da's idd soms wel eens lastig

[Limhes]

Verwijderd schreef op 24 juni 2004 @ 16:28:
zoek eens op boxmodels, dit is echt al veel te vaak voorbij gekomen.

overigens doet ff het op de w3c manier, maar da's idd soms wel eens lastig

Bedoel je nou te zeggen dat de twee browsers allebei een ander boxmodel hanteren, of wat is de relevantie van de eerste zin?

En de w3c manier om dit op te lossen is mij niet bekend, en is zoekenderwijs moeilijk te vinden, aangezien dit voor mij een nieuw probleem is en ik de juiste termen niet ken. Ben niet zo'n CSS'er.

.edit:
Ik denk dat ik begrijp wat je bedoelt, namelijk van de spans de margin of padding op 1px te zetten en vervolgens de achtergrondkleur van de omhullende div op de voormalige border-kleur te zetten, maar dan blijf ik het probleem houden dat Firefox vindt dat de margins en paddings niet bij de breedte horen, en IE wel. Dat is nou juist mijn probleem

[ Voor 28% gewijzigd door Limhes op 24-06-2004 16:41 ]

[Bosmonster]

code:

* {
    box-sizing: border-box
    -moz-box-sizing: border-box;  
}

Toevoegen aan je stylesheet (of de eigenschap alleen aan die spans) zorgt ervoor dat Mozilla-based browsers in ieder geval het ouderwetse boxmodel gebruiken.

[Limhes]

Bosmonster schreef op 24 juni 2004 @ 16:49:

code:

* {
    box-sizing: border-box
    -moz-box-sizing: border-box;  
}

Toevoegen aan je stylesheet (of de eigenschap alleen aan die spans) zorgt ervoor dat Mozilla-based browsers in ieder geval het ouderwetse boxmodel gebruiken.

Dankjewel, dit lost het probleem inderdaad op.

Er is dus een verschil in de boxmodels, zoals Mophor al heel duidelijk zei

[Verwijderd]

Eigenlijk is er geen verschil in de boxmodels. Als je IE in strict mode zet (juiste xhtml declaratie bovenin je html) dan zal IE ook de border niet meetellen. Wat je doet met box-sizing is eigenlijk alle andere browsers dan IE vertellen dat ze het ook maar niet strict moeten doen, da's dus eigenlijk de omgekeerde wereld

[Limhes]

Verwijderd schreef op 24 juni 2004 @ 17:02:
Eigenlijk is er geen verschil in de boxmodels. Als je IE in strict mode zet (juiste xhtml declaratie bovenin je html) dan zal IE ook de border niet meetellen. Wat je doet met box-sizing is eigenlijk alle andere browsers dan IE vertellen dat ze het ook maar niet strict moeten doen, da's dus eigenlijk de omgekeerde wereld

Hmm... Nu is het wel zo dat ik een XHTML strict doctype declaratie bovenin mn html heb staan, dus ik denk dat die vlieger niet helemaal opgaat. Of houdt IE zich uberhaupt niet aan hoe het moet? (Ben ik wel gewend hoor, daar niet van...)

[Rickets]

Limhes schreef op 24 juni 2004 @ 17:22:
Hmm... Nu is het wel zo dat ik een XHTML strict doctype declaratie bovenin mn html heb staan, dus ik denk dat die vlieger niet helemaal opgaat. Of houdt IE zich uberhaupt niet aan hoe het moet? (Ben ik wel gewend hoor, daar niet van...)

Heb je nog iets voor je DTD staan?

[Bosmonster]

Er zijn eigenlijk 2 manieren om het probleem op te lossen.

- Je zorgt ervoor dat IE z'n quirks-mode gebruikt (geen DTD of ruimte voor DTD) en laat andere browsers het boxmodel gebruiken van IE met bovenstaande CSS.

- Je werkt wel gewoon XHTML-compatible (IE6 gebruikt dan het juiste boxmodel, net als Mozilla) en past je code daarop aan. Grofgezegd betekent dit nooit borders/padding gebruiken in combinatie met width/height settings. Een extra divje hier en daar kan hier vaak prima oplossing voor bieden.

Totdat IE 5.x uit de gratie is geraakt zijn dit imho de enige bruikbare oplossingen.

[ Voor 8% gewijzigd door Bosmonster op 24-06-2004 17:57 ]