webForumDet fria alternativet

CSS-problem i Firefox

14 svar · 674 visningar · startad av emser

emserMedlem sedan mars 200720 inlägg
#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. 2006858 inlägg
#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
#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 424 inlägg
#4

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

Untitled-1.jpg
headbugMedlem sedan sep. 2006858 inlägg
#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. 20067 685 inlägg
#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
#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
#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 295 inlägg
#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
#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. 20011 325 inlägg
#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. 2006858 inlägg
#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 295 inlägg
#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. 2006858 inlägg
#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

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! :)

Genererad på 381 ms · cache AV · v20260730165559-full.f96bc7eb