Header niet gelijk in Firefox en Internet Explorer

[Spixo]

Het gaat om de pagina:

// link verwijderd, google leest mee

In Firefox ziet de site eruit zoals het zou moeten horen, in Internet Explorer gaat het echter fout bij de header. Het lijkt wel of die daar anders wordt gerenderd.

De betreffende code:

code:

<div id="header">
  [img]"logo.gif"[/img]
  <h1>Titel</h1>
</div>

Met bijbehorende style:

code:

#header {
width: 750px;
border: 0px
padding-bottom: 10px;
padding-top: 10px;
clear: both;
}

[ Voor 29% gewijzigd door Spixo op 16-05-2006 21:47 ]

[Verwijderd]

Ricardo87 schreef op zondag 23 april 2006 @ 15:36:

code:

#header {
width: 750px;
border: 0px /*deze mis in ieder geval een puntkomma ; */
padding-bottom: 10px;
padding-top: 10px;
clear: both;
}

[crisp]

Bedenk ook dat de default styles (bv margin/padding) voor o.a. header-elementen afwijken per browser.

[JHS]

Je zou er daarom ook voor *kunnen* kiezen om álle margins en paddings te resetten, met behulp van * { margin: 0; padding: 0; } . Maargoed, dat is een persoonlijke keuze .

[Verwijderd]

JHS schreef op zondag 23 april 2006 @ 18:15:
Je zou er daarom ook voor *kunnen* kiezen om álle margins en paddings te resetten, met behulp van * { margin: 0; padding: 0; } . Maargoed, dat is een persoonlijke keuze .

Niet doen. Je moet alleen aan style rules komen die je ook daadwerkelijk gaat herdefiniëren. Jouw regel zou je dwingen meteen nog een stuk of 20 regels aan CSS code toe te voegen, die het standaard gedrag van browsers weer enigszins normaal te krijgen.

[JHS]

Het nadeel is inderdaad dat je zelf een heleboel extra moet gaan zitten definiëren, terwijl je feitelijk gezien niets verandert. Maar dat is dan ook het punt: Het verplicht je de controle over alle layout-beïnvloedende zaken te nemen. Het is de enige manier waarop je écht zeker kan weten dat iets een bepaalde margin / padding heeft. Zoals ik al zei: het is een persoonlijk keuze, en ik wil ook zeker niet zeggen dat ik het (vaak) gebruik.

[Robbbert]

Probeer eens wat te goochelen met de font-size in de header. Zet die eens op nul en kijk wat voor effect dat heeft.

[Spixo]

Robbbert schreef op zondag 23 april 2006 @ 18:49:
Probeer eens wat te goochelen met de font-size in de header. Zet die eens op nul en kijk wat voor effect dat heeft.

Als ik de font-size voor H1 op 0 zet is mijn tekst weg

Anyway, door een margin-top toe te passen op H1 staat de tekst in zowel Internet Explorer als Firefox naast het logo. Nu moet ik in IE alleen nog de menubalk wat omhoog krijgen.

[Robbbert]

Ik bedoelde niet de fontsize in de h1 maar in de header div

[evaarties]

Ah, daar ben ik laatst ook tegenaan gelopen.. ik kreeg een div niet klein genoeg (bevat een plaatje van 11px, maar de div bleef groter dan 11px ook met height=11px). Blijkt dat de fontsize voorrang geeft aan de hoogte.. grr. Fontsize=0 loste het op

[Spixo]

Robbbert schreef op maandag 24 april 2006 @ 14:16:
Ik bedoelde niet de fontsize in de h1 maar in de header div

Helaas, dat werkt ook niet.

_{He Robbert, jij ook hier}