[CSS & FF]margin h1 gaan naar container - Softwareontwikkeling

woensdag 24 januari 2007 14:58

Acties:

Verwijderd

Topicstarter

Ik ben al vaker iets wazigs tegengekomen in FireFox en Opera.

Waarom gaat de margin van de h1 in deze situatie naar de container.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
    }

    #container {
        background: yellow;
        width: 200px;
        margin: 0 auto;
        border-left: 5px solid blue;
        border-right: 5px solid blue;
    }
    
    h1 {
       margin: 20px 0;
       padding: 0;
       font-size: 14px;
       background: green;
    }   
    </style>
</head>
<body>    
    <div id="container">        
    <h1>waarom krijgt de container in FF de margin van de h1??</h1>     
    </div>
 </body>
</html>

online voorbeeld:
http://jnwmedia.nl/test.php

In IE doet ie precies zoals ik verwacht. Op zich zijn er wel work arounds. Maar ik vroeg me af wat hiervan de reden is

offtopic:
de titel moet natuurlijk zijn "margin h1 gaat naar container"

[ Voor 3% gewijzigd door Verwijderd op 24-01-2007 15:03 ]

woensdag 24 januari 2007 15:59

Acties:

erwin85

Sorry, maar ik begrijp niet wat je bedoeld. Kan je het specifieker uitleggen?

woensdag 24 januari 2007 16:32

Acties:

Verwijderd

Topicstarter

Door de margin van de h1 (margin: 20px 0) wordt de container 20px naar beneden geplaatst.
Vergelijk IE 6 maar eens met FF

woensdag 24 januari 2007 17:14

Acties:

erwin85

En dat wil je ook? Maar dan moet ie de achtergrond van je container laten zien?

woensdag 24 januari 2007 22:34

Acties:

crisp

Devver

Pixelated

Dat is volledig volgens specificatie: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Intentionally left blank

donderdag 25 januari 2007 09:30

Acties:

Verwijderd

Topicstarter

crisp schreef op woensdag 24 januari 2007 @ 22:34:
Dat is volledig volgens specificatie: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Tjonge, dat is haast niet begrijpbaar

Wat is overigens het nut hiervan?? Het is volgens de specificatie maar het slaat nergens op (ten minste kan ff niks bedenken, ga wel ff wat verder lezen)

voor de geïnteresseerde http://www.researchkitche...-and-margincollapsing.php

[ Voor 17% gewijzigd door Verwijderd op 25-01-2007 09:32 ]

donderdag 25 januari 2007 09:48

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 25 januari 2007 @ 09:30:
[...]

Tjonge, dat is haast niet begrijpbaar Wat is overigens het nut hiervan?? Het is volgens de specificatie maar het slaat nergens op (ten minste kan ff niks bedenken, ga wel ff wat verder lezen)

voor de geïnteresseerde http://www.researchkitche...-and-margincollapsing.php

Tsja, margin-collapsing is gewoon een feature en eerlijk gezegd is het vaak ook wel handig dat het gebeurd. Het wordt echter vaak niet begrepen op momenten dat het gebeurd op plekken waar het niet wenselijk is, maar imo zou je dan geen margin maar padding moeten gebruiken

Note ook dat behavior in quirksmode vaak anders is en veel browsers (mn IE) nog bugs hebben mbt margin-collapsing.

Intentionally left blank

donderdag 25 januari 2007 10:54

Acties:

Verwijderd

Topicstarter

crisp schreef op donderdag 25 januari 2007 @ 09:48:
[...]

Tsja, margin-collapsing is gewoon een feature en eerlijk gezegd is het vaak ook wel handig dat het gebeurd. Het wordt echter vaak niet begrepen op momenten dat het gebeurd op plekken waar het niet wenselijk is, maar imo zou je dan geen margin maar padding moeten gebruiken

Note ook dat behavior in quirksmode vaak anders is en veel browsers (mn IE) nog bugs hebben mbt margin-collapsing.

Thx voor je reply. Heb je misschien ook nog een situatie/voorbeeld wanneer dit wel handig is?