rikard81Medlem sedan mars 2007311 inlägg Hej alla webbnördar. Har gjort en hemsida med boxmodellen. Har ett antal boxar för design. Ser kanonschysst ut i både explorer 7 och Firefox. Har inte kollat hur det ser ut i Explorer 6 då jag inte har den på datorn.
Har positionerat boxarna (Centrerat) med hjälp av W3C rekommendation. Alltså margin-left: auto; margin-right: auto;. Det jag undrar över är vad quirks-mode i IE6 betyder. Står att det kan funka dåligt i IE6 när man använder margin-left: auto; margin-right: auto;. Men vad är quirks-mode? är det vanligt att folk använder det?
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 :)
fiddlerMedlem sedan juli 20023 617 inlägg Om du tar bort doctype från din hemsida kommer du att se att även IE7 ställer till det.
rikard81Medlem sedan mars 2007311 inlägg 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
rikard81Medlem sedan mars 2007311 inlägg 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;}
TroxyMedlem sedan mars 20041 505 inlägg 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
:birp
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.
rikard81Medlem sedan mars 2007311 inlägg 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.
rikard81Medlem sedan mars 2007311 inlägg
JAreMANNEN skrev:
Här är en skärmdump från IE6.
Varför funkar inte teckensnittet i menyn i IE6 nu då?
TroxyMedlem sedan mars 20041 505 inlägg
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;
TroxyMedlem sedan mars 20041 505 inlägg nitro2k01, hm...det finns såvitt jag vet inget attribut som heter "generic-family" i CSS2 i alla fall. :q
Jaha... Verkar som att jag hade fel helt enkelt...
zcorpanMedlem sedan dec. 20042 245 inlägg
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.
tantenMedlem sedan nov. 20051 596 inlägg 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ö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ä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>
