3 svar · 238 visningar · startad av smalband
Jag har problem med en linjes höjd, som jag anger i procent. Jag kör med XHTML Strict och då fungerar den här koden inte i Firefox, dock i IE. Tar jag bort <!DOCTYPE-taggen så fungerar det även i Firefox, vilket indikerar att koden inte följer standarden, men kör jag den genom W3C-validatorn så går den igenom utan fel.
stil.css
body {
text-align: center;
height: 85%;
}
#huvudlager {
position: relative;
text-align: center;
width: 800px;
height: 100%;
}
#linje {
background-color: #000000;
position: absolute;
width: 1px;
height: 100%;
top: 100px;
left: 745px;
z-index: 3;
}
index.php
<body>
<div id="huvudlager">
<div id="linje"></div>
</div>
</body>
Någon som förstår vad som kan orsaka det hela?
Jupp.
När du kör med en "korrekt" <!DOCTYPE i HTML eller xhtml så måste du etablera en höjd som inte är auto även på rotelementet (<html>) för att kunna använda relativa höjdmått...
html {height:100%}
löser *det* problemet -
Att man sedan brukar behöva sätta margin:0 och padding:0 på både html och body för att slippa rullningslister också är en annan historia ;)
Tackar! Nu syns linjen. Men tyvärr skapades ett nytt problem ;)
I "body" har jag ställt in så att "huvudlagret" ska vara centrerat på sidan, men detta fungerar endast i IE, Firefox krånglar igen. Prövade att använda min just nyvunna kunskap och satte in "text-align: center" under "html" i css-filen, men det blev inte bättre..
Hmm...
Det där beror antagligen på att MSIE och Mozilla har olika defaultvärde på margin och därför beter sig olika när det gäller s.k. "överspecificering" ("over-constraining") av ett blocks mått... Som i detta fall...
Ställ in
margin-left:auto; margin-right:auto
på #huvudlager så ordnar det sig ;)
Detaljer om hur "over-constrained blocks" beräknas är iofs kanske lite överkurs, men de finns här: http://www.w3.org/TR/CSS2/visudet.html#q6 om man vill gräva lite ;)