Verschil 'borders', 'padding' en 'margin' in Firefox en IE

[m33p]

Ik probeer nu een site welke gemaakt is in tables om te zetten naar layers. Nou werkt de table versie in Firefox en IE perfect, maar nu met layers wordt ik helemaal knetter. Heb ik het in de éne browser goed, is het in de andere weer niet goed.

Firefox telt de padding er bij op, terwijl IE dat niet doet. IE telt de borders bij de width, terwijl firefox dat niet doet. Zelfde geld voor margin.

Wat is nou de beste manier om dit op te lossen? Een stylesheet voor elke browser zie ik niet echt zitten maar als het moet dan is het niet anders, maar er is vast een makkelijkere oplossing.

Ik heb al gelezen over 'border-collapse: collapse' maar dit maakt ook geen verschil. In mijn geval zit ik met het volgende:

HTML:

<div id="container">

    <div id="results">
        <div id="header"> text </div>
        <a href="#">linkje 1</a>
    </div>

    <div id="newsitems">
        <div id="header"> andere tekst </div>
        <a href="#"> linkje 1</a>
    </div>

</div>

De container is absoluut geplaatst met een vaste breedte (620px). Tussen de linker en de rechter container (ze staan dus naast elkaar) moet 10px ruimte. De linker container moet breder zijn dan de rechter (ongeveer 4/3 verhouding). Links van 'results' en 'newsitems' zit een border. Het border probleem heb ik opgelost door met een achtergrond en repeat-y te werken.

Heeft iemand enig idee hoe de code dan ongeveer zou moeten zijn zodat het in FF en IE er hetzelfde uit ziet? Ik ben hier nu al 2 uur mee aan het prutsen maar ik kom er niet uit.

Overige tips met betrekking tot borders, padding, margin, etc zijn ook zeer welkom

[Blauw]

Cascading Stylesheet:

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

Handige oplossing ooit overgenomen van Pelle voor het border box probleem

[ Voor 17% gewijzigd door Blauw op 23-07-2005 17:57 ]

[Verwijderd]

je kan ook zorgen dat IE in standards mode zit, dus een nette doctype met niks erboven. Zoek maar eens op boxmodel

[Verwijderd]

Verwijderd schreef op zaterdag 23 juli 2005 @ 18:08:
je kan ook zorgen dat IE in standards mode zit, dus een nette doctype met niks erboven. Zoek maar eens op boxmodel

IE in standards mode is enorm buggy, en ik zou persoonlijk dan in quirks mode gaan werken.

Voor box-sizing (CSS3 property overigens) kun je gebruiken maken van de waarden content-box, padding-box, en border-box. Voor kHTML (Konqueror, Safari) kun je gebruikmaken van -box-sizing, en voor Gecko kun je gebruikmaken van -moz-boxsizing en Opera en NS6 volgen ook het W3 model.

IE gebruikt in non standards mode standaard border-box, resp. width = (width + padding + border), en in standards mode dus content-box.

content-box: width = contentwidth;
padding-box: width = contentwidth + padding;
border-box: width = contentwidth + padding + border;

[ Voor 17% gewijzigd door Verwijderd op 23-07-2005 19:03 ]

[Verwijderd]

Verwijderd schreef op zaterdag 23 juli 2005 @ 18:59:
[...]
IE in standards mode is enorm buggy, en ik zou persoonlijk dan in quirks mode gaan werken.

Waarmee is IE dan buggyer in standards mode? dit is de eerste keer dat ik het hoor nl, nu heb ik me er persoonlijk nooit zo in verdiept eigenlijk, dus ik ben wel benieuwd.

[Verwijderd]

Verwijderd schreef op zaterdag 23 juli 2005 @ 19:10:
[...]

Waarmee is IE dan buggyer in standards mode? dit is de eerste keer dat ik het hoor nl, nu heb ik me er persoonlijk nooit zo in verdiept eigenlijk, dus ik ben wel benieuwd.

Behalve onverklaarbare problemen die op geheel willekeurige momenten, met willekeurige code ontstaan met oa overflow, knipper effecten, duplicate data etc. loop je in bepaalde gevallen tegen het probleem aan dat je in IE6 standards mode niet je boxmodel kunt beheren.

Als je dus een element in je body wil hebben dat 100% hoog is, maar toch een margin moet hebben, bijvoorbeeld omdat je absolute een footer wilt positioneren dan beland je dus direct in een pagina met een verticale scrollbar (100%+margin). De enige manier om dat op te lossen is of diverse elementen in elkaar gaan nesten zodat je margin in een child definieert, of je pagina in quirks renderen.

Vaak blijft het alleen niet met 1 element wrappen, en dan heb je uiteindelijke een enorme lading aan geneste elementen puur voor het definieren van zaken als margin padding en border.

[crisp]

IE is sowieso buggy; standards compliant mode of niet
Zolang je niet vast zit aan een 100% height site ben ik toch voorstander van standards compliant mode; al is het alleen maar omdat dat in alle andere browsers ook voorspelbaar gedrag oplevert (box-sizing is nog lang geen gemeengoed).
Dan enkel nog een extra stylesheet dmv conditional comments includen voor IE < 6 en je bent klaar

[Verwijderd]

Behalve padding, want daar zit voor Gecko nog een flinke bug in die ook nog in de trunk voor komt. Is aangemeld, dus nu nog wachten op de fix Maar ik kan me verder wel vinden in je gedachte erachter. Het hangt ook een beetje af in hoeverre je last krijgt van box-sizing problemen.

[Verwijderd]

Verwijderd schreef op zaterdag 23 juli 2005 @ 19:48:
[...]


Behalve onverklaarbare problemen die op geheel willekeurige momenten, met willekeurige code ontstaan met oa overflow, knipper effecten, duplicate data etc. loop je in bepaalde gevallen tegen het probleem aan dat je in IE6 standards mode niet je boxmodel kunt beheren.

Als je dus een element in je body wil hebben dat 100% hoog is, maar toch een margin moet hebben, bijvoorbeeld omdat je absolute een footer wilt positioneren dan beland je dus direct in een pagina met een verticale scrollbar (100%+margin). De enige manier om dat op te lossen is of diverse elementen in elkaar gaan nesten zodat je margin in een child definieert, of je pagina in quirks renderen.

Vaak blijft het alleen niet met 1 element wrappen, en dan heb je uiteindelijke een enorme lading aan geneste elementen puur voor het definieren van zaken als margin padding en border.

volgens mij is heel veel terug te voeren op het hasLayout gebeuren, en is ook in quirks mode van toepassing (note: zeker weten doe ik dat niet)

het laatste wat je noemt heeft niks met bugs te maken, maar puur vanwege het feit dat IE het vastleggen van top en bottom tegelijk gewoon niet werkt. Daar is lastig omheen te werken af en toe ja, en in dat geval ben ik met je eens dat quirks mode wel eens handig kan zijn. Verder volg ik eigenlijk Crisp in het statement dat ik zoveel mogelijk in standards mode werk

[Verwijderd]

Wel moet er wel even op gelet worden dan alleen 6 standards mode kent, en dat je dus voor oudere versies iets moet verzinnen om over die standaard border-box heen te werken, bijv. met hacks, andere css, etc. Maar dat moet je zowiezo al als je volgens de standards gaat werken, en dat blijft de komende jaren nog wel zo

[ Voor 8% gewijzigd door Verwijderd op 23-07-2005 20:43 ]

[crisp]

Verwijderd schreef op zaterdag 23 juli 2005 @ 20:10:
Behalve padding, want daar zit voor Gecko nog een flinke bug in die ook nog in de trunk voor komt. Is aangemeld, dus nu nog wachten op de fix Maar ik kan me verder wel vinden in je gedachte erachter. Het hangt ook een beetje af in hoeverre je last krijgt van box-sizing problemen.

Ik ken ook nog een paar margin-bugs ism floats in Gecko

Verwijderd schreef op zaterdag 23 juli 2005 @ 20:23:
[...]
volgens mij is heel veel terug te voeren op het hasLayout gebeuren, en is ook in quirks mode van toepassing (note: zeker weten doe ik dat niet)
[...]

Da's meestal een probleem met floats. Het hele floatmodel in IE is buggy en werkt niet lekker met de manier waarop in Trident positioning is geimplementeerd (waarbij hasLayout dus blijkbaar een grote rol speelt).

[Verwijderd]

crisp schreef op zaterdag 23 juli 2005 @ 20:59:
Ik ken ook nog een paar margin-bugs ism floats in Gecko

Ja de heren hebben nog wel wat liggen aan werk
https://bugzilla.mozilla....t=&content=padding+margin

[Verwijderd]

wat betreft het hasLayout gebeuren is dit wel een aardige:
http://www.satzansatz.de/cssd/onhavinglayout.html

anne had laatst nog iets mafs met lijsten:
http://annevankesteren.nl/2005/07/layout