Quirks-mode

Quirks mode innebär väl att webbläsaren inte använder någon doctype för att visa din sida, utan att exempelvis IE6 tolkar och visar sidan så som den "tror" att den ska se ut.

Så om du inte anger vilken doctype standard du vill använda så blir det automatiskt quirks mode

Om du tar bort doctype från din hemsida kommer du att se att även IE7 ställer till det.

En fråga till i samma tråd. Jag verligen hatar att Webbläsarna ska visa sidorna olika. Boxen under headers är kodad margin-top: 0px; så blir det perfekt i Explorer men FF lämnar ett mellanrum. Kodar jag margin-top: auto; så lämnar FF lik förbannat ett mellanrum men det blir perfekt i IE. Hur ska jag koda för att inte få det där mellanrummet i bägge webbläsarna

Länk till sidan?

Sidan är ju långt ifrån klar så strunt i design och endering av kod.. Men här e den iallafall. Texten har inget med sidans innehåll att göra. Problemet är glippan mellan sidhuvudet högst upp och mittboxen. Ser annorlunda ut i FF

http://hem.bredband.net/b503624/

CSS-kod:

body {background-color: #0000ff; text-align: center; scrollbar-base-color: #6495ED;}

p { font-family: verdana; font-size: 10pt; text-align: justify; margin: 10px; padding: 10px; }

a:link {color: #000000; font-family: bradley hand itc; font-weight: lighter; font-size: 17px; text-decoration: none}

#headers{
width: 550px;
height: 100px;
background-color: #000000;
background: url(headers.jpg);
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}

#menybox{
width: 550px;
height: 25px;
background-color: #6495ED;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border-bottom: thin;
}

#box{
width: 550px;
height: 450px;
background-color: #6495ED;
z-index: 1;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}

#textruta{
width: 450px;
height: 370px;
background-color: #6495ED;
border: 1px solid #000000;
z-index: 2;
overflow: auto;
margin-top: -425px;
margin-left: auto;
margin-right: auto;
}

#fot{
width: 550px;
height: 20px;
background-color: #6495ED;
margin-left: auto;
margin-right: auto;
margin-top: 55px;
border
}

#meny li{display: inline; text-decoration: none; color: #ff0000}

#meny {margin-left: 0; font-size: 110%;}

#meny a {padding: 1em 1em;}

Quirks Mode används för bakåtkompatibilitet. När webbläsarna var nya så fanns det inte lika satta standarder som idag och utvecklarna brydde sig inte så mycket om exakt hur HTML och CSS visades av webbläsaren. Detta gjorde att det uppstod små buggar kallade "quirks" i webbläsarna som innebär att dom beter sig underligt i olika situationer.
(Att Internet Explorer i början hade en egen konstig boxmodell är ett exempel på en quirk som än idag finns i nyaste IE7.)

Men eftersom det finns hemsidor som är byggda utifrån dessa quirks så riskerar dom att sluta fungera om webbläsaren lagar sin quirk.
Därför uppstod två lägen, "Quirks Mode" respektive "Standards Mode".

När webbläsaren befinner sig i Quirks Mode så uppenbarar sig alla gamla fula quirks så att hemsidor som är beroende av dessa inte ballar ur helt.
Men i Standards Mode så är dessa quirks fixade och fungerar istället enligt standarderna för HTML och CSS. (Nåja, till viss del)
En webbläsare som befinner sig i Quirks Mode är väldigt oförutsägbar, för att inte säga pain in the ass. Det bör undvikas alltså.
Själv vill jag påstå att den viktigaste förutsättningen för att en hemsida ska se likadan ut i olika webbläsare är att köra Standards Mode.

Hur växlar man mellan dessa lägen? Oftast beror det på din Doctype som är satt längst upp.
Beroende på vilken Doctype du väljer och hur den ser ut så kommer webbläsaren att välja Quirks- respektive Standards Mode.
Här är en tabell som visar exakt hur man triggar rätt läge i olika webbläsare:
http://hsivonen.iki.fi/doctype/

Här är mer info om Quirks mode:
http://www.quirksmode.org/css/quirksmode.html

Det är förmodligen #meny som ställer till det. Testa att sätta margin: 0 för #meny, istället för bara margin-left som det är nu.

Kanon. Tack för alla svaren. Är det nån som kan se hur sidan ser ut i IE6?

Sen en sista grej. Menyn med texten är inte centrerad boxen i FF men i Explorer. Har provat både med text-align: justify; och text-align: center; men det funkar ej?

IE6 Screen

Här är en skärmdump från IE6.

edit: late

JAreMANNEN skrev:

Här är en skärmdump från IE6.

Varför funkar inte teckensnittet i menyn i IE6 nu då?

rikard81 skrev:

Varför funkar inte teckensnittet i menyn i IE6 nu då?

Såhär ser det ut i din CSS för länkar

font-family: bradley hand itc;

Besökarna måste ha denna font installerad för att den ska visas. Denna font inte vanligt förekommande, själv har jag den inte.
Sen så måste man ha fnuttar runt font-namn som innehåller mellanslag.
Till sist så är det bra att ange en alternativ font som används istället om besökaren inte har den första installerad.
Exempel:

font-family: "bradley hand itc", arial, sans-serif;

Troxy skrev:

font-family: "bradley hand itc", arial, sans-serif;

Ett ännu bättre exempel är:

font-family: "bradley hand itc", arial, helvetica;
generic-family: sans-serif;

nitro2k01, hm...det finns såvitt jag vet inget attribut som heter "generic-family" i CSS2 i alla fall.

Jaha... Verkar som att jag hade fel helt enkelt...

Troxy skrev:

Sen så måste man ha fnuttar runt font-namn som innehåller mellanslag.

Nej, det måste man inte. Man måste ha fnuttar runt font-namn som börjar eller slutar med ett mellanslag, eller innehåller fler än ett mellanslag på rad, men sådana namn finns inte i praktiken.

Specen säger dock att man borde använda fnuttar för namn som innehåller mellanslag.

Hur jag än uppdaterar sidan så finns mellanrummen kvar i FF för mig. Skrev fel förut...
Ska ju inte lägga sig i hur man kodar en sida, men kunde inte låta bli, nu när jag fick en stund över. Så det är bara ett förslag.
Ett förslag för att du ska slippa margin så mycket och inte låsa dina divar vid centrering. Kan ju behöva margin till annat än det. Har inte ändrat något som har med fonter och text att göra så de ser ut som du har det och finns inte med här...

                body {
                	margin: 0px;
                	padding: 0px;
                	background: #00f;
                	text-align: center;
                	scrollbar-base-color: #6495ed;
                }
                #box{
                	width: 100%;
                	float: left;
                	background: #6495ed;
                	height: 450px;
                }
                #fot{
                	width: 100%;
                	float: left;
                	margin-bottom: 2em;
                	background: #6495ed;
                	height: 20px;
                }
                #headers{
                	width: 100%;
                	float: left;
                	background: url(headers.jpg);
                	height: 100px;
                }
                #menybox{
                	width: 550px;
                	float: left;
                	border-bottom: thin;
                	background: #6495ed;
                	height: auto;
                }
                #textruta{
                	width: 450px;
                	border: 1px solid #000;
                	margin: 0 auto;
                	background: #6495ed;
                	height: 370px;
                	overflow: auto;
                }
                #wrapper{
                	width: 550px;
                	margin: 5% auto;
                }

och då blir html-koden

<body>
	<div id="wrapper">
          <div id="headers"></div>
				<div id="menybox">
				   <ul id="meny">
				      <li><a href="sida1.html">Start </a></li>
					   <li><a href="sida2.html">F&ouml;retaget </a></li>
					   <li><a href="sida3.html">Produkter </a></li>
					   <li><a href="sida4.html">Kontakt </a></li>
					   <li><a href="sida5.html">L&auml;nkar</a></li>
				 </ul>
         	                </div> 
           		<div id="box">   
			   	<div id="textruta">
                      <p>Några allmänna tankar ... osv...... namnkunskap.</p>
			         </div>
			</div>        
           <div id="fot"></div>        
</div>
</body>