[CSS] h1 in div in firefox

[Rhapsody]

Hallo,


Ik heb het volgende probleem:


Zodra ik een <h1> element toevoeg aan de rode header, (is een div) komt er een witregel bij in Firefox.

Is dit een bug? Of klopt er iets niet aan mijn css?

Cascading Stylesheet:

body 
{
    text-align: center;
    min-width: 755px;
    padding: 0px;
    margin: 0px;
    font: normal 12px "trebuchet MS";
    color: #000;
}
#header
{
    background: #ff0000;
    height: 100px;
}
h1
{
    font: italic 26px "trebuchet MS";
}

Ik heb al geprobeerd om te spelen met border-box, padding e.d. maar helaas bood dat geen oplossing.

[ Voor 12% gewijzigd door Rhapsody op 12-01-2005 17:34 ]

[Verwijderd]

'margin' en eventueel 'padding'. (Definieer ze altijd samen.)

[Rhapsody]

verrek.....
heb bij de h1 class padding en margin op 0px gezet, en nu werkt dat.

Weet je toevallig ook hoe het komt dat FF die zwarte border alleen om de bovenste div heen zet?
(heeft dat te maken met het feit dat ik de body en het menu naast elkaar zet d.m.v. float?)

[X-Lars]

Nog wel even quotes om "Trebuchet MS" zetten

[Rickets]

Rhapsody schreef op woensdag 12 januari 2005 @ 17:31:
Weet je toevallig ook hoe het komt dat FF die zwarte border alleen om de bovenste div heen zet?
(heeft dat te maken met het feit dat ik de body en het menu naast elkaar zet d.m.v. float?)

Waarschijnlijk wel. Je moet dan de clear property op een van de volgende elementen zetten (ik kan niet zien welk element dat is, dus je moet zelf maar even ermee spelen )

[Verwijderd]

Of je document iets logischer opbouwen. Overigens, die quotes zijn niet echt verplicht als ik het me goed herinner, ze maken het wel overzichtelijker.

[Rhapsody]

Verwijderd schreef op woensdag 12 januari 2005 @ 17:40:
Of je document iets logischer opbouwen. Overigens, die quotes zijn niet echt verplicht als ik het me goed herinner, ze maken het wel overzichtelijker.

Heb je tips?
Ik heb mezelf aangeleerd om met divjes te stoeien namelijk. Als er een logischere (of betere) manier is, ben ik zeer geinteresseerd.

[ Voor 1% gewijzigd door Rhapsody op 12-01-2005 17:43 . Reden: typfoutje ]

[Verwijderd]

Hoe ziet je structuur er nu uit? Op je screen shot kan ik wel ongeveer afleiden wat je in je document hebt staan maar het is niet geheel duidelijk.

[Verwijderd]

Rhapsody schreef op woensdag 12 januari 2005 @ 17:41:
[...]


Heb je tips?
Ik heb mezelf aangeleerd om met divjes te stoeien namelijk. Als er een logischere (of betere) manier is, ben ik zeer geinteresseerd.

divjes zo weinig mogelijk gebruiken, juist zoveel mogelijk veelzeggende elementen. Div's is smurfentaal

[Rhapsody]

Verwijderd schreef op woensdag 12 januari 2005 @ 18:03:
Hoe ziet je structuur er nu uit? Op je screen shot kan ik wel ongeveer afleiden wat je in je document hebt staan maar het is niet geheel duidelijk.

het is nu zo:

HTML:

<div id="content">
    <div id="header">
        <h1>Titel</h1>
    </div>
    <div id="body">Body</div>
    <div id="menu">
        <h1 class="black">Menu</h1>
    </div>
</div>

Gewoon een verzameling van divjes dus.


edit:
insteressante site over die smurfentaal, opzich is het ook wel zo.
Maar als ik dan mijn header neem, dat wordt straks een 'ding' met een achtergrondplaatje.
Hoe zou ik dat dan moeten realiseren zonder dat ik in het smurfs zit te klooien?

[ Voor 52% gewijzigd door Rhapsody op 12-01-2005 18:16 ]

[X-Lars]

quote: http://www.w3.org/TR/REC-CSS2/fonts.html#font-family-prop

In the previous example, "Baskerville", "Heisi Mincho W3", and "Symbol" are font families. Font family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.

[Verwijderd]

Rhapsody schreef op woensdag 12 januari 2005 @ 18:13:
[...]
het is nu zo:

<snip>

Gewoon een verzameling van divjes dus.


edit:
insteressante site over die smurfentaal, opzich is het ook wel zo.
Maar als ik dan mijn header neem, dat wordt straks een 'ding' met een achtergrondplaatje.
Hoe zou ik dat dan moeten realiseren zonder dat ik in het smurfs zit te klooien?

op zich valt dit nog wel mee, is nu redelijk logisch opgedeelt, alleen de div's lijken wat te overheersen omdat er verder nog geen content is, maar hier is op zich niet echt iets mis mee.

iets als class="black" dan weer wel en 2x h1 vind ik op zo'n manier ook potentieel niet goed

ad1) classes zouden de functie van een element moeten beschrijven, niet de presentatie (spammerdesmap (onderaan))
ad2) op deze manier lijkt de eerste h1 de titel van de site, menu zou dan h2 moeten worden.

[ Voor 15% gewijzigd door Verwijderd op 12-01-2005 18:53 ]

[Rhapsody]

ik heb een .black en .white class gemaakt voor diverse elementen, het enige wat daarin staat is de color. :-)


Maar als ik dus een header heb, wat eigenlijk gewoon een plaatje is.
Dan heb ik dus aan een <img /> voldoende?
Als ik Rikkert goed begrijp.

[ Voor 41% gewijzigd door Rhapsody op 12-01-2005 19:10 ]

[Verwijderd]

nee, een <img /> gebruik je voor plaatjes die iets toevoegen aan je content, dat lijkt me met een achtergrond voor een header niet het geval. Lijkt me ook niet dat Rikkert dat zegt

als alleen die h1 onderdeel is van de header, dan kan je die div gewoon weglaten, geef het ding een breedte en hoogte en regel met je padding dat de tekst op de juiste plaats staat. Het plaatje kan dan als achtergrond erin

[Rhapsody]

Ik probeer nu een <h1> element te stylen, maar in IE gaat de padding dus fout.
Als ik padding-top: 40px aangeef, wordt in IE de hoogte van het element met 40px vergroot....
Hetzelfde geldt voor breedte.

In FF gaat het wel goed.....

[Verwijderd]

Als er gequote wordt doe het dan met behulp van een actuele specificatie:

quote: http://www.w3.org/TR/CSS21/fonts.html#font-family-prop

If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space. Font family names that happen to be the same as a keyword value (e.g. 'initial', 'inherit', 'default', 'serif', 'sans-serif', 'monospace', 'fantasy', and 'cursive') must be quoted to prevent confusion with the keywords with the same names. UAs must not consider these keywords as matching the '<family-name>' type.

[Verwijderd]

boxmodel probleempje? hoewel ik het dan andersom zou verwachten eigenlijk...

staat er iets boven je dtd? dan springt IE in het verkeerde boxmodel

[Rhapsody]

heb het ff online gezet: http://www.developersonly.nl/temp/index.htm
Het menu heb ik er ff uitgemikt. Dat ga ik hierna doen met <ul> elementen

[X-Lars]

offtopic:
sorry Anne

[Verwijderd]

idd boxmodel probleem (een geinige ook)

je dwingt moz in het border-box model terwijl IE in standards mode zit. Je moet dus wel ff kiezen. Zoals IE het (hier) doet is de w3c way, paddings worden dus opgetelt bij de breedte (evenals borders)

dus gooi die -moz-box-sizing eruit en ga aan het rekenen