1 px skillnad mellan IE & FF

23 svar · 958 visningar · startad av DanneSt 10 apr. 2007

DanneStMedlem sedan feb. 20041 311 inlägg

Frågan10 apr. 2007 00:01#1

Hej!
Jag fattar inte varför bilden 'hover.jpg' hamnar 1 px längre ner i FF än i IE?? :q Länk till sidan.

* {margin: 0; padding: 0;}

body
{
  font-family: Verdana;
  font-size: 0.8em;
  background: url('images/head_bkgr.jpg');
}

#container
{
  width: 760px;
  height: auto;
  margin: 0px auto;
}

#head 
{ 
  position: relative;
  float: left;
  width: 100%; 
  height: 300px; 
  background: url('images/head.jpg');
  z-index: 5;
}

#meny
{
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  top: -169px;
  text-align: left;
  z-index: 10;
}
#meny li { list-style-type: none; float: left; margin-left: 0.5em; }
#meny a { display: block; font-size: 1.7em; font-family: Arial; color:#990066;}
#meny a:hover { background: url('images/knappar/hover.jpg'); color:#990066; }
#meny a:active { background: url('images/knappar/hover.jpg'); color:#cc3399; }

#content
{
  float: left;
  width: 100%;
  height: auto;
  text-align: left;
  line-height: 1.3em;
  overflow: hidden;
}

#footer
{
  width: 100%;
  height: auto;
  font-size: 0.8em;
  font-family: Arial;
  text-align: center; 
  background: url('images/footer.jpg');
}

Danne VMedlem sedan aug. 20068 090 inlägg

10 apr. 2007 08:03#2

Ingen aning. (Hinner inte kolla just nu).

Men måste kommentera något som inte är riktat till dig speciellt, utan till alla som vill ha hjälp med sånt här.

Om man gör sig besväret att ladda upp den aktuella sidan nånstans istället för att bara posta koden, så blir det oändligt, oerhört, kollosalt mycket lättare för folk att förstå problemet, att se sidan där ALL kod påverkar (inte bara snutten man tror felar) och att t.ex. laborera i Firefox med olika stilar eller helt sonika ladda ner hela sidan med bilder och rubbet. Men får alltså fler, mer korrekta och snabbare svar.

Jag var aktiv många år på Dreamweaver-forumet, där var detta väldigt tydligt. Folk som postade kod fick alltid bara ett fåtal, ofta missvisande svar och gissningar. Andra, som la in en länk till sidan i skarpt läge, fick svar nästan direkt, och BRA svar dessutom - plus andra värdefulla tips.

Haruenlänk, månne?

DanneStMedlem sedan feb. 20041 311 inlägg

10 apr. 2007 08:10#3

Danne V skrev:

Ingen aning. (Hinner inte kolla just nu).

Men måste kommentera något som inte är riktat till dig speciellt, utan till alla som vill ha hjälp med sånt här.

Om man gör sig besväret att ladda upp den aktuella sidan nånstans istället för att bara posta koden, så blir det oändligt, oerhört, kollosalt mycket lättare för folk att förstå problemet, att se sidan där ALL kod påverkar (inte bara snutten man tror felar) och att t.ex. laborera i Firefox med olika stilar eller helt sonika ladda ner hela sidan med bilder och rubbet. Men får alltså fler, mer korrekta och snabbare svar.

Jag var aktiv många år på Dreamweaver-forumet, där var detta väldigt tydligt. Folk som postade kod fick alltid bara ett fåtal, ofta missvisande svar och gissningar. Andra, som la in en länk till sidan i skarpt läge, fick svar nästan direkt, och BRA svar dessutom - plus andra värdefulla tips.

Haruenlänk, månne?

Got it! (y)
Här är länken!

Danne VMedlem sedan aug. 20068 090 inlägg

10 apr. 2007 08:43#4

Sitter vid en Mac just nu. Kan inte kolla. Men det kan ju vara att IE och FF har olika default om du inte specificerar VAR bilden ska ligga. Testa t.ex.

#meny a:hover { background: url(images/knappar/hover.jpg) bottom; color:#990066; }

(se ordet "bottom") eller prova "top" eller "center" istället.
Kan också vara att du måste ange line-height, eftersom webbläsarna kan ge olika värden där om du inte specar. Kanske t.o.m. padding....

DanneStMedlem sedan feb. 20041 311 inlägg

10 apr. 2007 08:45#5

Danne V skrev:

Sitter vid en Mac just nu. Kan inte kolla. Men det kan ju vara att IE och FF har olika default om du inte specificerar VAR bilden ska ligga. Testa t.ex.
#meny a:hover { background: url(images/knappar/hover.jpg) bottom; color:#990066; }
(se ordet "bottom") eller prova "top" eller "center" istället.
Kan också vara att du måste ange line-height, eftersom webbläsarna kan ge olika värden där om du inte specar. Kanske t.o.m. padding....

Hmmm, så kan det ju vara... Ska testa senare!

tantenMedlem sedan nov. 20051 596 inlägg

10 apr. 2007 10:34#6

#meny a { display: inline....;
borde ge samma avstånd, men som du sedan får justera med -pxlarna i #meny.
Varför lägger du inte menyn absolute inne i head-divven i stället?
Bara fundering...

DanneStMedlem sedan feb. 20041 311 inlägg

10 apr. 2007 10:44#7

tanten skrev:

Varför lägger du inte menyn absolute inne i head-divven i stället?
Bara fundering...

Satt och slet med detta inatt - första gången jag försöker mig på z-index. :stud
Detta var enda sättet jag lyckades få #meny att hamna på rätt ställe, samtidigt som de övriga divvarna (#content + #footer) hamnar nedanför #head...
Har du nåt förslag på bättre lösning?

tantenMedlem sedan nov. 20051 596 inlägg

10 apr. 2007 11:25#8

Kommer ihåg att jag slet med något liknande för ett par år sedan. Mitt förslag är jag inte 100% säker på om det blir rätt, men av vad jag minns så var det någonting sådant...
Min tanke var att eftersom menyn ska ligga ovanpå head-bilden så skulle den lika bra kunna ligga inne i den diven och positioneras där i stället för i body.

Men jag ska kika tillbaka i mitt minne och se om jag kommer i håg vilken meny det var jag fick ihop och återkommer om du inte fått ihop din tills dess :-)

KrikoMedlem sedan dec. 2006382 inlägg

10 apr. 2007 12:07#9

Vet inte om detta har något med saken att göra i just det här fallet, men IE tolkar inte "float" korrekt vilket kan ställa till det. Googla lite, jag vet att det finns ett fulhack för detta.

tantenMedlem sedan nov. 20051 596 inlägg

10 apr. 2007 13:06#10

Jag hittade menyn, men såg att jag till slut hade struntat i skillnaden och lyft upp menyn ännu lite längre ifrån i stället.
Avståndet styrs mycket av vilken textstorlek användaren har och gjorde det mycket svårt att få det exakt likadant mot en bakgrundbildkant och som man vill.
Så det var dumt av mig att komma med förslag... :r
Har du kollat det?

DanneStMedlem sedan feb. 20041 311 inlägg

10 apr. 2007 13:15#11

tanten skrev:

Jag hittade menyn, men såg att jag till slut hade struntat i skillnaden och lyft upp menyn ännu lite längre ifrån i stället.
Avståndet styrs mycket av vilken textstorlek användaren har och gjorde det mycket svårt att få det exakt likadant mot en bakgrundbildkant och som man vill.
Så det var dumt av mig att komma med förslag... :r
Har du kollat det?

Sitter på jobbet och har inte tillgång till webbplatsen här. Men samma lösning som du kom fram till funderade jag på inatt när jag slet mitt hår! Att helt enkelt skippa kontakten mellan de grafiska elementen.

tantenMedlem sedan nov. 20051 596 inlägg

10 apr. 2007 13:26#12

Jag kollade IE6 med "större" inställt och då hamnade allt nere i bilden.
Firefox väntar två steg innan den hamnar på bilden.

voigtann1Medlem sedan juni 20019 519 inlägg

10 apr. 2007 13:33#13

<!--[if lt IE 7]>
<style type="text/css">
/* fulhack */
#meny
{
  top: -169px;
}
</style>
<![endif]-->

och ändra om orginal filens top till -170px; fungera ju... ;) Men svarar kanske inte på din fråga direkt..

DanneStMedlem sedan feb. 20041 311 inlägg

10 apr. 2007 14:24#14

voigtann1 skrev:

och ändra om orginal filens top till -170px; fungera ju... ;) Men svarar kanske inte på din fråga direkt..

Ahhh, fulhack... :) Ja, det skulle väl fungera!
...
Det kanske inte finns något svar på min fråga? :q

DanneStMedlem sedan feb. 20041 311 inlägg

10 apr. 2007 20:22#15

Danne V skrev:

Kan också vara att du måste ange line-height, eftersom webbläsarna kan ge olika värden där om du inte specar.

Line-height var det! Tackar DanneV!

tanten skrev:

Jag kollade IE6 med "större" inställt och då hamnade allt nere i bilden.

Åsså var det detta problem då. *suck* Hmmm, hur ska man tackla detta?
Kan bara se att man antingen kör med fast storlek (px), eller bilder.
...
Jaha, fast storlek i pixlar skiter FF i... *dubbelsuck*
Då är det bara bilder som återstår.

Nån som har nån bättre idé?

colioneMedlem sedan juni 20014 421 inlägg

10 apr. 2007 20:38#16

Fast och fast. En css-pixel är inte lika stor som en skärm-pixel. I css-specen står det nämligen att storleken inte är bunden till storleken på en maskin-pixel. Utan snarare relativt till storleken på upplösningen på skärmen. Det är ingen tryckpress du ska manövrera där du kan få samma upprepning om och om igen. Att försöka styra så hårt över en besökares läsare är omöjligt, vilket jag tycker är bra. Det finns skäl till att det finns en "zoom"-funktion inbyggd i läsaren, ett av dem är att innehållet ska bli mer lättåtkomligt för folk med nedsatt syn.

Bygg istället sidan med relativa storlekar (exempelvis em) istället för fasta. På så sätt skalar innehållet bättre.

DanneStMedlem sedan feb. 20041 311 inlägg

10 apr. 2007 23:01#17

colione skrev:

Bygg istället sidan med relativa storlekar (exempelvis em) istället för fasta. På så sätt skalar innehållet bättre.

Jo, det var ju det som var tanken, fast då funkar inte min meny-placering...

DanneStMedlem sedan feb. 20041 311 inlägg

11 apr. 2007 09:30#18

tanten skrev:

Varför lägger du inte menyn absolute inne i head-divven i stället?
Bara fundering...

Nuuu fattar jag hur du menar... Mycket lättare att styra positionförhållandena om man lägger #meny inuti #head! (Har hittills bara lagt alla divvar inom #container efter varann...) Tackar tanten! (y)

tantenMedlem sedan nov. 20051 596 inlägg

11 apr. 2007 09:43#19

Vassego :)

men du bör nog ändra dina bakgrundsbilder till typ:

background: url('images/head_bkgr.jpg') no-repeat;

Nu repeterar dem sig när man förstorar texten...
Fel bara den ena...:-)

DanneStMedlem sedan feb. 20041 311 inlägg

11 apr. 2007 10:30#20

tanten skrev:

Vassego :)

men du bör nog ändra dina bakgrundsbilder till typ:
background: url('images/head_bkgr.jpg') no-repeat;
Nu repeterar dem sig när man förstorar texten...
Fel bara den ena...:-)

Oj, helt korrekt!
En annan sak, visst var det du tanten som hade ett tips på att lägga en bild i en div och sen sätta divvens bredd relativ på nåt sätt. Och därigenom få bilden att skala på ett smidigt sätt?