h1 t/m 6 en de line-height property - FireFox vs IE6

[BikkelZ]

Cascading Stylesheet:

h1 {
    padding-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
    line-height: 0px;
}

h2 {
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    line-height: 0px;
}

Dit geeft bij een h1 in IE een stuk ruimte tussen het vorige item (een div er boven) en de h1, en bij FireFox niet. Als ik het stuk tekst van de h1 selecteer, lijkt de regel ook gewoon een stukje hoger te zijn.

Vreemd genoeg, bij de h2, die in een andere div staat, gebeurt dit weer niet, en pakt FireFox weer een gelijke hoeveelheid top en bottom waar IE dat weer niet doet.

Neemt FireFox gewoon een standaard stuk grootte no matter what en plakt IE er altijd een regel boven ofzo?

HTML:

    <div class="maincontent">
        <h1>Woningen</h1>
        <div class="previewitemright">
            <h2>De Bottelaer</h2>
            [img]"images/bottelaer.jpg"[/img]Met wat tekst er omheen. 3000m2 kantoren, 100pp in de parkeerkelder. Vertel er gerust wat meer over. Opdrachtgever enzovoort.
            <div class="bottomlink"><a href="meer.php?id=34">Klik hier voor meer foto's en informatie</a></div>
        </div>
    </div>

[ Voor 10% gewijzigd door BikkelZ op 01-09-2005 21:21 ]

[djluc]

margin en padding instellen!

[BikkelZ]

Hmm sterker nog, als ik die paddings weg haal schrijft IE de divs zelfs over de tekst van de h1 heen.....dus hij maakt een soort witregel boven iedere kop.

[Verwijderd]

Maak dan even een apart voorbeeldje, los testbestandje, pas daar die stijlen op toe, leer wat margin, padding en line-height voor effect hebben, en pas het dan toe op jouw specifieke pagina.

Als je alleen wat hn tags hebt, wat divs en wat tekst, dan komt er nooit iets over elkaar heen te staan.

[BikkelZ]

djluc schreef op donderdag 01 september 2005 @ 21:22:
margin en padding instellen!

Dat helpt niet

Cascading Stylesheet:

h1 {
    padding: 0px 0px 10px 0px;
    margin: 5px 0px 5px px;
    font-size: 22px;
    font-weight: bold;
    line-height: 0px;
}

h2 {
    padding: 0px 0px 5px 0px;
    margin: 5px 0px 5px px;
    font-size: 16px;
    font-weight: bold;
    line-height: 0px;
}

IE laat nog steeds gewoon meer ruimte boven de h1 over (een lege regel haast), en firefox doet juist wat meer ruimte boven en onder de h2

[BikkelZ]

Verwijderd schreef op donderdag 01 september 2005 @ 21:27:
Maak dan even een apart voorbeeldje, los testbestandje, pas daar die stijlen op toe, leer wat margin, padding en line-height voor effect hebben, en pas het dan toe op jouw specifieke pagina.

Als je alleen wat hn tags hebt, wat divs en wat tekst, dan komt er nooit iets over elkaar heen te staan.

Excuus, met weg halen bedoelde ik op 0px instellen, iets anders natuurlijk. Standaard valt het niet over elkaar heen, maar het is gewoon typisch dat IE die grote ruimte neemt boven de h1.

[BikkelZ]

Het gaat pas 'mis' als ik de line-height aanpas overigens, maar goed anders neemt in ieder geval de h2 te veel ruimte in beslag.

[TheBorg]

BikkelZ schreef op donderdag 01 september 2005 @ 21:31:
[...]


Excuus, met weg halen bedoelde ik op 0px instellen, iets anders natuurlijk. Standaard valt het niet over elkaar heen, maar het is gewoon typisch dat IE die grote ruimte neemt boven de h1.

Werkt inderdaad. Nu valt het me ook ineens op dat de <p> tag andere margins heeft...

[BikkelZ]

En Opera doet het weer anders, die voegt alleen ruimte onderaan toe bij h tags waarbij de line-height en padding aangepast is.

Jammer, ik ga maar weer terug naar de oude vertrouwde spannetjes en divjes.....

[Verwijderd]

wtf is je plan eigenlijk met 0 line-height? ik heb zo'n vermoeden dat je idee veel simpeler te realiseren moet zijn (en consistent krijgen moet sowieso kunnen als je alles hetzelfde instelt

[Verwijderd]

BikkelZ schreef op donderdag 01 september 2005 @ 22:18:
En Opera doet het weer anders, die voegt alleen ruimte onderaan toe bij h tags waarbij de line-height en padding aangepast is.

Jammer, ik ga maar weer terug naar de oude vertrouwde spannetjes en divjes.....

Het zou goed zijn om even door te zetten. Er zijn precies drie verschillen tussen een H1 en een DIV:

• Een H1 heeft standaard padding
• Een H1 heeft standaard margin
• Een H1 overerft de font-intstellingen niet

Het enige wat je hoeft te doen is deze standaard-properties (die voor iedere browser iets anders zijn) overschrijven met je eigen properties.

Of:

Cascading Stylesheet:

* {
    margin:0;
    padding:0;
    font-size:11px;
    font-weight:normal;
}

Zet dat in je stylesheet en je bent van het gezeur af. Alle HTML elementen zullen zich als DIVs en SPANs gedragen Wel een beetje een kanon om een mug te doden.

Als je nou niet alleen symptoombestrijdend wil werken maar ook wil begrijpen waarom dingen zich zo gedragen als ze zich gedragen, lees dan W3C: CSS Visual formatting model. Dit is een complete uitleg over de opbouw van elementen op het scherm. Floats, anonymous boxes, positioning...Als je dit echt snapt zul je nooit meer tegen dit soort problemen aanlopen, puur omdat je van tevoren al zult kunnen voorspellen wat er gaat gebeuren, dat garandeer ik je.

[BikkelZ]

Ik denk dat ik het nog een keer ga proberen, zonder line-height hack en met aangepast margins en paddings. Ik vond het al zo typisch dat je een list onherkenbaar kunt ombeuken naar een horizontaal menu met rollovers, maar een h-element opeens niet wil luisteren.

De bedoeling was ook om een pagina te maken die ook in bijvoorbeeld een text-browser of een browser zonder css of met aangepaste css (slechtzienden) een duidelijke indeling heeft, en het gebruik van een h-tag voor iets wat een titel is op een pagina lijkt me daar natuurlijk uitstekend bij aansluiten.

[Verwijderd]

vinden browsers dit uberhaupt wel leuk ?

margin: 5px 0px 5px px;