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

Mozilla lyssnar inte på min css-fil.

1
Skriv svar
Permalänk
Medlem
●

Mozilla lyssnar inte på min css-fil.

Hej!
Jag har en liten sida med adressen http://fyrkant.net som tyvärr inte ser ut som jag vill att den ska i mozilla.

Som ni med IE6 eller Opera ser så är "logon" och den vita textytan i en parallell linje, som ett stort vitt streck till vänster om sidan och den gråa meny-delen ligger som en fin liten ö till höger om denna.

Men i mozilla så blir den vita text-ytan på något konstigt sett ungeför 10px bredare än jag skrivit att det ska vara i min css-fil, vilket resulterar i att logon och textytan inte bildar det fina vita strecket jag vill att det ska och att meny-delen överlappar text-ytan med några px.

Varför blir det såhär?

Såhär ser delen i min css-fil ut där de olika delarna behandlas, textytan är #content, logo-delen är #pic och meny-delen är #side)

#pic{position:absolute;
top:0px;
width:520px;
background: white;
left:10px;}
#content{position:absolute;
line-height: 1.3;
top:320px;
left:10px;
width:520px;
text-align: justify;
padding-right:7px;
padding-left:7px;
margin: auto;
background: white;
}
#side{position:absolute;
top:300px;
left:540px;
width:170px;
border:1px solid #000000;
padding-bottom:5px;
background:#e1e1e1;}

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du har inte med någon korrekt doctype, vilket leder till att läsarna ställer sig i quirks mode. Då använder IE en annan, felaktig, box model där padding och borders ingår i ett elements width och height.

Lösning:
Använd en korrekt doctype och ändra width för de elementen som får fel bredd.

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag tror problemet är att du inte riktigt förstått hur "the box model" fungerar.
Paddingen ska räknas på bredden och i ditt fall ska content-rutan alltså vara 520+7+7=534px bred. Det är alltså Mozilla som renderar det rätt, inte ie.

Här kan du läsa mer om det:
http://jessey.net/simon/articles/003.html

Bra sida för att lösa problem:
http://www.positioniseverything.net/

Och om du inte tror på vad jag säger kan jag också hänvisa till W3C:s dokument för hur standarden ser ut:
http://www.w3.org/TR/REC-CSS2/box.html

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hmm, jag behöver nog lite mera steg för steg-hjälp vad jag ska göra för att förstå vad jag ska göra.

Ska jag alltså lägga in en doctype tag i början av min sida?
Denna?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag skulle föreslå att du använder dig av XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Jag hittade även denna sidan som innehåller nyttig läsning:
http://msdn.microsoft.com/library/default.asp?url=/library/en...

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack så jättemycket! Nu ser sidan ut som den ska och livet leker!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag föreslår nog snarare att du använder html 4.01 strict/transitional, eller att du fixar till så att faktiskt är xhtml du skriver, t.ex. <link href="blabal.css" rel="stylesheet" />, alltid en /> om det inte finns någon slut-tag(som t.ex. </p>). Du har ändrat dina <br> till <br />, men inte lite annat smått och gått. Och du har ingen alt="" på vissa bilder.

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
●

Jo, jag borde väl kanske ändra så att det verkligen blir xhtml... När jag orkar.

Finns det ingen sida där man kan skanna sin kod och den hjälper en med att göra om till xhtml?

Redigera
Citera flera Citera
Permalänk
Medlem
●

validator.w3.org kollar ju din kod och ser om du har några fel, men någon som tar din kod -> rensar och fixar till -> ger dig valid code tror jag inte det finns. Ganska onödigt IMO då det brukar vara max 10 ställen att ändra på, search and replace så tar det högst 30s att validera en sida, med många fel då. Står ju precis vilken rad och vart det är fel, så det tar ju inte direkt lång tid.

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
●

Ok, ska ta och kolla det nu!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av filigran
validator.w3.org kollar ju din kod och ser om du har några fel, men någon som tar din kod -> rensar och fixar till -> ger dig valid code tror jag inte det finns.

På http://tidy.sourceforge.net/ finns det program som gör just det.

Visa signatur

Schemer: "Buddha is small, clean, and serious."
Lispnik: "Buddha is big, has hairy armpits, and laughs."

Redigera
Citera flera Citera
Permalänk
Medlem
●

Sedär. Det bästa är ju dock att skriva valid kod från början.

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
●

Självklart

Visa signatur

Schemer: "Buddha is small, clean, and serious."
Lispnik: "Buddha is big, has hairy armpits, and laughs."

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara