[CSS] DIV elementen cross-browser even breed maken

[LouisXV]

Ik probeer als een soort knoppenbalk vijf divjes naast elkaar te zetten met vaste breedte, met om elk een randje van 1 pixel breed, gevat in een andere div met een vaste breedte(en 1px border). Het is de bedoeling dat het toch wel in meer dan alleen IE gaat werken, vooral imdat ik zo perfectionistisch ben dat ik me erger aan een of twee pixels verschil in positie.

Het probleem is dat wat ik ook probeer, absolute, relative, float, %, het is of te breed in IE en het past in Firefox, of het pas in IE en het is te smal in Firefox. zover ik kan achterhalen komt dit doordat in IE de breedte van de border afgaat van de opgegeven breedte van het element terwijl Firefox de opgegeven breedte erbij optelt. Dus een DIV van 100 pixels met een border van 1px is in IE 100px breed, maar in Firefox 102.

Weet iemand een manier om hier omheen te komen? Ik zou natuurlijk de vorm van het balkje wat aan kunnen passen maar ik erger me er gewoon aan dat het niet wil lukken dus wil ik graag weten of het wel mogelijk is om hier iets aan te doen.

[Pelle]

Cascading Stylesheet:

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

[Genoil]

box-sizing: border-box; -moz-box-sizing:border-box;

wil je je site ook op Safari exact hetzelfde hebben, dan gaat bovenstaande property je niet verder helpen en zul je IE6 in "zo-W3C-compliant-mogelijk"-modus moeten gaan draaien door een correct doctype te zetten. vervolgens voor IE5.x de juiste hacks toepassen...etc.etc. kan deze vraag niet in de FAQ?

[ Voor 9% gewijzigd door Genoil op 19-03-2004 16:36 ]

[Verwijderd]

Het makkelijkste is om dan met externe css bestanden te werken (sowieso makkelijk), één voor Firefox en één voor IE e.a. Dan detecteer je de browser waarmee de pagina wordt bekeken en laad je het bijbehorende css bestand in.

Hierdoor hoef je niet verschillende pagina's te maken voor verschillende browsers en ziet het er toch overal goed uit.

[BtM909]

Verwijderd schreef op 19 maart 2004 @ 16:37:
Het makkelijkste is om dan met externe css bestanden te werken (sowieso makkelijk), één voor Firefox en één voor IE e.a. Dan detecteer je de browser waarmee de pagina wordt bekeken en laad je het bijbehorende css bestand in.

Hierdoor hoef je niet verschillende pagina's te maken voor verschillende browsers en ziet het er toch overal goed uit.

Nee, dan maak je ipv verschillende pagina's, verschillende css files

[Verwijderd]

BtM909 schreef op 19 maart 2004 @ 16:39:
[...]

Nee, dan maak je ipv verschillende pagina's, verschillende css files

Da's één keer en dan heb je voor de HELE site (dus alle pagina's) slechts twee CSS bestanden. Dit is DE beste manier om het bij iedereen, van een DTP'er op de Mac tot oma op de internet cursus goed uit te laten zien. Misschien moet je nog wel wat meer CSS bestanden maken voor meer browser types. Ze zijn nou eenmaal niet 100% compatible met elkaar, je komt er dus niet onderuit om meerdere stylesheets te maken. Of je moet een pagina met alleen maar tekst willen.

[LouisXV]

Bedankt voor de snelle replies...

Cascading Stylesheet:

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

IK geloof alleen dat ik het nog niet helemaal begrijp. Zou je het voorbeeld iets specifieker kunnen maken? Begrijpt firefox hieruit dat wat volgt achter -moz- voor hem bedoelt is?

En hiermee kan ik dus binnen een definitie voor aparte browsers verschillende formaten aangeven zonder een aparte stylesheet te hoeven maken door overan -moz- (of een andere browser) voor te zetten?

[Genoil]

hier staat het helder uitgelegd:
http://www.quirksmode.org/index.html?/css/box.html

[BtM909]

Verwijderd schreef op 19 maart 2004 @ 16:42:
[...]


Da's één keer en dan heb je voor de HELE site (dus alle pagina's) slechts twee CSS bestanden. Dit is DE beste manier om het bij iedereen, van een DTP'er op de Mac tot oma op de internet cursus goed uit te laten zien. Misschien moet je nog wel wat meer CSS bestanden maken voor meer browser types. Ze zijn nou eenmaal niet 100% compatible met elkaar, je komt er dus niet onderuit om meerdere stylesheets te maken. Of je moet een pagina met alleen maar tekst willen.

We kunnen deze discussie best voeren, maar dan niet in dit topic. Je kan gerust met 1 stylesheet overweg (althans voor dit doel).