[CSS] Margin 3px is 6px in IE

[Excrusiator]

Ik heb mijn website compleet opgebouwd uit div elementen die ik met behulp van mijn css file positioneer en opmaak.
Op het moment zit ik met het probleem dat de rand die ik aan de linker kant van mijn website heb 6px is en niet 3 px in internet explorer. In Mozilla en Opera is deze wel de gewenste 3px breed.
Wat mij wel is opgevallen tijdens het debuggen van mijn css code is dat Internet Explorer per pixel die ik opgeef niet 1 pixel erbij telt maar 2 pixels.

Ik heb geen idee waar dit door veroorzaakt wordt. Het ligt niet aan fouten in mijn xhtml en css code (komt door de w3c validator). Het zit hem waarschijnlijk in de interpretatie van mijn css code. Ik weet alleen niet waar het verschil zit (of ik kijk ergens gewoon overheen).

Resultaten van de verschillende px instellingen:

IE 0px:


IE 1px:


IE 3px:


Mozilla 0px:


Mozilla 1px:


Mozilla 3px:



De gebruikte xhtml code:
http://www.x-pc.info/zooi/got/margin-index.txt


De gebruikte css code:
http://www.x-pc.info/zooi/got/margin-stylesheet.txt


Ik hoop dat het gewoon iets simpels is waar ik overheen kijk. Dit is de eerste keer dat ik een website compleet opbouw met behulp van div elementen met alleen css code opmaak en ik heb er een paar dagen op gezeten om alles cross-browser compatible te maken (zat ergens rond de 20 interpretatie problemen). En ook nog eens user proof, geblaat user staat er niet voor niets.

[RM-rf]

code:

<div class="border">
<div class="leftmenufill">
<div class="leftmenucell">
<div class="leftmenu">
    <a class="leftmenulink" href="/index.php">Frontpage</a><br />
    <a class="leftmenulink" href="/article.php?aid=listart">Articles</a><br />
</div>

ik neem aan dat je dit stukje bedoelt, daar nest je vier classes: border, leftmenufill, leftmenucell en leftmenu

leftmenu heeft een padding van 6px, .leftmenufill heeft een margin-left van 1px, leftmenucell heeft geen gedinieerde margin danwel padding.

ik vermoed dat de ongedefinieerde margins wel eens het probleem kunnen zijn, msie zal die padding mogelijk inheriten van vorige en dus met twee genestte classes opeens een margin van 6 px maken voor één class met een gedefinieerde margin van 3px en één zonder gedefinieerde.

oplossing is mogelijk om waar je specifiek margin:0px en padding:0px wilt hebben dit ook als dusdanig te definieren.

beter is eigenlijk om je code wat te optimaliseren, je lijkt wel een div te gebruiken voor elk apart lijntje; met css properties als border, padding en margin kun je vel schonere code bereiken (de code valideert misschien, maar schoon is ie niet, te veel genestte elementen)
eigenlijk is het ook de vraag waarom je voor een duidelijke table-opzet nu geen table gebruikt, desnoods in een gepositioneerde div?

verder mis ik wel de DOCTYPE in je gepostte code, validator geeft je de mogelijk vooraf bij validatie de doctype te definieren, maar browsers kunnen dat niet, voor juiste en non-quirky weergave in msie6 zal je wel een doctype moeten hebben

[Dennis]

t is leuk als je de IE versie vermeld, er is een aanzienlijk verschil tussen 5.5 en 6 bijvoorbeeld...

[Excrusiator]

Op zondag 14 april 2002 11:55 schreef ddc het volgende:
t is leuk als je de IE versie vermeld, er is een aanzienlijk verschil tussen 5.5 en 6 bijvoorbeeld...

Internet Explorer versie 5.5

De doctype had ik nog niet toegevoegd omdat ik er een probleempje in Mozilla mee had. Die is ondertussen opgelost en heb ik dus toegevoegd (ik moet ook nog een character encoding toevoegen).

Wat RM-rf zegt over de padding kan goed kloppen. IE heeft er een handje van om padding voor alle geneste elementen te gebruiken. Dus als je padding 3 opgeeft voor een omvattend div element dat alle onderliggende div elementen ook die padding meekrijgen. Heb ik ook een tijdje terug mee zitten te rotzooien.

Maar ik ga eens kijken met wat jij zegt over ongedefinieerde margins en paddings of daar het probleem in zit.

[Dennis]

Op zondag 14 april 2002 12:05 schreef Excrusiator het volgende:
Internet Explorer versie 5.5

Dat verklaart een hoop. Probeer het eens in 6 zou ik zeggen, die rendert vrijwel alles hetzelfde als Mozilla. 5.5 gaat nog heel anders om met margins. Het beste kun je een aparte stylesheet maken voor IE5.5, en een andere voor IE6 / Moz / Opera (Opera - die ik zelf nooit test).

[Excrusiator]

Ik ben over de schuldige gestruikelt toen ik aan het experimenteren was met tables. De schuldige is het css commando float: left; die in de css opmaak staat voor .leftmenufill. Als ik de float: left; weghaal wordt de margin door IE 5.5 goed geinterpreteerd. Alleen verlies ik dan de leftmenufill div in mozilla (leftmenufill zorgt ervoor dat er een blauwe balk is onder het menu links op mijn website).

Dus om een lang verhaal kort te maken:
Ik kan mijn website helemaal opnieuw gaan opbouwen of ik kan gaan beginnen met verschillende css files.

Voor de laatste optie voel ik eigenlijk niet zo veel. Ik weet dat het gewoon mogelijk moet zijn om met een css file de layout te maken die ik wil.

Alleen zit ik dus nu met de vraag. Wat kan ik het beste omzetten naar tables en wat kan ik het beste met div elementen doen?
Ik wil dezelfde layout uiteindelijk maken die ik nu heb. Mijn website is op het moment als volgt opgebouwd:
-De website wordt gecentreerd met behulp van een div die alles omvat.
-De bovenste balk op mijn website is een aparte div (met div elementen voor de tekst goed te centreren en te positioneren)
-het linkermenu en het content gedeelte zijn rechts en links geplaats binnen een omvattende div
-het geblaat van een user gedeelte is hetzelfde opgebouwd als het gedeelte van mijn site met het menu en de content. Met het menu gedeelte eruit gehaald.
-de onderste balk op mijn website is ook weer een aparte div.
Deze constructie zorgt ervoor dat als een user iets post dat voorbij de 647px gaat het div element gewoon groter wordt gemaakt. Zo verandert alleen de layout voor de post van de user en niet voor de gehele pagina (zelfde idee als hier op got, alleen 'groeit' mijn website aan de rechterkant en blijft de positie van de linkerkant hetzelfde als van de andere div elementen).

Tips zijn van harte welkom om zo'n probleem als ik nu ben tegenkomen te voorkomen. Ook om de code zo net mogelijk te houden. Ik voel er niet veel voor om net voordat ik klaar ben opnieuw te beginnen.