Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Hur löser DU padding-problemet i CSS mellan Mozilla & IE

1
Skriv svar
Permalänk
Medlem
●

Hur löser DU padding-problemet i CSS mellan Mozilla & IE

Borde nästan finnas nåt klistrat om det här tycker jag, för om detta problem är så stort som jag börjar misstänka så borde ju folk snacka sånt här hela dagarna här inne
Jag skulle iallafall vilja veta vilken metod som är mest vanlig, eller mest "korrekt".

Problemet är alltså att Internet Explorer tolkar CSS på sitt eget sätt, så en div-box gjord i CSS med width:100px och padding:10px blir i Mozilla (och alla andra korrekta browsers) 100 + 10 + 10 bred, paddingen läggs utanpå.
I IE läggs paddingen inuti och den boxen blir alltså 100px bred.

Detta verkar kunna lösas på några olika sätt.

1. Fula kod-hack, där man enkelt förklarat lägger in flera definitioner på sin bredd av boxen i fråga, men på de olika raderna lägger man in olika typer av "fel" som vissa av läsarna klarar att tolka och andra hoppar över dom.

2. Köra strict xthml i sin kod, genom att lägga till denna rad överst i html-filerna.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
Då tolkar iallafall IE6 koden rätt, men gamla IE5.5 klarar fortfarande inte.

3. Stänga in alla sina boxar i yttre boxar som inte har vare sig padding eller margin eller några egenskaper alls förutom den exakta bredd man önskar. Sedan väljer man bredd 100% på boxarna inuti och overflow: hidden.

Metod 1 känns rätt osäker och desperat tycker jag.

Metod 2 gör att man måste lära sig html en gång till för den ändrar tolkningen så att alla jävla html-kommandon måste skrivas annorlunda annars blir det fel (även om den verkar fatta vanlig kod men testar man i validerare så klagar den som en tok på allt).

Metod 3 funkar väl bra antar jag, men jobbigt om man vill ha text som ska fylla ut boxen på bredden, för då lär ju den klippas av och hamna utanför i Mozilla medans den är precis lagom paddad i explorer antar jag. Vet ej om det går att lösa på bättre sätt än width: 100% vilket ju ger overflow
Verkar som width inte räknar med paddingen i rätta CSS-tolkningen.
Kanske går att köra padding 0 åt höger och vänster eller nåt för att lösa det jag vet inte, men det är ju inte så praktiskt eller kul.

Jaja, jag är nybörjare och allt detta är kanske helt galet....detta är bara så som jag ser problemet just nu. Är det för mycket fel så får jag väl deleta tråden eller nåt om nån klagar

Visa signatur

CCNA sedan juni 2006

Redigera
Citera flera Citera
Permalänk
Medlem
●

Lägger en div i en annan och padding på den inre, det funkar i alla läsare. Eller köra med tantek hacket. Dessutom, att inte köra xhtml är korkat idag. Det är inte svårare.

Visa signatur

läs min blog om webbutveckling här!!!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag kör med box-model hacket, dvs alternativ 1. Enda nackdelen med det som jag ser det är att inte css:en validerar. (men man kan ju sålla igenom varningarna och ha koll på allt annat ändå)

Visst kanske alt. 3 är snyggast, men då har man ingen riktig koll på innerstorleken, eller har man? Tänker jag fel?

För mig är det viktigt att både innermåtten och yttermåtten har bestämda storlekar, och det kan jag fixa med alt. 1. På så vis kan jag ha en bild som alltid syns till 100% och text som har rätt avstånd till ramen - paddingavståndet.

Kan någon vänlig typ kolla upp hur det är med innermåtten på alt. 3? Kan det bli så att en bild kanske inte syns till hundra procent, eller får stor marginal till ena kanten?

Visa signatur

Mor åt gröt. Far åt helvete.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av walter groupius
Lägger en div i en annan och padding på den inre, det funkar i alla läsare. Eller köra med tantek hacket. Dessutom, att inte köra xhtml är korkat idag. Det är inte svårare.

Ja men det är ju som jag skrev i metod 3, stänga in allt i en yttre box som bestämmer bredden, och så köra width: 100% på de inre. Men eftersom paddingen tolkas olika på den inre boxen så kommer den svälla över den yttre boxen i Mozilla men inte i IE.

Menar du att xhtml är framtiden, att det är så html kommer att bli, eller är det nåt man kanske sitter och lär sig och krånglar med sluttags till allting (<br> </br> tror jag det måste vara) och sen om nåt år så är det helt borta och så kan man inte vanlig html längre utan har fastnat i den här skiten
Jag vet inte vad som är på väg och exakt vad xhtml är, you tell me
Jag vet bara att kör man vanlig html i en xhtml-validator så får man fel på nästan varenda rad

Märker nu att
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
verkar funka för att få strict tolkning av CSS i IE6, så då slipper man xhtml om man vill. Men detta hjälper ju som sagt inte IE 5 och 5.5 som inte klarar doctype.

Visa signatur

CCNA sedan juni 2006

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ja men det är ju som jag skrev i metod 3, stänga in allt i en yttre box som bestämmer bredden, och så köra width: 100% på de inre. Men eftersom paddingen tolkas olika på den inre boxen så kommer den svälla över den yttre boxen i Mozilla men inte i IE.

- Sa fel tror jag, jag menade at köra en outer margin på den inre helt enkelt, det kommer inte vara problem i nån läsare.

Menar du att xhtml är framtiden, att det är så html kommer att bli, eller är det nåt man kanske sitter och lär sig och krånglar med sluttags till allting (<br> </br> tror jag det måste vara) och sen om nåt år så är det helt borta och så kan man inte vanlig html längre utan har fastnat i den här skiten
Jag vet inte vad som är på väg och exakt vad xhtml är, you tell me
Jag vet bara att kör man vanlig html i en xhtml-validator så får man fel på nästan varenda rad

- xhtml är framtiden ja, vad tror du det kommer sig att w3c inte skapade en ny version av html?... Xhtml är i stort sett samma sak att skriva. Men helt annorlunda i grunden. Det finns idag INGEN orsak att skriva html.
Orsaken till att du får fel på din html i valideringen är för att du skriver felaktig html.

föressten:
http://www.hoglind.org/blog/index.php?p=31

Märker nu att
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
verkar funka för att få strict tolkning av CSS i IE6, så då slipper man xhtml om man vill. Men detta hjälper ju som sagt inte IE 5 och 5.5 som inte klarar doctype.
- slipper xhtml? Det är ett privilegium : )

Visa signatur

läs min blog om webbutveckling här!!!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Och är inte så stora skillnader faktiskt Avsluta alla taggar bara, och skriv dem med versaler (hoppas små bokstäver är versaler iaf )
Samt att fixa allt designjox med CSS.
Btw, <br> skrivs <br />

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Re: Hur löser DU padding-problemet i CSS mellan Mozilla &amp; IE

Citat:

Ursprungligen inskrivet av Seb74
... 2. Köra strict xthml i sin kod, genom att lägga till denna rad överst i html-filerna.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
Då tolkar iallafall IE6 koden rätt, men gamla IE5.5 klarar fortfarande inte...

IE5.5 Tolkar det fint för mig på min sida, bara det att sidan inte blir centrerad...

Sen så är den doctypen fullständig, den fullständiga är:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Visa signatur

Vim
Kinesis Classic Contoured (svart), Svorak (A5)
Medlem i signaturgruppen Vimzealoter.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Ibis
Och är inte så stora skillnader faktiskt Avsluta alla taggar bara, och skriv dem med versaler (hoppas små bokstäver är versaler iaf )
Samt att fixa allt designjox med CSS.
Btw, <br> skrivs <br />

Gemener, inte versaler. Utöver det där måste attribut alltid ha värden - inte <option selected>Bla</option> utan <option selected="selected">Bla</option> - samt att vissa taggar försvunnit. Åtminstone i strict ska man använda <strong>, inte <b> t.ex.

Visa signatur

Personlig webbplats Talman2Batmanizer Slänko Remindera
Greasemonkey-script Artwork of Johanna Öst

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av Malesca
Gemener, inte versaler. Utöver det där måste attribut alltid ha värden - inte <option selected>Bla</option> utan <option selected="selected">Bla</option> - samt att vissa taggar försvunnit. Åtminstone i strict ska man använda <strong>, inte <b> t.ex.

Hmm, säker på det där sista? har använt <b> men koden validerar ändå :/ Får hem och kolla

Edit: kom på att det gick fortare att kolla med W3C
http://www.w3schools.com/tags/tag_font_style.asp
<b> finns i strict med.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Okej, då kanske det bara är en rekommendation, eller så var det nåt konstigt i min pistagenöt.

Visa signatur

Personlig webbplats Talman2Batmanizer Slänko Remindera
Greasemonkey-script Artwork of Johanna Öst

Redigera
Citera flera Citera
Permalänk
Medlem
●

Nja, jag tror du har rätt, i xhtml 1.1 validerar <b> inte, men i transitional gör den det.

Visa signatur

läs min blog om webbutveckling här!!!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av walter groupius

- Sa fel tror jag, jag menade at köra en outer margin på den inre helt enkelt, det kommer inte vara problem i nån läsare.

Så man ska bara köra margin då istället för padding menar du?
Är väl iochförsig så att margin tolkar alla likadant, bara padding som bråkar, men går margin lika bra att använda då som alternativ till padding?

Visa signatur

CCNA sedan juni 2006

Redigera
Citera flera Citera
Permalänk
Medlem
●

<b> "ska" man inte köra, man ska hellre köra <p>kjamiz<span class="bold">puzz</span> *tihi*</p> och ha .bold { font-weight: bold; }. Personligen tycker jag det är onödigt, men det har ju med design att göra, och det ska ju inte skötas av (X)HTML. Det finns även <strong>, som gör samma sak som <b>(tror inte det är någon skillnad alls, har iaf aldrig sett nån, rätta mig gärna) och den "ska" man inte heller köra.

Personligen kör jag med xhtml1.1 strict-validering på alla mina sidor. T.o.m. admin-sidorna och 404-sidan validerar. Dessutom struntar jag i om IE visar mina boxar lite fel, det rör mig inte i ryggen, på min personliga sida. Däremot om jag skulle koda en större site till något företag eller liknande skulle jag nog fulhacka. Bygga in dubbla divar har jag inte provat, kanske går det oxo.

Seb74: Padding använder du för att få in saker från kanterna. Istället för:

|hejsan|
får du:
|   hejsan   |

Och padding är inuti boxen, margin är utanför.

Edit: Tror jag missuppfattade, men nån kan säkert ha användning för bilden och min lilla förklaring. 8]

Senast redigerat
Visa signatur

Äntligen har jag fått svar på om vandrande pinnar kan gäspa. Det kan de inte. Ett av världens stora mysterier är löst.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag löser det inte. För mig spelar det ingen roll om det ser lite olika ut. Bara det inte ser helt förstört ut.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Seb74
Så man ska bara köra margin då istället för padding menar du?
Är väl iochförsig så att margin tolkar alla likadant, bara padding som bråkar, men går margin lika bra att använda då som alternativ till padding?

ja, om du har margin på den inre så är ju det samma sak (samma funktion) som padding på den yttre!

Visa signatur

läs min blog om webbutveckling här!!!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tanken var att <strong></strong> skulle användas på text som man vill förtydliga. "Glöm inte att kontrollera dina uppgifter." Medan <b></b> skulle användas på annan text man vill ha i fet stil.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Locke
Jag löser det inte. För mig spelar det ingen roll om det ser lite olika ut. Bara det inte ser helt förstört ut.

Precis.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Spaic: så kan dte nog vara, att de gör samma sak men att de har olika syften rent användningsmässigt.

Visa signatur

Äntligen har jag fått svar på om vandrande pinnar kan gäspa. Det kan de inte. Ett av världens stora mysterier är löst.

Redigera
Citera flera Citera
Permalänk
Medlem
●

<strong> är väl aningens mer semantiskt än <b[old]> också, även om det väl är tydligare i paret <em[phasis]> och <i[talic]>.

Visa signatur

Personlig webbplats Talman2Batmanizer Slänko Remindera
Greasemonkey-script Artwork of Johanna Öst

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ok, så det är många som kör xhtml (eller iallafall strict doctype) så IE6 tolkar CSS som det ska tolkas, och sedan inte bryr sig ifall äldre läsare får det hela lite skevt.

Oftast spelar det ju kanske inte så stor roll om hela sidan påverkas likadant, och om nån liten box bråkar och sticker ut/in jämfört med allt annat så kan man kanske stänga in den.

Men iallafall, det här med XHTML, är det alltså det man ska lära sig?
Och VAR lär man sig det i så fall, för alla html-tutorials som finns är ju just html.
Eller finns det massa xhtml-tutorials också kanske....får ta och googla när jag kommer hem (körde alltid yahoo förut men nu när jag gått över till Mozilla så är det ju rätt smidigt att googla i address-fältet )

Men de stora grejerna är alltså endast små bokstäver, sluttaggar på ALLT, och så är det massa egenskaper det inte gillar att ha i html som man ska göra styles för istället?
Undrar vad som händer i riktigt gamla browsers också....dom lär ju inte "förstå" xhtml som ser "helt annorlunda" ut.

Visa signatur

CCNA sedan juni 2006

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://www.w3schools.com/xhtml/xhtml_howto.asp

Som du säger, de stora skillnaderna är gemener (<p>, inte <P>), slut-taggar(<br /> inte <br>, <img ... /> inte <img ...>), korrekt ordning(<div><p>hej</p></div> inte <div><p>hej</div></p>) osv. Man ska göra rätt helt enkelt.

Visa signatur

Äntligen har jag fått svar på om vandrande pinnar kan gäspa. Det kan de inte. Ett av världens stora mysterier är löst.

Redigera
Citera flera Citera
Permalänk
Medlem
●

"undrar vad som händer i riktigt gamla browsers också....dom lär ju inte "förstå" xhtml som ser "helt annorlunda" ut."

- Graceful degrading!

Visa signatur

läs min blog om webbutveckling här!!!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av walter groupius
"undrar vad som händer i riktigt gamla browsers också....dom lär ju inte "förstå" xhtml som ser "helt annorlunda" ut."

- Graceful degrading!

Eller: Tråkigt, skaffa nyare webbläsare.

Man kan inte hela tiden titta bakåt och göra full kompabilitet, särskillt nu när det finns femtioelva webbläsare att ladda ner gratis som förstår xhtml som för övrigt knappt är annorlunda mot korrekt skriven HTML-kod.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av walter groupius
Nja, jag tror du har rätt, i xhtml 1.1 validerar <b> inte, men i transitional gör den det.

Ah, det kan nog vara sant, validerar min sida som bara XHTML 1.0 Strict. Efter att ha läst denna tråd så bestämde jag mig för att stanna vid XHTML 1.0.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Dubbla DIVar plus att jag kör XHTML 1.1 strict.

Visa signatur

A64 3200+ @2700mhz (270*10) | 3dmark01: 25027 | Projekt: Lian-Li
Tillsammans med ÖA försvann den sista anledningen att hänga kvar på swec.

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://clew.no-ip.com/
tycker det ser ut som 1.0 tr jag

Visa signatur

läs min blog om webbutveckling här!!!

Redigera
Citera flera Citera
1
Skriv svar