Søg
Avatar billede it-interesseret Nybegynder
17. juni 2006 - 18:20 Der er 14 kommentarer og
1 løsning

padding-left tolkes ikke ens i FireFox og Internet Explorer

Hej alle

Jeg har følgende kode: <div style="padding-left:70px">

Hvor IE rykker omkring 10 pixels mere ind end FF gør.

Nogen løsning?
Avatar billede Slettet bruger
17. juni 2006 - 19:32 #1
Forklaring:
Det er IE som ikke kan finde ud af det. IE følger ikke W3C´s regler - ihvertfald ikke på det punkt.

Evt. løsning:
Lav et IE-hack eller drop at bruge padding.
Avatar billede mclemens Nybegynder
17. juni 2006 - 19:40 #2
Disse vises ens hos mig...

<!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="padding-left:70px;background:#aaa;"><div style="background:#888;">test</div></div>
</body></html>




... der er dog flere problemer i IE, en af dem er problemet med margin og float...

<!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="padding-left:70px;background:#aaa;width:200px;height:100px;"><div style="float:left;margin:30px;background:#888;">test</div></div>
</body></html>
Avatar billede mclemens Nybegynder
17. juni 2006 - 19:40 #3
Edit: Disse vises ens hos mig...
-> Den øverste vises ens i både IE og FF hos mig
Avatar billede it-interesseret Nybegynder
17. juni 2006 - 19:41 #4
Ok, men hvad skal jeg så anvende i stedet for padding-left?
Avatar billede mclemens Nybegynder
17. juni 2006 - 19:43 #5
padding-left...? Har du problemer med padding-left så giv mig lige noget der ikke virker... evt. hvis du har problemer med margin så kig på denne ... det kan måske også løse problemer med padding ... selvom jeg ikke kender til det problem?

http://www.eksperten.dk/spm/714980
Avatar billede mclemens Nybegynder
17. juni 2006 - 19:43 #6
Hov måske mere dette link med dobbelt floatede div's
http://www.eksperten.dk/spm/713785#rid6293723
Avatar billede mclemens Nybegynder
17. juni 2006 - 19:49 #7
P.s.: Husk gyldig doctype og pas på med eller undlad xml deklarationen ved kodning af xhtml ellers (får man)/(kan man få) grå hår ved css ... og ja, så er det problemet som extend hentyder til - nemlig at IE er i quirks med f.eks. xml deklarationen før doctypen :o)

- har dog selv xml deklarationen så jeg har p.t. en forskydning på 2px
(1px left og 1px right på menupunkter) indtil vi når IE 7 :o)
Avatar billede mclemens Nybegynder
17. juni 2006 - 19:58 #8
^ Problemet på min side er dog først opstået efter at jeg lavede 2 border div's om til 1 div med en border og indre baggrund samt 1px padding ... det gav så lige en dobbelt padding effekt i IE, men vi når nok IE 7 i år, så 2px er ikke noget jeg hænger mig i, når det ikke er "min fejl"...

(eller rettere et hack der ikke er yderst vigtigt, bør ikke laves, da det ofte kan give mere html output end nødvendigt - og være svær at vedligeholde med tiden... )
... men ellers så kig på de to links - eller kast problemet i sine naturlige omgivelser...
Avatar billede it-interesseret Nybegynder
17. juni 2006 - 20:02 #9
Der er check på doctype mv. og der anvendes ikke xml, men jeg fandt faktisk fejlen, hvilket var at jeg havde en div med en iframe i. Den var tom (for tekst), men da jeg indsatt en "&nbsp;" så blev browserne enige om, hvordan det skulle tolkes.

Koden førhen:
<div style="padding-left:80px">
<iframe style="background-image:url('/images/layout/lime-background.gif')" name="miniplayer" src="/player/iframe_miniplayer.asp" width="209" height="186" marginwidth="1" marginheight="1" border="0" frameborder="0" align="center" scrolling="no"></iframe>
</div>

Koden nu (som virker):
<div style="padding-left:80px">&nbsp;
<iframe style="background-image:url('/images/layout/lime-background.gif')" name="miniplayer" src="/player/iframe_miniplayer.asp" width="209" height="186" marginwidth="1" marginheight="1" border="0" frameborder="0" align="center" scrolling="no"></iframe>
</div>
Avatar billede it-interesseret Nybegynder
17. juni 2006 - 20:04 #10
Utroligt ... så lidt der skal til. Var helt bange for at skulle have en større work-around, men det blev heldigvis ikke relevant.

Takker for budene - tryk svar, hvis I vil have nogle poins :-)
Avatar billede mclemens Nybegynder
17. juni 2006 - 20:12 #11
Tjah er selvfølgelig kommet med et par bud og extend er jo også kommet med et godt bud - synes vi tager imod tilbuddet ... Øhm, &nbsp; deaktiverer foresten den forældede html attribut align="center" som du har sat på din iframe (og det er foresten kun IE der overholder den attribut) ... måske skulle du bare fjerne den istedet for at indsætte &nbsp; ?
Avatar billede mclemens Nybegynder
17. juni 2006 - 20:14 #12
Hvis du vil have den centreret i forhold til det ydre element,
så prøv en margin:0px auto; i css style, der hører til iframen...
Avatar billede it-interesseret Nybegynder
17. juni 2006 - 20:27 #13
Takker - så ser koden også pænere ud.
Avatar billede mclemens Nybegynder
17. juni 2006 - 20:34 #14
Velbekom, og tak for point :o)

Extend vil du have nogle af dem?
Opretter gerne en overførsel... ;o)
Avatar billede Slettet bruger
18. juni 2006 - 05:50 #15
mclemens:
Nej tak - det er jo dig som er kommet med en løsning. :-)

Vedr. padding, har jeg altså selv bare holdt "fingrene ude af hvepseboet", og angivet padding til 0, og så fundet andre løsninger - netop fordi IE ikke fortolker padding som IE burde, iflg. W3C.
Ellers bruger jeg også kun et rigtigt godt IE-hack, hvis jeg er tvunget til det.
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
07/1022:52 Google beskeder har/havde en bug, så den sendte tilfældige gamle beskeder gemt indeni nye beskeder efter skifte til ny Samsungtelefon via Samsung Smart Switch Af KennethLykke i Apps til Android
05/1010:31 Min IPAD vil ikke oplade. Af Nørdnot i Mac
04/1018:04 Findes der et "Papir-kurv" symbol, man kan sætte på Firefox og Google Chrome ? (For oven) Af Ikke-ekspert i Browsere
03/1012:14 Ang udskrift Canon mb5050 Af made18 i Printere
02/1021:29 Vedr. Windows 11 version 26H2 Af ErikHg i Fri debat
White papers
Flere white papers »