[CSS] Ruimte onder een H1, loopt niet lekker

[wustenveld]

Ik heb een probleem met de ruimte onder een H1. Het is me gelukt om de <P> direct onder de <H1> te laten beginnen. Mijn H1 ziet er zo uit:

h1 {
font: bold 14px/0 verdana, sans-serif;
color: #17A3E6;
vertical-align: text-top;
}

En m'n P zo:
body, td, p {
font: 10px/15px verdana, sans-serif;
list-style-image: url(gfx/submenupijl.gif);
}

Als de pagina start ziet het er perfect uit. Alleen als ik nu naar beneden scroll en dan weer omhoog dan is de H1 maar voor de helft of minder te zien. Scroll ik heel snel naar boven, maw ik gebruik dan de home-knop om naar boven te gaan dan staat ie er wel goed. Moet ik nu in de instructies voor de website zetten dat men met home naar boven moet scrollen, is het een bug in IE of doe ik weer een keer iets fout??

[r0bert]

HTML:

<style type="text/css">
h1 {
    font-family: verdana, sans-serif;
    font-size:  14px;
    font-weight: bold;
    
    margin-bottom: -5px;
    
    color: #17A3E6;
    
    vertical-align: text-top;
}

body, td, p {
    font-family: verdana, sans-serif;
    font-size:  15px;

    list-style-image: url('gfx/submenupijl.gif');
}
</style>

[ Voor 12% gewijzigd door r0bert op 20-12-2002 13:33 ]

[wustenveld]

Ik heb deze stylesheet ook toegepast maar het probleem blijft aanwezig. Als de pagina net opstart gaan de header goed, maar zodra ik naar beneden scroll en daarna omhoog scroll zijn de headers gehalveerd.

[Verwijderd]

margin:0-px;

erin kijlen en dan MOET het goed gaan...

[drm]

Die vertical-align hoeft er helemaal niet in. Als je padding en margin beide op 0 zet, is het ook goed.

[wustenveld]

mabit en drm, ook deze oplossingen werken alleen bij de aanvang van de pagina. Het probleem dat ontstaat na het scrollen is nog steeds aanwezig

[Verwijderd]

wustenveld schreef op 20 December 2002 @ 15:12:
mabit en drm, ook deze oplossingen werken alleen bij de aanvang van de pagina. Het probleem dat ontstaat na het scrollen is nog steeds aanwezig

huh, ik gebruik het zelf ook en heb er nog nooit last van gehad..?!!

KLigt het niet ergens anders aan --> browser -- grafische kaart (dat wordt onderschat, maar die levert ook erg vaak problemen op)

[drm]

wustenveld › ik denk toch echt dat 't aan nog iets anders ligt dan. Zou je de rest van de source ff kunnen posten?

[Verwijderd]

ruimte onder de h1, komt omdat h1 display type block is. een block heeft altijd een break voor en na. een form, p, of list is ook een block element. een inline element heeft geen ruimte voor en na. dit kun je aanpassen door bv:

code:

h1 {
display: inline;
}

verder ziet dit er een beetje ranzig uit:

code:

vertical-align: text-top;
je bedoelt waarschijnlijk dit:
text-align: top;

[Verwijderd]

Verwijderd schreef op 20 december 2002 @ 20:54:
ruimte onder de h1, komt omdat h1 display type block is. een block heeft altijd een break voor en na. een form, p, of list is ook een block element. een inline element heeft geen ruimte voor en na. dit kun je aanpassen door bv:

code:

h1 {
display: inline;
}

verder ziet dit er een beetje ranzig uit:

code:

vertical-align: text-top;
je bedoelt waarschijnlijk dit:
text-align: top;

shame
on
YOU!!!

/me slaps 10US around a bit with some CSS specs

Als ik twee div's onder elkaar zet zit er toch ook geen ruimte tussen, en een div is toch ook block-level? Wat je zegt klopt dus voor geen meter. Dat er ruimte onder een H1 zit komt door standaardwaarden die de browser meegeven aan het H1 element. De display mode op inline zetten zorgt ervoor dat je er rechtstreeks meuk naast kunt knallen, wat meestal niet de bedoeling is van een kopje.

Verder, dat vertical-align was nogal onnodig hier, maar text-top is wel degelijk een geldige waarde, maar zoals jij zegt, text-align: top; is dus absoluut onzin. text-align kan de waarde inherit, left, center, right en justify hebben.

Verder laat ik deze thread lekker met rust want het antwoord is al lang gegeven door drm

edit:
enne, mabit, ik geloof dat je een vieze tiepvaut hebt gemaakt

[ Voor 4% gewijzigd door Verwijderd op 20-12-2002 21:07 . Reden: alcoholpercentage: ]

[wustenveld]

Ik heb nu de source van de site niet bij de hand (ligt op m'n werk) maar zou het misschien helpen als ik ipv van een H1 zelf een style aanmaakt. Bijvoorbeeld .kopje en daar dan het lettertype en grootte enzo aan meegeef. Dan heb ik in ieder geval niks te maken met de eigenschappen die de browser aan een H1 meegeeft. Of zie ik dat verkeerd.

Ik heb nu de witruimte gewoon laten zitten omdat de site er toch een beetje fatsoenlijk uit moet zien, het gaat trouwens om www.tvhome.nl en dan met name om het onderdeel diensten.

[drm]

Dat zie je niet verkeerd, maar da's wel een verkeerd gebruik van classes. Een h1 is een h1 omdat 't een h1 is en daar moet je 't dus ook voor gebruiken, ajbwib