HTML & CSSur HTML, XHTML & CSS
6 svar · 281 visningar · startad av Troxy
Titta här:
http://www.troxy.net/layout.html
Ni som använder IE (eller Opera för den delen) kommer se att allt innehåll får grå bakgrund, som jag vill, men i Mozilla färgar inte det gråa området hela sidinnehållet.
Anledningen till detta tror jag är att Mozilla verkar behöva en fast höjd på element för att det ska räknas som att de tar plats och fyller ut. Men jag kan inte sätta fast höjd eftersom mängden text hela tiden varierar.
Hur ska jag lösa detta?
flytande element tas bort från dokumentflödet så #frame är lika hög som #header. Mozilla gör rätt alltså.
Du skulle kunna låta #content vara statisk.
<edit reason="off-topic">
BTW, jag tror du är den första jag sett som kommer med ett CSS-problem utan att använda en XHTML doctype... :P Det är rätt, semantisk HTML är viktigare än att hoppa på det här med XHTML, IMHO :)
</edit>
zcorpan, okej, då förstår jag. Men vad var det där om statisk nu igen...är för trött.
Om du låter bli att positionera ett element så är det statiskt. Ta bort floaten alltså.
Hm, men float: left gör ju att det blir två kollumner. Hur ska jag fixa det?
Mozilla gör rätt här, det som händer är att en float inte upptar någon plats i dokumentet, därav att din yttersta div med bakgrundsfärg inte är lika hög som floaten är. Detta är en bugg i IE, och Opera härmar de flesta IE buggar för kompabilitet.
Om du sätter en border på #frame div:en förstår du vad jag menar.
Enklaste sättet att fixa detta för riktiga browser är att lägga till ännu en div innan du stänger #frame div:en
<div style="clear:both;"></div>
Men det finns även elegantare lösningar där man inte behöver lägga till element i html:en. Detta genom att använda sig av css2. Du finner här en artikel som förklarar detta grundligt.
Okej, tack så mycket.