CSS-problem i Firefox

14 svar · 678 visningar · startad av emser 15 mars 2007

emserMedlem sedan mars 200720 inlägg

Frågan15 mars 2007 05:50#1

Hej,
Jag har kodat en sida med CSS som funkar utmärkt i Safari men inte i Firefox. Firefox struntar i all CSS. Jag har validerat både html-koden och CSS.filen hos WC3 och de är båda helt korrekta.
Det funkade i Firefox förut, men sedan jag bland annat la till en bakgrundsfärg funkar det inte längre.

Är det någon vänlig själ som vet vad det kan bero på?

HTML-koden:

[1]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<HTML>
    <BODY>
     <div class="container">
<div class="blabla"></div>
<div class="blabla2"></div>
<div class="blabla3"></div>
     </div>[/1]

CSS:

 [1]body {
    background-color: #B69189;  
}

div.container {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: 700px;
    text-align: left;
    background-color: #B69189;
    
}

div.blabla {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 180px;
    z-index: 1;
}

div.blabla2 {
    position: absolute;
    top: 0px;
    left: 175px;
    width: 610px;
    height: 80px;
    background-color: #F0EDDC;
    z-index: 2;
}

div.blabla3 {
    position: absolute;
    top: 10px;
    left: 255px;
    z-index: 3;
}
[/1]

Mvh
/Em

headbugMedlem sedan sep. 2006867 inlägg

15 mars 2007 06:34#2

Du länkar ju inte in någon css i html:en som du visar. Posta koden du faktiskt använder istället, annars är det svårt att felsöka... Dessutom fattas </body> och </html>

emserMedlem sedan mars 200720 inlägg

15 mars 2007 07:16#3

Sorry, jag tog inte med all kod eftersom det blev så långt. Jag har såklart länkat till mitt css-dokument, men jag trodde inte att det var relevant att visa. Här är all html-kod:

[1]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<HTML>
  <HEAD>
    <TITLE>SoulPrint</TITLE>
      <LINK rel="stylesheet" type="text/css" href="soulprint.css">
   </HEAD>

  <BODY>

     <div class="container">

<div class="bgvanster">
<img src="bgvanster4.gif" alt=" ">
</div>

<div class="main">

</div>

<div class="top">

</div>

<div class="logotyp">
<img src="logotyp.gif" alt="soulprint logotyp">
</div>

<div class="avdelare">
<img src="avdelare.gif" alt=" ">
</div>

<div class="maintext">
Lorem ipsum blablabla 
</div>

<div class="bghoger">
<img src="bghoger4.gif" alt=" ">
</div>

<div class="bild">
<img src="omisanden.gif" alt=" ">
</div>

<div class="knapp">
<img src="omknapp.gif" alt=" ">
</div>

<div class="knapp2">
<img src="tjansterknapp.gif" alt=" ">
</div>

<div class="knapp3">
<img src="yogaknapp.gif" alt=" ">
</div>

<div class="knapp4">
<img src="foretagknapp.gif" alt=" ">
</div>

<div class="knapp5">
<img src="kontaktknapp.gif" alt=" ">
</div>

     </div>    <!--slut pa div class container-->

</BODY>

</HTML>[/1]

och all css:

[1]body {
    background-color: #B69189;  
}

div.container {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: 730px;
    text-align: left;
    background-color: #B69189;
    
}

div.bgvanster {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 180px;
    z-index: 1;
}

div.top {
    position: absolute;
    top: 0px;
    left: 175px;
    width: 610px;
    height: 80px;
    background-color: #F0EDDC;
    z-index: 2;
}

div.logotyp {
    position: absolute;
    top: 10px;
    left: 255px;
    z-index: 3;
}

div.main {
    position: absolute;
    top: 200px;
    left: 175px;
    width: 610px;
    height: 530px;
    background-color: #F0EDDC;
    z-index: 2;
}

div.bghoger {
    position: absolute;
    top: 70px;
    left: 775px;
    width: 180px;
    z-index: 1;
}

div.avdelare {
    position: absolute;
	top: 80px;
	left: 175px;
	width: 610px;
        height: 150px;
        background-color: #F0EDDC;
        z-index: 2;
}

div.maintext {
    position: absolute;
	top: 240px;
	left: 210px;
	width: 400px;
	height: 200px;
	font-family: geosanslight, euphemia, eurostile, optima, myriad, arial, verdana, sans-serif;
	font-size: 14px;
	color: #403028;
	z-index: 4;
}

div.bild {
    position: absolute;
	top: 410px;
	left: 350px;
	z-index: 3;
}

div.knapp {
    position: absolute;
	top: 100px;
	left: 630px;
	z-index: 3;
}

div.knapp2 {
    position: absolute;
	top: 170px;
	left: 630px;
	z-index: 3;
}

div.knapp3 {
    position: absolute;
	top: 240px;
	left: 630px;
	z-index: 3;
}

div.knapp4 {
    position: absolute;
	top: 310px;
	left: 630px;
	z-index: 3;
}

div.knapp5 {
    position: absolute;
	top: 380px;
	left: 630px;
	z-index: 3;
}
[/1]

Mvh
/Em

Lasse HMedlem sedan aug. 20051 506 inlägg

15 mars 2007 07:46#4

Så här ser den ut i FF..

headbugMedlem sedan sep. 2006867 inlägg

15 mars 2007 08:26#5

Håller med Lasse H, det funkar fint. Skulle det kunna vara någon lokal inställning i din FireFox, någon AdBlock som fått fnatt eller så?

Danne VMedlem sedan aug. 20068 090 inlägg

15 mars 2007 09:30#6

...eller att FF hämtar den gamla sidan fråna cachen, men tar hem den nya stilmallen eller tvärtom.

Töm cachen några ggr och testa igen.

emserMedlem sedan mars 200720 inlägg

15 mars 2007 10:31#7

Nej, vad konstigt - jag har tömt cachen och allt möjligt flera ggr, startat om Firefox och ändå ser det likadant ut hos mig - allting ligger i rad bara. Hm...

emserMedlem sedan mars 200720 inlägg

15 mars 2007 11:57#8

Nu har jag laddat upp allt på en ftp-server. Länken är:

http://soulprint.se.loopiadns.com/soulprint.html

och CSS:en ligger på:

http://soulprint.se.loopiadns.com/soulprint.css

Ser bra ut i Safari, men hemskt i FF som sagt...

jarvkloMedlem sedan juli 20013 378 inlägg

15 mars 2007 12:13#9

Hmmm...

Du anger aldrig vilken "encoding" du använder - Sedan har du ett "å" i ordet "friskvård" i meta keywords som skulle kunna vara en UTF-kod, men ändå inte om man får tro W3C:s validator...

Vad händer om du tar bort det "skräptecknet" och ser till att sidan validerar där den ligger nu ?

emserMedlem sedan mars 200720 inlägg

15 mars 2007 12:30#10

Å:et är nu borta och både html och css valideras hos W3C, men fortfarande samma problem...

Jag läste någonstans något om att det kan bli problem i FF när man har en bakgrundsfärg och sen har en container, jag vet inte om det kan vara något sådant?

hypatiaMedlem sedan feb. 20016 388 inlägg

15 mars 2007 12:40#11

Blir det likadant för dig om du testar filerna i Firefox utan att ladda upp dem på webbhotellet?

När jag kör filerna lokalt i Firefox fungerar det finfint, men i din länk funkar det ju som sagt var inte. Skumt...

headbugMedlem sedan sep. 2006867 inlägg

15 mars 2007 13:06#12

Jag kollade html-filen och den anger Unicode UTF-16 Little Endian. Ändrar man till UTF-8 eller något annat ser man att det är 2 tecken i början av filen som blir "skräptecken" om måste hamnat där på något sätt.

Jag tog och markerade allt från och med <!DOCTYPE till slutet och klistrade in i en ny fil och visade i FF och då gick det bra.

jarvkloMedlem sedan juli 20013 378 inlägg

15 mars 2007 14:26#13

Hmm...

De där "skräptecknen" förmodligen en "BOM" (Byte Order Mark) - dvs några bytes i början av textfilen som anger att den är kodad med en viss UTF-variant - som din redigerare slänger in åt dig (Har du möjligen UTF-16 inställt i din redigerare ?).

Inte otroligt att det är det som spökar i så fall... (och kolla så att du inte fått in en sådan i CSS-filen också - det har jag för mig kan stjälpa bygget under vissa förutsättningar det också även om jag inte har några exempel)

headbugMedlem sedan sep. 2006867 inlägg

15 mars 2007 14:40#14

Det stämmer att det är ett BOM där, jag läste in tecknen i matlab och de har värdena FF FE, som i ISO-8859-1 blir ÿþ som är koden just för Unicode UTF-16 Little Endian enligt

http://en.wikipedia.org/wiki/Byte_Order_Mark
http://en.wikipedia.org/wiki/ISO_8859

emserMedlem sedan mars 200720 inlägg

15 mars 2007 21:59#15

Jag hade sparat utan att ange karaktärformat och då tog den kanske automatiskt UTF-16. Nu har jag sparat som UTF-8 och då funkar det!
Hurra!

Tack så mycket för all hjälp allihop! :)