[HTML/CSS] Firefox rendert h1 verkeerd

[Verwijderd]

Ik heb een zeer vreemd probleem met het maken van mijn layout.

De eerste keer dat firefox de pagina laadt wordt er een h1 tag een pixel of 200 uitgerekt naar onderen, dit lijkt volledig uit het niets te komen (zie css code onder). Het gebeurt alleen de eerste keer dat je de pagina laadt, als je 'm daarna in tabs opent of refreshed is het goed. Maar bij restarten van de browser is het weer fout.

Ik snap er niets van, heeft iemand een idee hoe dit komt?


URL: http://www.konstruct.nl/gryphons

relevante code:

HTML:

<div class="nieuws">
    <h1>Nieuwe website in de lucht</h1>
    <p>Lorem ipsum dolor ...KNIP.... nunc vel ante.</p>
    <span>Geplaatst op: Maandag, 7 Maart, 2005 om 21:34 door Frank</span>
</div>

Cascading Stylesheet:

.nieuws {
    margin-left: 2px;
    width: 738px;
    margin-bottom: 5px;
}

.nieuws h1 {
    color: #fff;
    font: 14px Verdana;
    margin-left: 1px;
    padding: 3px;
    padding-left: 8px;
    background: #3F59A9;
    border-top: 2px solid #00307A;
    border-bottom: 4px solid #294793;
    border-left: 1px solid #00307A;
    border-right: 1px solid #00307A;
    font-weight: bold;
}

.nieuws p {
    color: #444;
    font: 12px Verdana;
    margin-left: 8px;
    margin-top: 5px;
    padding: 2px;
}

[ Voor 12% gewijzigd door Verwijderd op 11-03-2005 13:45 ]

[Verwijderd]

Heel vreemd inderdaad, ik heb met Firefox 1.0.1 hetzelfde probleem.

[ Voor 32% gewijzigd door Verwijderd op 11-03-2005 14:21 ]

[Verwijderd]

Stel de 'margin' is compleet in, niet alleen 'margin-left'.

[Verwijderd]

Verwijderd schreef op vrijdag 11 maart 2005 @ 14:07:
Stel de 'margin' is compleet in, niet alleen 'margin-left'.

gedaan, goeie suggestie, maar helaas

[ Voor 14% gewijzigd door Verwijderd op 11-03-2005 14:26 ]

[Verwijderd]

het lijkt er op dat die image niet goed gerenderd wordt die erboven staat...
probeer dit eens...

<img id="nieuwsheader" src="img/nieuwsheader.gif" alt="het laatste nieuws"

width="738px" height="27px" />

[Genoil]

code:

        #content {
            clear:left;
        }

[Rowanov]

Ik heb met de webdeveloper toolbar van firefox lokaal je margin compleet ingesteld en dat werkte gewoon.

[Genoil]

Rowanov schreef op vrijdag 11 maart 2005 @ 15:58:
Ik heb met de webdeveloper toolbar van firefox lokaal je margin compleet ingesteld en dat werkte gewoon.

Ja dat zal best maar het is toch echt mijn antwoord dat de echte oplossing voor het probleem biedt

[ Voor 9% gewijzigd door Genoil op 11-03-2005 16:09 ]

[Clay]

Tijdens het laden is die "het laatste nieuws" header er nog niet, en dan float die hele rimram boven de H1 die H1 in, zie de rode pijlen Op het moment dat die nieuws img er is knalt de header omlaag. Genoil heeft gelijk dus. Al blijft het wel loos dat ff het element niet even opnieuw rendert.

[Verwijderd]

heel erg bedankt Genoil voor de oplossing, en Clay voor de uitleg, ik kan het op dit moment even niet fixen omdat @home vervelend doet, maar het lijkt me dat dit wel gaat werken.

En ik denk dat de uitleg van clay ook verklaart waarom het met de webdevtoolbar wel werkt, aangezien dan de zaak denk ik opnieuw gerenderd wordt