Header niet gelijk in Firefox en Internet Explorer

Pagina: 1
Acties:

  • Spixo
  • Registratie: Augustus 2004
  • Laatst online: 08:17
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:
1
2
3
4
<div id="header">
  [img]"logo.gif"[/img]
  <h1>Titel</h1>
</div>


Met bijbehorende style:
code:
1
2
3
4
5
6
7
#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:
1
2
3
4
5
6
7
#header {
width: 750px;
border: 0px /*deze mis in ieder geval een puntkomma ; */
padding-bottom: 10px;
padding-top: 10px;
clear: both;
}

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

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

Intentionally left blank


  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

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 :) .

DM!


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
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

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.

DM!


  • Robbbert
  • Registratie: April 2005
  • Laatst online: 20-02 09:46
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
  • Registratie: Augustus 2004
  • Laatst online: 08:17
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 :P

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
  • Registratie: April 2005
  • Laatst online: 20-02 09:46
Ik bedoelde niet de fontsize in de h1 maar in de header div :)

  • evaarties
  • Registratie: April 2001
  • Laatst online: 21-02 10:52

evaarties

Powerball @ 12.582

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 :D

  • Spixo
  • Registratie: Augustus 2004
  • Laatst online: 08:17
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 :P
Pagina: 1