CSS IE probleem

[sjoerdth]

Ik heb een pagina bestaande uit 2 divs waarvan 1 (id=right) een float:right heeft en een van width:131px, de div aan de linkerkant (id=left, met de witte achtergrond) bevat ook 2 divs en zou 628px moeten kunnen beslaan. Deze div bevat ook weer 2 divs: wederom 1 met een float:right (class=subright rode achtergrond) en de linker (class=subleft rode achtergrond). Deze hebben beiden een width van 131px en aan de rechterkant een margin:1px, samen dus 628px. Nou past (en klopt) het in firefox wel, maar in IE werkt het alleen wanneer ik het geheel 2 pixels smaller maak.

Ik heb echt alles want ik zou kunnen bedenken geprobeerd om dit probleem op te lossen, maar nu ik een nervous breakdown nabij ben wend ik mij tot anderen.

voor de duidelijkheid nog een keer de links:
pagina zoals hij hoort te werken
css zoals hij hoort te werken
pagina zoals hij in IE past
css zoals hijin IE past

[Zoefff]

Dat komt omdat IE de border (2 keer 1px) niet bij de totale breedte van de box optelt, terwijl FF dat wel doet (zoals het hoort).

Oplossing is een CSS hack waarmee je kan aangeven dat de box in IE 2px minder breed moet zijn.

[equationunequal]

http://tantek.com/CSS/Examples/boxmodelhack.html

[Sappie]

Heeft nix met verschillende box-models te maken. Hij gebruikt immers een valide DTD, zodat zowel IE als FF in hetzelfde standards compliant box-model renderen. Lijkt mij eerder de 3pixel bug. Verder is er ook sprake van het feit dat IE margins van gefloate elementen dubbel rekent (dat wil zeggen margin-left wordt dubbel geteld blij float: left en margin-right bij float: right). Ik heb nu geen tijd meer (klaar met stage voor vandaag ), maar zal strax ff kijken.

Misschien los je het al op door het blauwe gedeelte ook "float: right;" te geven.. wel moet je de floats nog wel clearen dan.

Verder begrijp ik het nut van de wrapper niet helemaal. Je geeft daarmee slechts een border aan de "container", wat je dus net zo goed met "border" kan doen.

[sjoerdth]

Verder begrijp ik het nut van de wrapper niet helemaal. Je geeft daarmee slechts een border aan de "container", wat je dus net zo goed met "border" kan doen.

Dit is een uitgeklede versie met alleen het probleem erin zodat het wat overzichtelijker is allemaal. Maar om de situatie zo goed mogelijk weer te geven heb ik die wrapper er ook even bij gedaan.

Ben benieuwd waar je nog op kan komen, dat van die dubbele margins wist ik iig niet.

[crisp]

double margin bug kan je oplossen door je floats ook een display:inline te geven

[sjoerdth]

Door die blauwe een float: right te geven lijkt het idd te werken.