Probleem met layout

**LaurensStrijker** · 16-03-2009, 16:09

Hey,

Ik heb een probleem met een layout.

In EX Werkt de layout gewoon zoals hij hoort.
Maar wanneer je hem ik firefox opent staat de hele layout uit elkaar...

Weet iemand hoe ik dit kan oplossen?

Website:
http://www.snowdelta.laurensmedia.nl

Groeten Laurens

**Nick van Egdom** · 16-03-2009, 21:33

Je hebt drie keer body, dit zal niet oorzaak zijn maar hoort niet zo.

**LaurensStrijker** · 16-03-2009, 21:52

Bedankt voor de tip maar ik was ff bezig met het opnieuw scripten.
Groeten,

Origineel gepost door Nick van Egdom

Je hebt drie keer body, dit zal niet oorzaak zijn maar hoort niet zo.

**Jeffrey Kroon** · 17-03-2009, 13:10

Er zitten een aantal fouten in :
1. Geen Doctype vermeld
2. De <html> tag ?
3. Je maakt veel geruik van de <br /> probeer deze gewoon niet te gebruiken
4. In de css kan je beter gebruik maken van de margin inplaats van de padding om ruimte tussen bepaalde elementen te houden (Dit is overigens geen fout)

**R. Boes** · 17-03-2009, 13:42

Het beste wat je kan doen is, per browser een cssje maken, dat lijkt me het meest simpel.

De fout met name om de margins, paddings, en uitlijn die in IE6, IE7 en Firefox aanzienlijk verschillen.

Je kan als resource de volgende website gebruiken:

http://www.w3.org/TR/CSS2/

en wil je meerdere CSS gebruiken (browser afhankelijk) dan kan je de conditie opgeven tussen de haken.



Succes

**Jeffrey Kroon** · 18-03-2009, 21:39

Om de slice goed te laten functioneren in IE6 heb je helemaal geen apparte stylesheet nodig. Bij een div is de double-margin bug al weg door de div het volgende mee te geven :

PHP Code:


div.divnaam {
     display: inline;
}

Hetzelfde geld voor de <h> <p> & <span> tags.

**Tonnie Lubbers** · 20-03-2009, 10:36

Origineel gepost door Jeffrey Kroon

Om de slice goed te laten functioneren in IE6 heb je helemaal geen apparte stylesheet nodig.

Origineel gepost door Jeffrey Kroon

Bij een div is de double-margin bug al weg door de div het volgende mee te geven :

Double margin bug, jaja, waar het eigenlijk op neer komt is een verschil van behandeling van box-model.

http://www.w3.org/TR/CSS2/box.html
http://www.quirksmode.org/css/box.html

IE behandelt dit iets anders, de simpelste oplossing is dus van binnen uit
te werken.

De margins en paddings worden zoveel mogelijk op de binnenste elementen geplaatst.

Voorbeeld:

Code:

<div>
     <div>
           <a href></a>
     </div>
</div>

Ipv. nu de margin op de eerste div te plaatsen, plaatsen we deze op het anchor element indien mogelijk. De plaats / breedte en hoogte, die de ouder-elementen innemen wordt nu bepaald door hun inhoud.

Het zal niet altijd lukken om geheel zonder hacks te werken, deze methode zorgt er wel voor dat het er zo weinig mogelijk worden.

Daarnaast is het verstandig eerst eens inzicht te krijgen in hoe het scherm opgebouwd wordt met de verschillende elementen. Leer 'gelaagd' te bouwen en leer wat de elementen doen op 'block-level' en 'inline' niveau.

Door simpelweg een 'block-level' element te ontdoen van zijn functionaliteit en er maar een inline van te maken, los je wellicht 1 probleem op, je kunt er een handvol extra voor terug krijgen. ;)

**Jeffrey Kroon** · 20-03-2009, 21:00

Origineel gepost door Tonnie Lubbers

De margins en paddings worden zoveel mogelijk op de binnenste elementen geplaatst.

Inderdaad kan je altijd beter de elementen in de div een margin geven, inplaats van de div zelf. Bij het opvullen van de layout met verschillende divjes, zal je er achter komen dat in IE6 bepaalde divjes niet meer op hun plek staan. Dit is dan op te lossen op de volgende methode :
http://www.positioniseverything.net/...ed-margin.html

**Robin W.** · 20-03-2009, 21:34

Op Safari staat ook alles door elkaar.

**Merijn V** · 20-03-2009, 21:37

Kan, als je geen waarde hecht aan je "officiele" validatie, kun je ook gewoon je css hacks gebruiken hoor. Heb er geen problemen mee als m`n css niet valideert, als ik weet dat het wel werkt.

Gebruik ook vaak genoeg CSS3 eigenschappen welke niet ondersteund worden door IE6 en welke niet valideren. Echter heb ik daar echt totaal geen moeite mee.

Het tijdperk van IE6 loopt ten einde, en support leveren voor zo`n aftandse browser is iets waar ik vanaf gestapt ben.

Nou werken al m`n stylesheets wel gewoon goed in IE6, maar dat is omdat ik een beetje door heb welke bugs erin zitten en ik onbewust die omzeilingen al toe pas.

In ieder geval kun je die dubbele margin bug er simpel uithalen door een normale margin te geven:

margin-left:40px;
_margin-left:20px;

die _ is voor IE6 alleen
een * is voor IE 6 en 7

**LaurensStrijker** · 21-03-2009, 10:37

Bedankt voor alle reacties,
Ik ga even wat dingen proberen;)

Probleem met layout