[CSS/Box-Model]Vreemde behandeling padding door FF...of niet

[sjaakaq]

Ik heb deze site gemaakt d.m.v. de volgende CSS:

Cascading Stylesheet:

body
{
width: 100%;
background-color: #fff;
margin: 2px;
margin:5px 0px; 
padding:0px;
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}


#inhoud
{
font-family: georgia, arial; 
font-size: 12px;
color: #000;
height: 500px;
width: 700px;
background-color: #AFE583;
margin: 30px auto auto;
padding: 5px;
position: relative;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
}

#tabs
{
height: 25px;
width: 700px;
padding: 0px;
margin: 0px auto auto;
background-color: #fff;
position: relative;
margin-top: -1px;
background-image:url("line.gif"); 
body-overflow: hidden;
}

#tabs a
{
text-decoration: none;
}

IE en Opera renderen em zoals ik wil; de onderste layer staat mooi onder de bovenste en alles sluit aan. Deze zijn beide (700px+2*1px aan border)=702px breed (zie CSS) en zouden dus mooi aan moeten sluiten. FireFox doet echter iets vreemds (of waarschijnlijk: logisch aangezien het de meest correcte browser is); door de padding van 5 van #inhoud, wordt #inhoud niet 702 maar (702+(2*5))=712px breed. Waardoor de onderste layer, met padding 0, niet meer aansluit. Nu kan ik natuurlijk de padding van #inhoud op 0 zetten, maar dan staat de tekst veel te dicht tegen de rand. Ik wil graag dat het er goed uitziet in IE, Opera én FireFox alleen ik weet niet hoe...

Nu heb ik gezocht via Google op "Differences box model between Internet Explorer and FireFox" en dergelijke, maar ik vond alleen sites met daarin uitleg van het boxmodel, en iig géén oplossing voor dit probleem. Ook op GoT vind ik niks...

Wie helpt?

[Verwijderd]

Padding behoort, net als de border, er gewoon bij opgeteld te worden. Dat IE echter wel de border, maar niet de padding erbij optelt klinkt nogal raar. Een soort mix tussen quirks en standard mode?

Uitleg:

- http://www.hut.fi/u/hsivonen/doctype.html
- http://annevankesteren.nl/archives/2004/02/box-model

[NMe]

Je link is dood:

The page cannot be found

Kun je het niet oplossen door het gebruik van marges in plaats van padding?

[Verwijderd]

hij zal wel: http://www.supersop.nl/test_site/index.html
bedoelen net als in de vorige topics
[rml][ CSS]Positionering DIV's zonder absolute DIV?[/rml]
[rml][ CSS]Horizontale centrering alleen in IE?[/rml]

[sjaakaq]

Verwijderd schreef op 16 augustus 2004 @ 20:51:
Padding behoort, net als de border, er gewoon bij opgeteld te worden. Dat IE echter wel de border, maar niet de padding erbij optelt klinkt nogal raar. Een soort mix tussen quirks en standard mode?

Uitleg:

- http://www.hut.fi/u/hsivonen/doctype.html
- http://annevankesteren.nl/archives/2004/02/box-model

Hmm dus IE en Opera doen het allebei fout?

nMe84: Maar die padding is toch nodig om te zorgen dat de tekst niet te dicht op de rand staat? Als ik daarvoor margin gebruik, wordt toch alleen de afstand tussen de DIV en het browservenster groter? En niet tussen rand DIV en tekst?

[NMe]

leokennis schreef op 16 augustus 2004 @ 21:10:
nMe84: Maar die padding is toch nodig om te zorgen dat de tekst niet te dicht op de rand staat? Als ik daarvoor margin gebruik, wordt toch alleen de afstand tussen de DIV en het browservenster groter? En niet tussen rand DIV en tekst?

Niet als je een extra div erin zet die je een marge geeft.

Maar de oplossing van Anne is uiteraard veel beter.

[sjaakaq]

Hmm het ligt denk ik aan het (tot nu toe nog) ontbreken van een Doctype; als ik er een xhtml1.0 doctype bij zet dan doen IE en Opera hetzelfde als FF; geen doctype betekent voor FF dus blijkbaar dat ie er automatisch xhtml1.0 van maakt.

Maar de enige oplossing is dus om de bovenste layer 10px smaller te maken, of de onderste 10 breder? (Of nog een layer in de binnenste layer, maar dat lijkt me net iets te omslachtig )

[Verwijderd]

zet je tekst in een <p> en geef die wat ruimte ipv meteen de tekst in een DIV te knallen.

[sjaakaq]

Wat is daarvan het voordel t.o.v. "direct knallen"?

[crisp]

Het verbaast me dat je hier niets over hebt kunnen vinden in W&G; het zoekwoord 'boxmodel' moet je toch aardig wat topics opgeleverd hebben (als de search het even doet).
IE6 met volledig doctype (geen idee of dat ook noodzakelijk strict moet zijn) rendert in standards compliant mode en doet het dan inderdaad zoals het hoort, Opera is een IE-wannabee en zal dus daarom ook wel soortgelijk gedrag vertonen.
Bedenk echter dat IE < 6 dat soort gedrag niet vertoont; dat is ook de reden dat ik IE toch meestal in quirks dwing en dit soort dingen gebruik:

Cascading Stylesheet:

#mydiv {
  width: 100px;
  padding: 10px;
}
#container>#mydiv {
  width: 80px;
}

anyway, je weet nu waar je op moet zoeken

edit: en FF "maakt" er geen XHTML van, FF past gewoon altijd netjes het W3C-boxmodel toe.

[ Voor 9% gewijzigd door crisp op 16-08-2004 22:32 ]