---

http://home1.stofanet.dk/snub/
validerer fint som HTML 4.01 Transitional, og ser fint ud i IE 6.0 og Opera
7.5, men i Firefox 1.0.4 vises den helt forkert. Hvad er galt??

http://validator.w3.org/check?uri=http%3A%2F%2Fhome1.stofanet.dk%2Fsnub%2F

---

On Fri, 16 Sep 2005 15:18:51 +0200, snubbi <-> wrote:

> http://home1.stofanet.dk/snub/
> validerer fint som HTML 4.01 Transitional, og ser fint ud i IE 6.0 og
> Opera
> 7.5, men i Firefox 1.0.4 vises den helt forkert. Hvad er galt??

Opera 8 kan heller ikke lide det, da du ikke kan ændre height/width på et
inline element.
Sæt display:block; på a.exp_div.

Derudover bør du også bruge en standardsættende doctype, da det derved er
lettere at sikre ens visning i forskellige browsere.
<url:http://www.hintzmann.dk/articles/doctype/>

--
Ryan Kristensen

---

> Sæt display:block; på a.exp_div.

Virker fint i IE6.0 og Opera 7.5, men giver nye problemer med visning i
Firefox 1.0.4: http://home1.stofanet.dk/snub/block.htm

> bruge en standardsættende doctype

Jeg prøvede med strict og loose, men så gør Opera også vrøvl
http://home1.stofanet.dk/snub/block_loose.htm
http://home1.stofanet.dk/snub/block_strict.htm

---

On Fri, 16 Sep 2005 16:18:50 +0200, snubbi <-> wrote:


> Virker fint i IE6.0 og Opera 7.5, men giver nye problemer med visning i
> Firefox 1.0.4: http://home1.stofanet.dk/snub/block.htm

Du beder browseren om at lade bredden på dit link være 100% + padding
140px og højden 100%+20px.
Width behøver du ikke angive, og da du kender højden på din div (80px), så
ved du at exp_div skal være 60px høj.

> Jeg prøvede med strict og loose, men så gør Opera også vrøvl
> http://home1.stofanet.dk/snub/block_loose.htm
> http://home1.stofanet.dk/snub/block_strict.htm

Tja, hvis du kalder det vrøvl, at den forsøger at vise din side korrekt,
så har du ret
Problemet i denne sammenhæng er IE. Ved at du trigger quirksmode, så
forsøger Opera (og Mozilla) at efterligne IEs fejl, hvilket de i mange
tilfælde gør meget godt, men det er noget lettere at trigge standardmode,
og sikre sig det ser ordentligt ud i standardoverholdende browsere samt
IE. I stedet for at skrive fejlbehæftet kode til IE, og så bagefter tjekke
i samtlige browser versioner, for at se om de alle gætter rigtigt.

--
Ryan Kristensen

---

Du er jo genial Ryan! Nu virker det!
http://home1.stofanet.dk/snub/funker.htm

Jeg kendte åbenlyst ikke nok til css-kodning / html teori til at kunne
skrive korrekt kode. Men jeg må indrømme at jeg faktisk ikke helt forstår
hvorfor dit forslag virker. Er border og padding ikke inden for elementet,
og dermed medregnet i højde og bredde? (jvf.
http://www.w3.org/TR/REC-CSS2/images/boxdim.gif)

Jeg ville tro a.exp_div skulle have en højde på 78px (inklusiv de 2x 10px
padding), fordi div.explore1 rummer 80px - 2x 1px (border) = 78px i højden.
Men jeg må have misforstået noget!?

---

On Fri, 16 Sep 2005 23:15:00 +0200, snubbi <-> wrote:

> Er border og padding ikke inden for elementet,
> og dermed medregnet i højde og bredde? (jvf.
> http://www.w3.org/TR/REC-CSS2/images/boxdim.gif)

Jeg går ud fra, du har fundet billedet på
<url:http://www.w3.org/TR/REC-CSS2/box.html>.
Prøv at kigge lidt længere nede i dokumentet:
"The box width is given by the sum of the left and right margins, border,
and padding, and the content width. The height is given by the sum of the
top and bottom margins, border, and padding, and the content height."

Så hvis du sætter en bredde på 100px, margin på 10px, padding på 20px og
border på 5px, så får du en samlet bredde på 100+2x10+2x20+2x5=170px.

> Jeg ville tro a.exp_div skulle have en højde på 78px (inklusiv de 2x 10px
> padding), fordi div.explore1 rummer 80px - 2x 1px (border) = 78px i
> højden.

Nej a.exp_div har du sat til 80px, derudover har du sat en border på 1px,
så elementet kommer til at fylde 82px på siden.
Når man angiver width og height, så angiver man den plads man vil have til
indhold. Hvad man så ønsker af margin, fyld og kanter kommer udenpå boksen.

Du kan læse mere om boks-modellen på
<url:http://css.maxdesign.com.au/listamatic/about-boxmodel.htm>.

--
Ryan Kristensen

---

> Du kan læse mere om boks-modellen på
> <url:http://css.maxdesign.com.au/listamatic/about-boxmodel.htm>.

Interessant. Det afhænger åbenbart helt af doctype specification, fordi
bestemmer om browseren kører quirks mode eller ikke. Med den doctype jeg
normalt bruger er padding og border indvendigt, mens det er udvendigt med
strict og loose:

http://home1.stofanet.dk/snub/inout.htm
http://home1.stofanet.dk/snub/inout_loose.htm
http://home1.stofanet.dk/snub/inout_strict.htm

Tak for hjælpen! Du har været utrolig hjælpsom!

---

> Du kan læse mere om boks-modellen på
> <url:http://css.maxdesign.com.au/listamatic/about-boxmodel.htm>.

Interessant. Det afhænger åbenbart af doctype specification (og quirks
mode). Med den doctype jeg normalt bruger er padding og border indvendigt i
IE 6.0 og Opera 7.5, mens det er udvendigt med strict og loose. Firefox har
den åbenbart udvendigt i alle tre situationer:

http://home1.stofanet.dk/snub/inout.htm
http://home1.stofanet.dk/snub/inout_loose.htm
http://home1.stofanet.dk/snub/inout_strict.htm

Tak for hjælpen! Du har været utrolig hjælpsom!

---

Nu troede jeg lige jeg forstod det, men det her giver ikke mening for mig:

http://home1.stofanet.dk/snub/inout_table.htm

Tabel 1: Samlet bredde på 200px - dvs. padding og border indvendigt?
Tabel 2 og div: Samlet bredde på 250px - padding/border udvendigt

Hvorfor ryger padding indvendigt i tabel 1, bare fordi jeg definerer
width/border og på table niveau? Og hvorfor ryger border også indvendigt?

---

snubbi wrote:

> http://home1.stofanet.dk/snub/inout_table.htm
>
> Tabel 1: Samlet bredde på 200px - dvs. padding og border indvendigt?
> Tabel 2 og div: Samlet bredde på 250px - padding/border udvendigt
>
> Hvorfor ryger padding indvendigt i tabel 1, bare fordi jeg definerer
> width/border og på table niveau? Og hvorfor ryger border også
> indvendigt?

Tabeller er en verden for sig. Det må du bare lære at leve med. ;)

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk/

---

> Tabeller er en verden for sig. Det må du bare lære at leve med. ;)

Ja, det må jeg give dig ret i Jeg fandt følgende tegning, der sådan set
forklarer det hele:
http://www.w3.org/TR/REC-CSS2/images/tbl-width.gif
(http://www.w3.org/TR/REC-CSS2/tables.html#collapsing-borders)

Mht. padding må svaret være, at padding stadig lægges uden på cellen i
"test-table1", men at den så stadig fratrækkes i bredden, fordi bredde er
sat på table niveau.

Mht. border skulle den jo både udvendigt (både på celle og table), så det
forstår jeg ikke helt endnu. Men i mit "test-table1" eksempel er den inden
for de 200px bredde sat på table niveau, så det bestemmer åbenbart på et
højere niveau.