Notifikationer

Markér alle som læst Log ud

casper_skovgaard Nybegynder

28. oktober 2004 - 16:10 Der er 7 kommentarer og
1 løsning

Div/padding/height problem i Mozilla Firefox

Jeg har en boks med en fast højde. Boksen skal indeholde en linie tekst. Default står teksten ikke korrekt, men skal rykkes lidt ned. Det har jeg gjort ved at sætte padding-top på boksen. Dette virker fint i IE men i Firefox udvides højden på boksen. Hvordan undgår jeg det?

Her er et eksemplet som kun virker i IE:

<div style="width: 200px; height: 35px; border: 1px solid green; padding-top: 10px;">
test123
</div>

I følgende eksemple har jeg brugt table til at lave det samme, dette virker i både IE og Firefox:
<table>
<tr>
<td style="width: 200px; height: 35px; border: 1px solid green; padding-top: 10px;">
test
</td>
</tr>
</table>

Synes godt om

Slettet bruger

29. oktober 2004 - 07:39 #1

Hvis du sørger for at sætte en passende DOCTYPE på din side (Så IE går i standards-mode), så vil IE (ihvertfald IE6) vistnok vise det korrekt, så det ser ens ud i IE og Firefox.

Synes godt om

casper_skovgaard Nybegynder

29. oktober 2004 - 08:39 #2

DOCTYPE er sat med følgende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Problemmet er ikke IE men Firefox

Synes godt om

roenving Novice

29. oktober 2004 - 13:07 #3

Nej !-)

Problemet er, at IE fejlagtigt lægger afstande som f.eks. padding og border inde i en boks' definerede højde eller bredde ...

-- Det defineres i css-standarden ('box-modellen') at den slags afstande skal tillægges boksens definerede højde eller bredde, så du kommer nok til at lave en slags hotfix i dette tilfælde (f.eks. med javascript eller måske nemmere ved at placere et element udenom, som har den korrekte højde og så give den indre div højden 100% !-), da ikke engang en korrekt doctype inklusive dtd-link reparerer IEs fejl her ...

En fuldt korrekt doctype inkluderer nemlig også et dtd-link, da IE for det meste går i quirks-mode uden dette:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

se: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Box-modellen: http://www.w3.org/TR/REC-CSS2/box.html

Synes godt om

casper_skovgaard Nybegynder

29. oktober 2004 - 13:48 #4

Tak roenving, det virker at sætte en div udenom, smid lige et svar.

her er løsningen:
<div style="width: 200px; height: 35px; border: 1px solid red;">
<div style="border: 1px solid green; padding-top: 10px;">
test123
</div>
</div>

Synes godt om

roenving Novice

29. oktober 2004 - 14:50 #5

Velbekomme '-)

Synes godt om

roenving Novice

29. oktober 2004 - 15:07 #6

-- og tak for point ;~}

Synes godt om

Slettet bruger

29. oktober 2004 - 19:31 #7

Roenving: Havde jeg misforstået? Havde de ikke fået boxmodellen rettet til i IE6, når den var i standardsmode?

Synes godt om

roenving Novice

01. november 2004 - 03:01 #8

Desværre nej, selve box-modellen er stadig i stykker ...
Mange andre ting virker ordentligt, hvis man bruger dtd-linket, men selve box-modellen, hrm, tjah, bum, bum !-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS