[CSS] margin pixels verschillend met browser :?

[Booster]

Ik liep tegen het volgende aan:
Op een pagina die ik aan het maken ben maak ik gebruik van enkele DIV's.

2 van deze DIVjes moeten naast elkaar op een pagina komen. De ene (het menu, onzichtbaar in het voorbeeld) heb ik float: left; gemaakt. De DIV daarnaast (de content container zeg maar) is float: right;.

So far, so good.

Nu wil ik de DIV met float: right; graag wat van de rechterkant hebben, dus geef ik de DIV een margin-right: 4px; mee. Logisch, leek mij.
Maar wat schetst mijn verbazing: IE renderd dit meteen anders dan Mozilla.

Het exacte verschil is dat Mozilla daadwerkelijk 4px afstand neemt, maar IE neemt het dubbele.

Ik maakte de volgende screenies:
• Internet Explorer 6 SP1


• Mozilla 1.3.1-stable


• Voorbeeldje:
http://dev.mindcontrolled.nl/got/float-marginright/

De waarschijnlijk relevante CSS en HTML:

Cascading Stylesheet:

div.itemblock {
    color: black;
    background-color: white;

    float: right;

    width: 470px;

    border-width: 1px;
    border-color: black;
    border-style: solid;

/*  margin-left: auto;*/
    margin-top: 4px;
    margin-right: 4px;
}

HTML:

        <div>
            <div class="itemblock">
               <p>Testtekst<br>regel2<br>regel3</p>
            </div>
        </div>

De margin-left op auto zetten heeft ook niet mogen baten.

Is dit een fout van mij of een louzy bug in IE?

[coubertin119]

Mozilla en IE6 hebben een ander boxmodel, daardoor durft zoiets wel eens verschillen. Zorg ervoor dat het in IE6 werkt, en volg dan: http://www.xs4all.nl/~ppk/css2tests/box.html.

[Booster]

Dit heb ik geprobeerd, echter dit leek niet uit te maken. (mozilla maakt de box dan 2px minder wide ofzo, maar margin-right blijft intact)

Zoals je kunt zien heb ik het stukje voor het veranderen van de boxmodels ook gecomment in mijn CSS staan:

Cascading Stylesheet:

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

Zowiezo, boxmodel of niet, het is vreemd dat een browser het dubbele aantal pixels voor een margin pakt

[edit]
Zowiezo vind ik het veranderen van de boxmodel in Mozilla niet echt een oplossing. Het werkt wellicht aardig in Mozilla welliswaar, maar Safari of een andere browsers die W3C complaint is wat boxmodel betreft zal er niet op reageren.

[edit-2]
Zojuist kwam ik dit tegen:
http://www.positioniseverything.net/bughouse.html

Ik zal eens proberen het te begrijpen, misschien dat ik het opgelost krijg.

[ Voor 35% gewijzigd door Booster op 14-06-2003 22:28 ]