webForumDet fria alternativet

Hela diven blir större när jag lägger till cellpadding

HTML & CSS

12 svar · 440 visningar · startad av Tjock-Erik

Medlem sedan nov. 2002102 inlägg
Frågan#1

Jag har en 650px bred div. Om jag med hjälp av CSS använder cellpadding 5px på båda sidorna blir diven 660px bred. Diven blir 10px bredare än den ska vara alltså. Den ökar bara åt höger.

Detta händer i Netscape och Opera men inte i IE.

Medlem sedan juli 2001434 inlägg
#2

Exakt samm problem som mig.. hade padding i diven "ovanför" och det funka inte i mozilla...
kolla min tråd :
http://www.webforum.nu/showthread.php?s=&threadid=86290&forumid=12

Där är ref till hur du beräkanr och sätter bredden på diven. Det hela verkar bero på vad webläsaren har som standard eller nåt.

Jag har inte implementerat det hela själv ännu, men det verkar vettigt när jag läste igenom :)

Medlem sedan nov. 2002102 inlägg
#3

Jag har läst igenom det där som står det, men förstår inte mycket. Det stod något om att bredden på hela boxen är witdh + padding, och så blir det i IE men inte i Mozilla.

Det där med Doctype står så att sidan blir standard i alla webbläsare.

Medlem sedan jan. 20016 874 inlägg
#4

Det är en tolkningsfråga, mao hur läsaren väljer att tolka rekomendationer(w3C's).
Den ena läsaren lägger paddingen på insidan och den andra på utsidan (minns inte vilken som gör vad).

Medlem sedan sep. 20021 655 inlägg
#5

Ta en titt på följande kod:

<div style="width: 50px; height: 50px; padding: 25px; margin: 25px; background: #00f; border: 25px solid #000;"></div>

Div:ens bredd (där det går att skriva/presentera något) är 50px. Utanpå det läggs det 25px padding på vardera sida och därefter läggs 25px border på vardera sida. Det ger en sammalagd bredd på 150px (50px width, 25px+25px padding, 25px25px border). Därefter läggs marginaler - 25px på vardera sida - så att elementet kommer ta upp 200px i bredd, varav vi bara kan "se" 150px (marginalerna är ju bara tomrum).
Exakt motsvarande gäller för height.

Enligt http://www.w3.org/TR/REC-CSS2/box.html ska det bli på detta vis, och om du sätter läsaren i Standards mode blir det också så (både i Mozilla och IE).
Om du istället sätter läsaren i Quirks mode - t ex genom att utelämna en DOCTYPE - blir det annorlunda i IE.

Padding blir nu en del av width, istället för att lägga sig utanpå som det är tänkt.

Mer läsning:
http://www.maxdesign.com.au/presentation/listamatic/about-boxmodel.htm
(eller sök bara efter "ie box model" i Google)

Medlem sedan nov. 2002102 inlägg
#6

Mozilla gör rätt, alltså padding utanför boxen. I IE hamnar däremot paddingen innanför boxen. Vilken DOCTYPE ska man använda för att alla läsare ska hamna i standardläge? Nu blir väl IE i quirks? Jag använder Dreamweaver MX och skapar en XHTML-PHP-sida och använder DOCTYPEN som skapas.

Medlem sedan sep. 20021 655 inlägg
Medlem sedan juli 20013 378 inlägg
#8

En annan bra resurs för val av <!DOCTYPE är Henri Sivonens sammanställning över vilken <!DOCTYPE som ger vilken mod i olika webbläsare ;)

http://www.hut.fi/u/hsivonen/doctype.html

Medlem sedan nov. 2002102 inlägg
#9

Internet Explorer 5 som jag använder finns inte med i listan. Fungerar den versionen likadant som IE6?

Medlem sedan jan. 20016 874 inlägg
#10

Tjock-Erik skrev:

Internet Explorer 5 som jag använder finns inte med i listan. Fungerar den versionen likadant som IE6?

Nä, den är "sämmre" på att föjla standard, IE5 för MAC var den läsaren på den tiden som var bäst.

Medlem sedan juli 20013 378 inlägg
#11

Har för mig att MSIE5/Win inte kör med <!DOCTYPE switching alls... Bara "Quirks" hur man än gör där alltså ;)

MSIE5/Mac var den första webbläsaren som införde <!DOCTYPE switching såvitt man vet - och den har (hade) en helt annan (enligt många mycket bättre - iallafall ur standardsynpunkt) kodbas än MSIE5/Win

/red: Tänkte väl att det fanns på nätet nånstans också ;)

Some modern browsers have two rendering modes. Quirk mode renders an HTML document like older browsers used to do it, e.g. Netscape 4,Internet Explorer 4 and 5.
Standard mode renders a page according to W3C recommendations.

http://gutfeldt.ch/matthias/articles/doctypeswitch.html

Medlem sedan nov. 2002102 inlägg
#12

Det fungerar inte att byta doctype. Nu använder jag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Som ska göra så att IE6 hamnar i standardläge och lägger padding utanför width. Men ändå hamnar padding innanför boxen och gör att sidan ser normal ut i Opera och Mozilla men inte i Internet Explorer. Jag använder IE6 Service pack 1 på Windows 2000.

Medlem sedan nov. 2002102 inlägg
#13

Problemet är löst. Det var någon textsnutt som Dreamweaver lade som orsakade pronlemen.

259 ms totalt · 4 externa anrop · v20260731065814-full.e96017d9
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
125 ms — ändringar (db)