Website IE <> FF

[jeroendenoot]

Hallo, ik ben bezig met een website voor mijn tante. Ik heb voor deze vraag de site even snel online gezet: http://theavandaal.awardspace.com
Op het eerste gezicht ziet het er misschien best leuk uit, maar ik heb toch een paar probleempjes:

1. In Internet Explorer is de linker kolom ongeveer vijf pixels breder dan in Firefox.
2. In Internet Explorer kun je bij de knoppen alleen op de tekst klikken en in Firefox op heel de knop.
3. Ik geloof dat in internet Explorer het minilogootje opnieuw laad als je over een knop heen gaat, maar dat weet ik niet zeker.

In Firefox wordt de site dus goed weergeven, maar in Internet Explorer zijn er nog een paar probleempjes. Waar zou dat door kunnen komen?

Andere lay-outtips zijn ook welkom.

 

[bartjuh_4]

Heb zo even rondgekeken maar ik zie geen verschil...

 

[jeroendenoot]

Weet je het zeker?
Kun je gewoon op hele knop klikken in Internet Explorer (i.p.v. alleen op de tekst)?
Is die linkerkolom niet ietsje breder in Internet Explorer?

 

[Systemizer X100]

De linkerkolom is breder in Internet Explorer. Ook kun je niet op de hele knop klikken maar alleen op de tekst. Hoe je dat laatste kan oplossen weet ik helaas niet.

Internet Explorer rendert CSS verkeerd. Om dit te omzeilen, moet je wat CSS hacks toepassen. Hier kun je er wat meer over lezen.
Ik vind het zelf best lastig om goed te krijgen, maar als je wilt dat de website er hetzelfde uitziet in zowel IE als FF, moet je dit wel gebruiken.

 

[jeroendenoot]

Oké bedankt! Ik zal er morgen een naar kijken.

 

[Rimsic]

IE is opzich niet fout, is met dit eigenlijk logisch vind ik zelf.
De andere browsers zeggen als je een div van 600px breed hebt en je wilt een margin van 10px, dan moet de div 580px breed zijn (beide kanten 10px). Hier moet je rekening mee houden, ook een border met een div is 1px (2px als je aan beide kanten een border hebt).

Ik los het altijd heel simpel zo op:

div {
    width: 376px !important;
    width /**/: 400px;
    margin: 10px;
    padding: 2px; }

Omdat IE !important niet ondersteund neemt hij de laatste width (400px dus). Omdat andere browsers wel !important ondersteund neemt hij die.

Important: !important wil zeggen dat die het belangrijkst is ook al wordt hij later overschreven.

 

[jeroendenoot]

Bedankt Rimsic! Hier heb ik veel aan!