webForumDet fria alternativet

Ramar/marginaler på div:arna förskjuter sidan

HTML & CSS

6 svar · 369 visningar · startad av Dryden

Medlem sedan aug. 200218 625 inlägg
Frågan#1

Har ett litet problem. Sitter med två div:ar, båda med varsin helt omslutande ram på 1px.

I IE så ser allt bra ut men i Firefox så blir det aningen bredare, ungefär som att Firefox och IE tolkar ramen olika. IE räknar in ramens pixel i div:ens totala bredd medan FF inte verkar göra det. Alltså, en div som är 450px bred med en omslutande ram på 1px blir alltså 452px bred i FF vad det verkar. Likadant blir det om jag sätter marginaler/padding på div:arna, då förskjuts allt återigen i FF men inte i IE.

Vad beror detta på och hur löser jag det?

Medlem sedan jan. 2000978 inlägg
#2

Det är IE som tolkar CSS fel. Enligt standarden ska ramen inte räknas med i bredden.
http://www.positioniseverything.net/articles/box-model.html

Medlem sedan maj 2004451 inlägg
#3

Precis IE's gamla boxmodell är fel (enligt w3c).
Både padding, border och margin ska adderas till den angivna bredden och inte som i IE (i quirksmode) inkluderas i bredden (padding och border men inte margin).

Det absolut enklaste sättet att lösa det här är att sätta IE i standardsmode då det följer w3c's boxmodell
Det gör man genom att ange en korrekt doctype. Om man kör xhtml och tycker att man har det och det borde vara rätt så kan det hjälpa att ta bort xml-deklarationen (ex: <?xml version="1.0" encoding="iso-8859-1"?>). IE fattar inte alls vad som menas med den och hamnar i quirksmode. Och om man kör xhtml 1.0 så behövs den inte heller. Hoppas det hjälpte.

Medlem sedan jan. 2000978 inlägg
#4

Tinwëlint skrev:

...Det absolut enklaste sättet att lösa det här är att sätta IE i standardsmode då det följer w3c's boxmodell
Det gör man genom att ange en korrekt doctype....

Men oavsett vilket så består problemet i IE 5.X om jag förstått saken rätt. (Kan inte testa själv.) Dom är ju inte så många nu för tiden iofs.

Medlem sedan maj 2004451 inlägg
#5

Hmm, har inte riktigt koll på det. Även i 5.5sp2? Tror jag ska göra en testsida och kolla.

Förresten Dryden, det finns ett hack för att fixa det här också:
http://tantek.com/CSS/Examples/boxmodelhack.html

Men standardsmode är väl den smartaste lösningen först och främst. Sen om man känner att man måste ha det rätt i äldre versioner av IE kan ett hack vara bra. Då kanske man iofs inte ska använda det där för jag tror alla IE-versioner reagerar på det och om man då har ett IE6 i standardsmode och resten av versionerna i quirksmode vill man ju inte att IE6 ska ta åt sig av den "felaktiga" dimensionsangivelsen.

Medlem sedan maj 2004451 inlägg
#6

Provade lite. Det visade sig att inte ens IE5.5sp2 fick sin boxmodell rätt när den var i standardsmode (om den har något). Den doctype jag använde satte i alla fall IE6 i standardsmode.

Medlem sedan maj 2004451 inlägg
#7

Förresten så har jag nog inte läst igenom Tanteks hack ordentligt. Det fixar IE5.

255 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
122 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
119 ms — ändringar (db)