[CSS] Verschil in breedtes (padding?) tussen IE en Mozilla

[r0bert]

Ik heb een pagina gemaakt, waarbij ik in allerlei elementen gebruik maak margins en paddings. In IE ziet de pagina er nu zo uit zoals ik zou willen, maar mozilla rendered alles veel kleiner! Toch zou ik graag alles even groot willen hebben, en moet ik dus eigenlijk weten waardoor dit verschil tussen beide browsers ontstaat.

N.a.v. tip van Crisp om een padding-box te gebruiken, verbeterde wel iets, maar het is nog steeds zoals ik het wel hebben - hetzelfde.

Ik heb de pagina op deze url staan.
^{Update: deze url}

_{(Ik heb sites vergeleken in IE en Mozilla FireFox)}

edit:
Ok thnx BtM909, xal het meteen doorlezen!

[ Voor 18% gewijzigd door r0bert op 26-02-2004 19:51 ]

[BtM909]

Dit is toch echt verplichte kost om te lezen
[rml][ css] boxmodel gedonder en aanpakproblemen[/rml]

[Verwijderd]

Hoogte/breedte, margin en padding tegelijk aan elementen meegeven kan uiteraard wel, maar je moet weten wat je doet.

Overal geef je een breedte en een padding op. Als je nou eens alleen de navigatie container een breedte meegeeft, dan kun je de rest met alleen margin en padding doen.

[r0bert]

Ik heb hem wat aangepast, zie hier. Hij lijkt nu aardig gelijk, maar volgens mij zitten er nog wat kleine verschilletjes en ik weet ook niet of ik het allemaal netjes opgelost heb. Nog iets waar ik rekenining mee kan/moet houden? Verbeteringen? Tips? Alles is welkom

[Justice]

Tip: testen in Opera. Je manier van coden zorgt daar voor minder hoge items blijkbaar.

[T-MOB]

Ik heb het even nagemeten... De verschillen die je ziet zijn optisch bedrog. Het enige echter verschil zit hem in het lettertype: Mozilla rendert de letters iets kleiner / dichter op elkaar. Daardoor lijkt de oranje balk en de blauwe knoppen breder.

Verdere dingen om op te letten, het enige waar ik zelf nog wel eens ruzie mee heb zijn default margins voor bepaalde objecten die verschillen per browser. Een form tag krijgt dan opeens een margin in bv. IE. Dan zoek je je dus suf naar fouten in je CSS.... Ach ja, frustraties

[r0bert]

Justice schreef op 26 februari 2004 @ 16:57:
Tip: testen in Opera. Je manier van coden zorgt daar voor minder hoge items blijkbaar.

en mijn javascriptje om de items van kleur te laten veranderen bij een mouseover lijkt ook niet te werken, hoewel ik in de JS-console geen foutmeldingen krijg

T-MOB schreef op 26 februari 2004 @ 17:07:
[..] Mozilla rendert de letters iets kleiner / dichter op elkaar. Daardoor lijkt de oranje balk en de blauwe knoppen breder. [..]

De breedtes kloppen iig aardig en vind de gelijkenis overtuigend genoeg geloof ik (IE <-> Mozilla). Aan die letters valt denk ik ook weinig te doen (ikzelf zie het verschil niet eens).

[jonggoud.nl]

In ieder geval gebruik ik in de CSS altijd:

Cascading Stylesheet:

* {
margin: 0px;
padding: 0px;
}

Dit zorgt ervoor dat overal een padding/margin van 0px is. Als je ergens meer/minder wilt kan je het daar aanpassen.

En verder voor breedtes etc. geen px gebruiken maar em?? (alhoewel ik dat niet zeker weet)

[ Voor 18% gewijzigd door jonggoud.nl op 26-02-2004 17:56 ]

[Verwijderd]

jonggoud.nl schreef op 26 februari 2004 @ 17:53:
In ieder geval gebruik ik in de CSS altijd:

Cascading Stylesheet:

* {
margin: 0px;
padding: 0px;
}

Dit zorgt ervoor dat overal een padding/margin van 0px is. Als je ergens meer/minder wilt kan je het daar aanpassen.

Waarmee je meteen het hele nut van de standaard stylesheet van de user agent teniet doet, en jezelf veel werk op de hals haalt...

[r0bert]

Met een border-box, worden Mozilla en Opera gelijk, maar maar IE de elementen weer te hoog (+/- 1 a 2px?)

kan dat misschien met de positie van de border te maken hebben (buiten / binnen element)? En hoe kan ik dat oplossen

Edit:
Heb het al voor elkaar.. Heb de height (zonder CSS2 selector) op 2px kleiner gezet (border = 2 x 1px). Opera en Moz vangen later de height van de CSS2 selector op en zo komt alles op zijn plek

[ Voor 70% gewijzigd door r0bert op 26-02-2004 18:41 ]

[CrashOne]

Ze zijn nu echt exact gelijk in mozilla en IE.


Dit zou ik anders doen:

code:

    box-sizing:         padding-box;
    -moz-box-sizing:    padding-box;

Dit zou ik niet gebruiken als ik jou was, ik zou het zo oplossen:

code:

element{
/* ie */
}
body>element{
/* non-ie */
}

Het switchen van box types omdat IE het fout doet, waarom moet de rest dan afwijken en het ook fout doen?

[ Voor 6% gewijzigd door CrashOne op 26-02-2004 19:30 ]

[r0bert]

deze pagina is de laatste..

zoals je ziet gebruik ik daar een border-box, zo weet ik iig wat beide browsers gaan doen (nouja, "weet"). Is dat niet goed zo dan?

[CrashOne]

Er is niks verkeerd aan, maar je laat andere browsers nu het box model van IE hanteren. Je kan IE ook andere waardes voeren, waardoor goede browsers gewoon het juiste box model kunnen blijven hanteren.

Wat raar is aan het IE boxmodel, als een box 100% breed is (dus tot tegen de randen van het browser window), waar laat je de margins en paddings dan? In de box, wat het juiste box model altijd al doet.

Ik zou dus altijd het w3c box model hanteren.

[Verwijderd]

CrashOne schreef op 26 februari 2004 @ 20:11:

Wat raar is aan het IE boxmodel, als een box 100% breed is (dus tot tegen de randen van het browser window), waar laat je de margins en paddings dan? In de box, wat het juiste box model altijd al doet.

Van die 100% breedte gaan eerst de margins af, de rest wordt compleet gebruikt door het element. En het is niet 100% van het venster, maar 100% van de containing box minus de marges. En dat is dan de buitenkant van de border.

[drm]

Weet je wat ik nou zo jammer vind? Dat hier zo'n beetje elke dag wel een topic voorbijkomt en heel veel mensen roepen hoe je html moet gebruiken, en hoe je CSS daar op toepast. Wederom zien we hier een kluit html/css/js dat wars is van alle semantiek.

Nu wil ik helemaal niet de topicstarter afzeiken, maar ik vind gewoon dat we op dit forum dat veel beter moeten kunnen. Users die hier komen kunnen toch wel een beetje basiskennis hebben van hoe de dingen horen ?

Nou ben ik het eigenlijk gewoon zat en ga ik aan crisp voorstellen dat dit topic in de W&G FAQ komt en dat iedereen die dit niet gelezen heeft gewoon een ban krijgt ofzo We kunnen wel bezig blijven goede html te propageren, maar kennelijk heeft het geen enkele zin.

Bij deze dus, hoe je een pagina als deze in semantisch correcte HTML opzet:

http://gerard.yoursite.nl...jf-nou-eens-correcte.html

Geloof mij nou maar dat als je jezelf dat soort dingen gewoon aanleert dat het het leven een stuk eenvoudiger kan maken.

[BtM909]

drm schreef op 26 februari 2004 @ 22:02:
...

Lol @ code

[CrashOne]

drm schreef op 26 februari 2004 @ 22:02:
Weet je wat ik nou zo jammer vind? Dat hier zo'n beetje elke dag wel een topic voorbijkomt en heel veel mensen roepen hoe je html moet gebruiken, en hoe je CSS daar op toepast. Wederom zien we hier een kluit html/css/js dat wars is van alle semantiek.

Nu wil ik helemaal niet de topicstarter afzeiken, maar ik vind gewoon dat we op dit forum dat veel beter moeten kunnen. Users die hier komen kunnen toch wel een beetje basiskennis hebben van hoe de dingen horen ?

Nou ben ik het eigenlijk gewoon zat en ga ik aan crisp voorstellen dat dit topic in de W&G FAQ komt en dat iedereen die dit niet gelezen heeft gewoon een ban krijgt ofzo We kunnen wel bezig blijven goede html te propageren, maar kennelijk heeft het geen enkele zin.

Bij deze dus, hoe je een pagina als deze in semantisch correcte HTML opzet:

http://gerard.yoursite.nl...jf-nou-eens-correcte.html

Geloof mij nou maar dat als je jezelf dat soort dingen gewoon aanleert dat het het leven een stuk eenvoudiger kan maken.

* CrashOne eens is

[Verwijderd]

Van die 100% breedte gaan eerst de margins af, de rest wordt compleet gebruikt door het element. En het is niet 100% van het venster, maar 100% van de containing box minus de marges. En dat is dan de buitenkant van de border.

Wacht even, hier klopt iets niet. IE box model is zo: "margin-left + width + margin-right". padding, border zitten bij (in) de width.

Ik ben ook van mening dat je andere browsers niet IE z'n box model moet laten gebruiken, ik ben iig van mening dat je moet wachten totdat bepaalde WD van het W3C, CR bereikt hebben.

Opsomming van de meeste belangrijke dingen betreffende het box model: http://annevankesteren.nl/archives/2004/02/box-model

[Verwijderd]

(Een kleine off-topic, IE6.0 in standard compliant mode ondersteund wel degelijk het stijlen van het BODY element)

[Clay]

Je hoeft helemaal geen last te hebben van boxmodel, als je maar zo css't dat je er geen last van kan hebben. Dat betekent dat je:

• Elementen niet zowel dimensies als padding of border geven. Block level elementen rekken zich horizontaal toch wel uit, en hoogte kan je op andere elementen zetten of weglaten. Dat is nml. een dwangmatigheid van table-denken die vergeten moet worden
• Elementen (voor je layout oid) die wel een width/height moeten hebben geen padding of border geven. Die heb je meestal toch alleen voor content nodig, en borders kan je vaak met bg-images oplossen, dan heb je ook meteen voordeel van tilability.

Dat klinkt misschien als een mega-beperking, maar in de praktijk is dat niet zo en heb je er zelfs alleen maar voordelen van. Soms moet je net 1 divje meer voor je layout inzetten, maar dat is imo een klein offer. Verder blijft dit een geniaal artikel.

[X-Lars]

drm schreef op 26 februari 2004 @ 22:02:
[...] Bij deze dus, hoe je een pagina als deze in semantisch correcte HTML opzet: http://gerard.yoursite.nl...jf-nou-eens-correcte.html

Geloof mij nou maar dat als je jezelf dat soort dingen gewoon aanleert dat het het leven een stuk eenvoudiger kan maken.

* X-Lars vindt wel dat de elementen "wrapper" en "content" ID's zouden moeten zijn en geen DIV's, omdat ze maar één keer voor kunnen/horen (te) komen.

@drm & Clay: nuttig! En dat moet inderdaad in de FAQ. Ik ben relatief nog een nieuwkomer, ook op dit gebied, maar het valt mij ook op dat dit soort topics wel erg vaak voorbij komt. Ik denk dat, zoals Clay al aangeeft, veel mensen moeite hebben met de overschakeling van "table-denken" naar het correcte CSS-verhaal (including me).

offtopic:
Ook hier zie ik weer de behoefte aan iets als een [rml][ algemeen] Wiki Wiki[/rml], maar daar wordt dus al aan gewerkt (nou weet ik het topic niet meer, maar er werd laatst gemeld dat er achter de schermen wordt gewerkt aan iets als een knowledge base.)

[ Voor 4% gewijzigd door X-Lars op 27-02-2004 10:22 ]

[r0bert]

Ik heb nog een probleempje:

Ik wil zo'n set van elementen maken, een soort table:

code:

elm 1
+---+---+---+---+---+
|   |   |   |   |   |
|   |   |   |   |   |
+---+---+---+---+---+

elm 2
+---+---+---+---+---+---+
|   |   |   |   |   |   |
|   |   |   |   |   |   |
+---+---+---+---+---+---+

elm 3
+---+---+---+---+
|   |   |   |   |
+---+---+---+---+

Voor iedere cel gebruik ik een <DIV>. Alle DIVjes moeten volledige hoogte krijgen, dus als het ware 100% van het parent element. Verder moet tussen iedere 2 cellen een border komen.

Nu heb ik 2 oplossingen om het goed crossbrowser op te lossen volgens mij:

• Een background gebruiken om de border en volledige lengte van een cel te faken
• Gebruik van een table

Tables zijn er voor bedoeld, maar ik hoor haast niet anders dat de mensen voor het gebruik van DIV's zijn ipv van TABLE's..

[ Voor 23% gewijzigd door r0bert op 27-02-2004 11:05 ]

[X-Lars]

r0bert schreef op 27 februari 2004 @ 10:53:
Tables zijn er voor bedoeld, maar ik hoor haast niet anders dat de mensen voor het gebruik van DIV's zijn ipv van TABLE's..

Het ligt er dus aan wat je ermee wilt, tabulaire data hoort gewoon in een table. Maar het lijkt me dat jij dat niet bedoelt, dus check dan eens links van Clay hierboven etc. Hierover moet je genoeg kunnen vinden.

[r0bert]

Ik heb de links gecheckt en staan ook wel oplossingen, zoals het gebruik van een background-image, die ik hierboven ook al genoemt heb. Maar dat gaat niet echt relaxed, want die background-image moet dan ook alle borders faken, links en rechts, en repeaten (dus krijg je dubbele border of links/rechts geen border)

[X-Lars]

er is geen probleem of er is wel een oplossing voor

probeer eens dit soort zoekacties (volgens mij staat hier een heleboel tussen):
[google=css div table]

[disjfa]

het is maar een ideetje die ik een keer van clay heb gekregen maar je hoeft de border niet per direct aan heet hoofdelement te geven.....

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>ja het kan</title>
</head>
<style>
html, body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}

div{
    position:absolute;
    width:200px;
    background:green;
    top:150px;
    left:100px;
}
p{
    border:1px solid blue;
    margin:0px;
    padding:2px;
}
</style>
<body>
<div><p>hallo<br /><br /> er zijn meer oplossingen voor.</p></div>
</body>
</html>

en zoals men al zegt..... een table is gemaakt voor tabulaire data. Ga niet tabulare data outputten in een berg divs. Zoals drm al zei. Gebruik de elementen waarvoor ze gemaakt zijn.

[ Voor 24% gewijzigd door disjfa op 27-02-2004 11:11 ]

[drm]

Anne:
(Een kleine off-topic, IE6.0 in standard compliant mode ondersteund wel degelijk het stijlen van het BODY element)

Hm, idd. Zo leer ik ook nog wat

X-Lars:
* X-Lars vindt wel dat de elementen "wrapper" en "content" ID's zouden moeten zijn en geen DIV's, omdat ze maar één keer voor kunnen/horen (te) komen.

Nee, ben ik het niet mee eens. Je beperkt jezelf op die manier alleen maar. Je zou voor het idee best meerdere wrappers achter elkaar kunnen zetten met weer aparte nav en content. (In dit voorbeeld is de stylesheet er zelfs prima geschikt voor). Er is geen enkele reden je elementen een ID te geven tenzij je ook met scripting aan de slag wilt. Dan nog moet je imo meer gebruik maken van this en nodeverwijzingen binnen het DOM (nextSibling, previousSibling, parentNode, childNodes...)

offtopic:
er werd laatst gemeld dat er achter de schermen wordt gewerkt aan iets als een knowledge base.)

offtopic:
staat in MED