---

Hej,
Nu har jeg efterhånden stødt ind på dette irriterende (og måske
meget simple) problem, op til flere gange:

I kender det sikkert allesammen, når man sidder og roder med en
masse boxes, der er kodet med CSS. Denne her indholdsboks, hvor
teksten skal stå har det med at flytte sig ned under alle de
andre bokse, hvis at antal pixel i bredden overgår max antal
bredde-pixels. Problemet opstår, når jeg vil sætte noget padding
på min tekst, så den ikke står close op af indholdskassens sider.
FF, Opera, Netscape og IE7 kan sagtens finde ud af det - jeg tror
at det er fordi at de ikke tæller padding inde i en boks med, som
ekstra antal pixels. Det gør IE6 derimod. Så snart man får lavet
en padding på et bestemt antal pixels, rykkes boksen ned under
alle de andre bokse. Jeg kan godt selv se, hvad det er der går
galt, nemlig at der simpelthen ikke er nok plads - mit ydre
dokument er ikke bredt nok til at rumme en så bred padding (i
IE6). MEN, hvad gør jeg? Jeg kan vel bruge microsoft betingede
kommentarer, til IE6 problemet er bare, at IE6 bare vel ignorerer
paddingen - og det er jo ikke meningen. Paddingen på
indholdsboksen skal være ens uanset hvilken browser man kigger i.
Så det store spørgsmål er: Hvad kan man bruge i stedet for
padding? Jeg har prøvet at fifle lidt med de enkelte pixels, men
jeg tror aldrig at det vil gå op, når de to browsere kommer med
et sådant forskelligt resultat. Sætter man antal pixel ned,
bliver boksen jo mindre, og vil derfor ikke udfylde det den skal.
Så måske man skal have fat i en formatering, der fortæller noget
om max antal bogstaver på en linie, eller er jeg helt lost? ;)

På forhånd tak :)

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Stefan Køberl skrev:
> Hej,
> Nu har jeg efterhånden stødt ind på dette irriterende (og måske
> meget simple) problem, op til flere gange:
>
> I kender det sikkert allesammen, når man sidder og roder med en
> masse boxes, der er kodet med CSS. Denne her indholdsboks, hvor
> teksten skal stå har det med at flytte sig ned under alle de
> andre bokse, hvis at antal pixel i bredden overgår max antal
> bredde-pixels. Problemet opstår, når jeg vil sætte noget padding
> på min tekst, så den ikke står close op af indholdskassens sider.

<snip-snip>

Noget kunne tyde på, at dine sider er
i quirks modus. Med en standardsættende
dokumenttypeerklæring vil også IE6 tolke
et elements bredde på samme måde som andre
nyere browsere, det vil sige som summen
af width, padding og border. Det man somme
tider glemmer er, at margin også fylder noget.
Men det fænmen er ens i alle browsere.

Den letteste måde at undgå den slags
problemer på er at sætte margin på de
elementer, der befinder sig /inde/ i layout-
elementet. Hvis du for eksempel har et
layout-element #indhold kan du
lave formdeklarationen
#indhold * {
margin:0 12px 0.5em 12px;
}
der vil medføre, at alle elementer
får en højre og venstre afstand til
forældreelementet på 12 pixel.


--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
Webdesign håndbøger: http://733.dk

---

> Noget kunne tyde på, at dine sider er
> i quirks modus.

Det tror jeg da ikke.

> #indhold * {
> margin:0 12px 0.5em 12px;
> }
> der vil medføre, at alle elementer
> får en højre og venstre afstand til
> forældreelementet på 12 pixel.

Har du eventuelt et link, der forklarer ovennævnte. Jeg synes ikke
lige at få det til at virke. Du kan se min side her:
http://infoscape.dk/om_mig.html

Tak for respons


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Stefan Køberl skrev:
>> Noget kunne tyde på, at dine sider er
>> i quirks modus.
>
> Det tror jeg da ikke.
>
>> #indhold * {
>> margin:0 12px 0.5em 12px;
>> }
>> der vil medføre, at alle elementer
>> får en højre og venstre afstand til
>> forældreelementet på 12 pixel.
>
> Har du eventuelt et link, der forklarer ovennævnte. Jeg synes ikke
> lige at få det til at virke. Du kan se min side her:
> http://infoscape.dk/om_mig.html
>
> Tak for respons
Du er allerede på vej:

<div id="indhold">
<h2>Om mig</h2>
<div style="padding:24px 9px 0px 9px;">
<p style="padding-top:10px;"></p>
<p>test test test test test test test test test test test test test test
</p>
....
</div>
</div>

ville jeg lave som

<div id="indhold">
<h2>Om mig</h2>
<div class="textpadder">
<p>test test test test test test test...
....
</div>
</div>

med følgende stylesheet:
..textpadder {margin:0 9px 0.5em 9px;}
#indhold h2 {margin:24px 9px 10px 9px;}

Efter min erfaring kan man let fare vild i
det her, når man både bruger stylesheet og
inline styles. Jeg bruger /aldrig/ det
sidste, selv ikke til det allermindste.

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
Webdesign håndbøger: http://733.dk

---

> med følgende stylesheet:
> ..textpadder {margin:0 9px 0.5em 9px;}
> #indhold h2 {margin:24px 9px 10px 9px;}

Det vil da ikke få IE6 med? ;)

> Efter min erfaring kan man let fare vild i
> det her, når man både bruger stylesheet og
> inline styles. Jeg bruger /aldrig/ det
> sidste, selv ikke til det allermindste.

Du har ret :)

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Stefan Køberl skrev:
>> med følgende stylesheet:
>> ..textpadder {margin:0 9px 0.5em 9px;}
>> #indhold h2 {margin:24px 9px 10px 9px;}
>
> Det vil da ikke få IE6 med? ;)

Nej muligvis ikke med den fejl, jeg har
har lavet, men jeg kan ikke se nogensomhelst
grund til at det ikke skulle virke i både
IE5 og IE6 - medmindre du har nogle formregler,
jeg har overset.

Fejlen er to prikker foran textpadder, det
naturligvis være .textpadder.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

> men jeg kan ikke se nogensomhelst
> grund til at det ikke skulle virke i både
> IE5 og IE6 - medmindre du har nogle formregler,
> jeg har overset.

Ok, det kan jeg heller ikke - men det virker ikke. (hos mig i
hvert fald)

> Fejlen er to prikker foran textpadder, det
> naturligvis være .textpadder.

Jeg prøvede lidt af hvert i formiddags, så du så måske min side
da jeg testede lidt - det må du undskylde. Pt. står sidens
"textpadder" som ".text", og jeg ser desværre ingen ændring i
IE6. Siden validerer også, så det er forhåbentlig ikke nogen
tastfejl.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Men saa lukker jeg traaden her.
Hvis nogen finder ud af en maade at loese problemet paa, saa
skriv endelig, jeg skal nok soerge for at checke traaden her de
naeste dage frem (alligevel).

Og tak for hjaelpen Joergen - om det er dig der har givet mig
forkert kode, eller mig der har misforstaaet dit svar ved jeg
ikke. Men tak for din respons - uanset.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials