[css]border staat buiten de box in IE

[Rowanov]

Ik kwam tijdens het bouwen van een website het volgende probleem tegen. In Firefox staat de border netjes binnen de box (dwz; de achtergrond van de box loopt door tot de buitenrand van de border). In IE daarentegen loopt de border buiten de achtergrond. Ik heb de search gebruikt, maar daar kwam ik alleen maar andere boxmodel problemen tegen.

De betreffende code:

Cascading Stylesheet:

#container {
    display: block;
    width: 770px;
    margin: 0px auto;
    text-align: left;
    padding: 0px;
    background-color: #FDFFD1;
    top: 0px;
    border-right: 6px dashed #FF0000;
}

De container is gewoon een div waar de rest van de inhoud in staat. Hier staat de testcase online.

[JayVee]

Volgens mij kan je daar niets tegen doen. Denk dat het niet duidelijk genoeg in de spec staat en hier keuzes (bewust of onbewust) gemaakt zijn. Ik moet zelfs zeggen dat ik die van IE intuitiever vind.

[Rowanov]

Volgens de boxmodel specs die ik heb doorgenomen en de oude topics die ik hier gevonden heb, hoort hij er bij IE juist in te staan. Vreemd dus. De enige workaround die ik me nu kan bedenken, want ik wil dat effect zoals in Firefox bereiken, is om nog een tweede container div te maken om die vervolgens de achtergrond te laten vullen. Heeft er iemand een uitleg van wat er fout gaat en hoe het mogelijk op te lossen is?

[Rowanov]

Ik mag nu geloof ik een kickje doen, 24 zijn bijna om!

[Thijsmans]

Misschien een voor de hand liggende vraag, maar die moeten ook gesteld worden

Heb je wel de box-models meegegeven?

Cascading Stylesheet:

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

offtopic:
Vuile neppert, je had nog bijna een uur te gaan!

[ Voor 29% gewijzigd door Thijsmans op 06-01-2005 01:14 ]

[Rowanov]

Op de een of andere manier gebeuren er dingen en dat is goed want dat betekent dat het box-model wel geinterpreteerd wordt. Zo'n beetje alles in mijn layout gaat aan de wandel, op de border na, die blijft buiten de achtergrond staan. Het mag dan intuitief zijn dat de border daar staat, maar volgens de specs hoort het niet! Ik heb vervolgens ook nog geprobeerd er een andere doctype aan toe te kennen (strict ipv. loose), maar dat levert geen zichtbaar verschil op.

Goed na een reduced testcase en het bekijken van andere websites blijkt dat IE het boxmodel op dit punt helemaal verkeerd interpreteert. Ik ga nu maar een oplossing bedenken, mocht iemand er een weten, dan hoor ik het graag.

edit:

Prammenhanger: Ik zei bijna

[ Voor 5% gewijzigd door Rowanov op 06-01-2005 12:09 ]

[InZane]

Rowanov schreef op donderdag 06 januari 2005 @ 12:08:
Op de een of andere manier gebeuren er dingen en dat is goed want dat betekent dat het box-model wel geinterpreteerd wordt. Zo'n beetje alles in mijn layout gaat aan de wandel, op de border na, die blijft buiten de achtergrond staan. Het mag dan intuitief zijn dat de border daar staat, maar volgens de specs hoort het niet! Ik heb vervolgens ook nog geprobeerd er een andere doctype aan toe te kennen (strict ipv. loose), maar dat levert geen zichtbaar verschil op.

Goed na een reduced testcase en het bekijken van andere websites blijkt dat IE het boxmodel op dit punt helemaal verkeerd interpreteert. Ik ga nu maar een oplossing bedenken, mocht iemand er een weten, dan hoor ik het graag.

edit:

Prammenhanger: Ik zei bijna

De oplossing staat één post boven die van jou lijkt me toch?

[Rowanov]

Zie doorgestreepte gedeelte, heb het dus al geprobeerd. Sorry voor de onduidelijkheid. Ik begin langzamerhand tot de conclusie te komen dat je IE niet zover kan krijgen om de achtergrond tot onder de border te laten doorlopen.

[T-MOB]

De enige echte manier om van box-model probelemen af te komen is het vermijden van padding en borders op elementen waarvan je een breedte opgeeft. Dat klinkt heel vervelend maar valt als je het eenmaal gewend bent best mee. Voor jouw border probleem zou dat neerkomen op de workaround die je zelf al had bedacht. Een extra container er omheen.

Een andere workaround zou kunnen zijn dat je een background zet op je body met dat stukje geel wat je nu mist in IE. Nadeel hiervan is dat er een pixelbugje zit in IE qua het centreren van block-level elementen en achtergrondplaatjes..

edit:
Maar dat zou je kunnen oplossen door de hele dashed line als achtergrondplaatje op te je body te zetten. IE gebruikers hebben dan af en toe een border van 5px ipv 6px. Dat lijkt me niet heel schrijnend.

[ Voor 15% gewijzigd door T-MOB op 06-01-2005 14:26 ]

[Rowanov]

Hartelijk dank voor deze oplossingen, ik was inderdaad ook op het punt aanbeland om maar gewoon een achtergrond in de div te gooien voor de dashed line. Een extra container vind ik net iets te smerig als oplossing. Bij deze, case closed dan maar!

[Verwijderd]

dit is geen boxmodel bug, is gewoon een verkeerde (oude) interpretatie van de specs.

Als ik me goed herinner zat in css 2 de background niet tot onder de border, in css 2.1 wel

[Rowanov]

Zolang dat door de meeste browsers dramatisch wordt geinterpreteerd ziet mijn layout er niet naar behoren uit dus wodt het een achtergrond.

[Clay]

't is maar net hoe het geimplementeerd is. De CSS 2 spec is er niet zo duidelijk over. Daaruit zou ik eerder afleiden dat de border buiten de achtergrond moet staan. De CSS 2.1 spec is er heel duidelijk over, background hoordt ook achter de border te staan:

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

^{en zie ook de afbeeldingen}

En aangezien IE CSS 1 nog niet eens volledig doet ...

Overigens vind ik er wel een nadeel aanzitten. Als je een background afbeelding hebt EN een border zou ik zelf niet willen dat die afbeelding al onder de border begint... Maar "gelukkig" mag je volgens de CSS 3 spec zelf kiezen over 10 jaar ofzo.

[ Voor 23% gewijzigd door Clay op 06-01-2005 20:23 ]

[Rowanov]

Ik ben wel bereid er op te wachten, maar de mensen voor wie deze site bedoeld is waarschijnlijk niet!

[ Voor 20% gewijzigd door Rowanov op 06-01-2005 20:28 ]

[Woudloper]

Rowanov schreef op donderdag 06 januari 2005 @ 20:27:
Ik ben wel bereid er op te wachten, maar de mensen voor wie deze site bedoeld is waarschijnlijk niet!

* Woudloper ziet niets!? Link is dood....

[Rowanov]

Dat klopt ook, is weer eens ff verplaatst! Maar probleem is wel zo'n beetje verholpen.