Avatar billede sansalvador Nybegynder
29. august 2006 - 02:15 Der er 7 kommentarer og
1 løsning

Div/span gider ikke reagere på width

I længere tid har jeg spekuleret på, hvorfor div og span ikke
reagerer på fx "width: 100%" i FF.

Hvis jeg fx har en div med lidt tekst i, og gerne vil have en baggrundsfarve på denne div, samt have den til at fylde 100% i width, så gider den bare ikke at "sprede" sig længere horisontalt end til slutningen af teksten.

Det virker jo ganske fint i vores elskede IE :)

Nogen der kan forklare dette? Og hvor går IE (som altid) eller jeg (næsten altid) galt...
Avatar billede mm12010 Nybegynder
29. august 2006 - 07:47 #1
når mål angives i procent skal det element som indholder dit span have difineret en fast width, da der jo ellers ikke er noget at beregne de 100% ud fra -- det kan oz være der er noget helt andet der er galt, men smid koden her, så er det lidt lettere at finde eventuelle andre fejl...
Avatar billede mclemens Nybegynder
29. august 2006 - 10:08 #2
Hvilken af fejlene tænker du på?
... jeg synes ikke at jeg har problemer?
... har du et test eksempel?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>
<span style="width:100%;background:red;">span (inline width 100%)</span>

<br><br>

<span style="width:100%;background:red;display:block;">span (block width 100% - brug div istedet)</span>

<br><br>

<div style="background:red;">div (block)</div>

<br><br>

<div style="background:red;width:100%;">div width:100%; (block)</div>
</body></html>
Avatar billede mclemens Nybegynder
29. august 2006 - 10:21 #3
eksempel på en mulig fejl:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>

<div style="position:relative;height:0px;"><div style="position:absolute;">


<span style="width:100%;background:red;">span (inline width 100%)</span>

<br><br>

<span style="width:100%;background:red;display:block;">span (block width 100% - brug div istedet)</span>

<br><br>

<div style="background:red;">div (block)</div>

<br><br>

<div style="background:red;width:100%;">div width:100%; (block)</div>



</div></div>
</body></html>



vs.:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>

<div style="position:relative;height:0px;"><div style="position:absolute;width:100%;">


<span style="width:100%;background:red;">span (inline width 100%)</span>

<br><br>

<span style="width:100%;background:red;display:block;">span (block width 100% - brug div istedet)</span>

<br><br>

<div style="background:red;">div (block)</div>

<br><br>

<div style="background:red;width:100%;">div width:100%; (block)</div>



</div></div>
</body></html>
Avatar billede mclemens Nybegynder
29. august 2006 - 10:22 #4
Det var fejlen mm12010 bl.a. nævner ...
Avatar billede roenving Novice
31. august 2006 - 10:05 #5
Kunne du bruge det ?-)
Avatar billede sansalvador Nybegynder
31. august 2006 - 11:39 #6
Ja, undskyld forsinkelsen, men mit virkelige liv måtte lige anvendes lidt :)

Ja, jeg må tage til mig, at jeg faktisk selv lavede fejlen...

Det var overflow: hidden, der gjorde udslaget... Den er fjernet, og det virker fint. Men jeg har lært en del af, det mcclemens har skrevet.

Og det må jeg da sige, at det må belønnes :)
Avatar billede sansalvador Nybegynder
26. november 2006 - 20:38 #7
...
Avatar billede mclemens Nybegynder
26. november 2006 - 21:01 #8
Sorry, jeg sover / overser ;)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester