03. HTML

Box model problem

2010-01-19 00:42 #0 av: johan-ahlback

Du har skrivit klart koderna till din hemsida och ska kolla dem i olika webbläsare. Den ser bra ut i firefox och andra nya webbläsare. Men så kommer du till internet explorer och lådorna ser helt fel ut. Vad har hänt?

Det här är två exakt likadana lådor (samma höjd, bredd, padding och border):
(naturliga storlekar)
box1box2

Nej jag skojar inte. Jag använder samma css fil till båda och koderna för boxen är identiska.

Så varför blir det så?

Css Specifikationen beskriver hur delar av webbsidor visas av grafiska webbläsare. Avsnitt 4 i CSS1 specifikationen definierar en "formaterings modell" som ger block-element nivåer, som p och blockquote en bredd och höjd, och tre nivåer på fälten som omger den: stoppning (padding, ramar(border) och marginaler(margin).

Innan html4 och css hade väldigt få html element stöd för både padding och border så definitionen av bredden och höjden på ett element var inte mycket omstridd. Däremot varierade de beroende på vilket element det var. Attributer i för bredd på tabbeler var inklusive dess ramlinje medan bilders bredd var på själva elementet innanför ramarna.

När Css kom så infördes padding border och margin för många fler element. Rådet antog en definition bredd i förhållande till innehåll, gräns, marginal och padding liknande den för en tabellcell. Det blev känt som W3C box modellen.

De två största webbläsarna under den tiden, som var Netscape 4.0 och Internet Explorer 4.0, definierade dock bredd och höjd som avståndet till border. Paddning räknades alltså på innanför en lådas ramar.

När standarden för css reviderades 1999 fastlogs att när en bredd eller höjd specificeras för varje block-level element bör den endast fastställa bredden eller höjden på den synliga delen , med stoppning, ramar och marginaler läggs på efteråt. Men i internet explorer 5 så gälde fortfarande att padding räknades från en lådas ramar.

 

Quirksmode

idag så följer alla webbläsare standardens specifikation om hur padding och borde fungerar. men av kompatibilitets krav så måste de ha kvar det gamla sättet kvar. annars är det en massa sidor som blir oanvändbara. Lösningen var quirksmode. När en webbläsare hamnar i quirksmode så visas sidan enligt IE5.

Om du vill att sidan ska visas lika i alla sidor ska du undvika att hamna i quirksmode. så då måste man ställa frågan om hur man hamnar i quirksmode.

En webbläsare hamnar i quirksmode om:
När dokumenttyps deklaration saknas eller är ofullständig,
När en HTML-3 dokument eller tidigare påträffas;
När en HTML 4.0 Transitional eller Frameset dokumenttyps deklaration används och ett system för identifikation (URI) inte förekommer;
När en SGML-kommentar eller andra oredovisade innehåll visas före dokumenttypsdeklarationen
När det är fel någonstans i dokumentet
Internet Explorer 6 använder även quirks mode om det finns en XML-deklaration före dokumenttyps deklarationen

så vad händer?

i vanliga fall så räknas padding och border på lådans bredd och höjd. Det betyder att om du har en låda som har 200px i bredd och höjd, en ramlinje på 1px runt hela och padding på 10px runt hela så får du 221px i bredd och höjd. Detta är enligt W3C's specifikation.

Men i quirksmode så räknas det som 200px fast du har ramlinje och padding. Det är det du ser på bilderna högst upp.
bild på hur padding och border tolkas

Så här undviker du quirksmode:

Skriv in en dokumenttyps deklaration högst upp i ditt dokument som är för html 4.01 (ej Transitional eller frameset) eller xhtml i dess olika versioner.

Du kan hämta dessa deklarationer här: http://www.w3.org/QA/2002/04/valid-dtd-list.html.

 

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-19 20:12 #1 av: Jojaton

Slöläste den bara lite nu, men den verkar väldigt bra och användbar - ska läsa den en gång till lite noggrannare när jag har mer tid Glad

Johanna
@bellasantorino på Instagram

Anmäl
2010-01-23 02:19 #2 av: [Tassy]

Jag har detta problem, och kommer inte till rätta med det. på min hemsida (tassysgerbiler.se) finns två bilder som hoppar fel i explorern, under "nyheter" och "till salu". Jag har transitional nu, testade att byta till strict, då hoppade menyn (två sista knapparna endast) galet i stället. Hur ska jag göra?


Anmäl
2010-01-23 02:31 #3 av: johan-ahlback

Valdidera din html fil här: http://validator.w3.org/

Validera sedan din css fil här: http://jigsaw.w3.org/css-validator/

Det kan hjälpa dig lite. Fixa de errors som kommer upp

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-23 02:34 #4 av: [Tassy]

tack, ska genast ta mig en titt.


Anmäl
2010-01-23 02:57 #5 av: [Tassy]

Jag hänger inte med på vad felen betyder/hur jag åtgärdar dem. :(


Anmäl
2010-01-23 03:45 #6 av: johan-ahlback

Det som står i rött är det som är fel. Läs igeom de första och åtgärde dem. det brukar stå en förklaring ibland. Oftast så löser sig flera problem när du åtgärdat ett fel. Jag kan kolla på det snabbt om du skickar en länk till sidan.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-23 17:20 #7 av: [Tassy]

http://www.tassysgerbiler.se/

Det är min engelska som sviker mig, så jag kan läsa hur mycket som helst :P fattar ändå inte.


Anmäl
2010-01-23 18:45 #8 av: johan-ahlback

byt till xhtml 1.0 strict för du har kodat efter det så den varnar för self-closing. sen har nog hälften av problemen löst sig Flört

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-23 18:47 #9 av: [Tassy]

är det helt eller delvis kodat i strict xhtml?


Anmäl
2010-01-23 19:10 #10 av: [Tassy]

fick nu 64 errors istället för 39... Vet inte om det blev sådär jättemycket bättre :P dessutom hoppade menyn fel igen.


Anmäl
2010-01-24 01:59 #11 av: johan-ahlback

haha då har du kvar html 4.01 och tar bort alla "/" från självstängande taggar

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-24 02:09 #12 av: [Tassy]

Så det är bara att lämna dom helt öppna då?

Hur löser jag bildproblemet? HTML - strict i stället för loose?


Anmäl
2010-01-24 02:32 #13 av: [Tassy]

tjoho, bytte till HTML strict och raderade "/" från självstängande taggar. Endast 29 fel left to go Tungan ute


Anmäl
2010-01-24 18:40 #14 av: johan-ahlback

#haha det är bara att arbeta sig neråt och försöka hitta lösningar. Jag ger mig aldrig fören sidan valideras som godkänd som strict även om de ska ha sidan som trans Flört

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.