padding-top FF vs IE

[Korpglugg]

Hej.

 

Jag håller på med en layout där enstaka pixlar är viktiga.

 

Mitt problem är att trots att jag har satt

*
{ margin: 0; padding: 0; }
body
{ margin: 0; padding: 0; }

 

Samt anger både noll eller önskat värde i elementen, så blir det 1 pixel mer padding i FF än i IE.

När jag vill ha padding 0, så blir det 2 pixlar från översta delen på texten och upp till kanten på elementet, i IE, men 2 pixlar i FF.

Det gäller att det blir mer luft kring text i FF än i IE (tror jag).

 

Jag har senaste versionerna av båda läsarna.

 

På en annan site jag har, har jag lyckats få bort detta, men jag kan inte minnas hur, och jag ser inget i koden som är "konstigt", snarare färre margins och paddings med nollvärde i den korrekta sidan.

 

Alltså måste det ju vara något enkelt som jag missar.

 

 

Tråden flyttad från Webblayout & -design av moderator

 

[inlägget ändrat 2009-08-03 09:23:34 av Cluster]

[Simonsson]

Även om du har skrivit in definitionen

*
{ margin: 0; padding: 0; }
body
{ margin: 0; padding: 0; }

så kan externa .css mallar påverka, bara ett tips..

 

jag fattar inte exakt vad du menar, ladda upp två bilder och visa, så blir det lättare att hjälpa

 

[Korpglugg]

Hej.

 

Jag har den där koden i mina externa mallar. I själva html-filen har jag bara enstaka formatering för element som behöver annat än grundformatering.

Som att lägga till padding eller margin.

 

Jag bifogar en bild.

 

De båda ljusa rutorna på bilden, är divar med lite text i (som synes...).

Den vänstra är i FF den högra i IE.

 

I FF börjar texten lite längre ned, och har större mellanrum mellan raderna.

 

Jag kunde fixa till det hyfsat med line-height (ej på bifogade bild), men det var fortfarande lite skillnad, som jag av princip stör mig på eftersom det är en nödlösning.

 

Om jag lägger till en border runt divarna, så syns det tydligt att det är just texten som verkar ha mer luft i ovankant i FF än i IE.

 

[bild bifogad 2009-08-02 17:54:34 av Korpglugg]

[Simonsson]

Minns det där felet, kommer själv inte ihåg hur jag löste det och jag minns inte alla kommandon, men har du definerat padding-top eller margin-top samt padding-bottom eller margin-bottom?

 

testa lek med border-collapse och text-align samt vertical-align

 

[Korpglugg]

Jag har testat med margin och margin-top, padding och padding-top o.s.v.

nollställt med * och i body.

Margin 2px och padding 0px eller margin 0px och padding 2px i aktuella diven. Även provat värde 1 i båda :-)

 

I IE så är margin eller padding 2px men i FF 3 px.

 

Och inget fungerar.

 

Line-height fungerar lite sådär. Väldigt underligt.

Vissa värden ger jämn text, andra inte. Jag kan se att vid vissa värden så flyttar sig texten enbart i den ena raden, och vid andra värde flyttar den sig i båda raderna.

Vi ojämnheter är det alltid FF som har största mellanrummen/avstånd till top.

 

Det handlar om att det skiljer på just 1 px.

 

Har också kollat doctype.

 

border-collapse fungerade inte, det verkar inte ha med det här problemet att göra om jag förstod rätt (googlade).

 

[Micke_skane]

Såna här avikelser kan bero på ett antal parametrar(logiska och ologiska) i css-koden eller hur flödet i html-koden är gjord.

Ett tips är(om det är möjligt) att plocka ner koden i små delar och kontrollera steg för steg när avikelsen sker.

 

[Korpglugg]

Jag har försökt bryta ned och se bit för bit. Har inte upptäckt felen.

 

Jag googlade lite mer på line-height, och upptäckte relativa värden som procent eller bara en siffra (där 1 är 100 %).

 

Att sätta procent fungerade inte, men när jag skrev 1.2 (som var det passande) så fungerade det perfekt. Testade i en massa olika storlekar på texten och olika värden på line-height, så att det inte bara var en tillfällighet.

 

Jag fattar inte riktigt varför, men kanske detta påverkar första raden bättre och inte bara under baseline (det var vad jag fick för mig av det jag läste - jag är kass på engelska).

 

Hela sidan blev enhetligare i FF vs IE även i text där det inte spelar så stor roll med en px hit eller dit.

 

[Simonsson]

gå in på pastebin och pasta hela kodsnutten så vi alla kan hjälpa dig.