Keskustelu: Nettisivujen teko: Floatin kanssa ongelmia IE6:n kanssa

Tarkoitus olisi saada seuraavanlainen navigaatiopalkki: kuva, joka IE6:lla näyttää jostain syystä tältä.

HTML:

<ul>
	<li><a>linkki</a></li>
	<li><a>linkki</a></li>
	<li><a>linkki</a></li>
	<li><a>linkki</a></li>
</ul>

CSS:

ul {
	height: 37px;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

li {
	height: 37px;
	margin: 0px 0px 0px 20px;
	float: left;
}
a {
	display: block;
	height: 37px;
}

Kaikilla muilla selaimilla (Opera, FF, Chrome, Safari, IE 7/8) toimii ihan hyvin, mutta vanha kunnon IE6 näyttää palkin päin p**settä.

E: Huomasin että ei ole pelkästään navigaatio väärin. IE6 kusee kyllä koko sivun. Tarkoitus olisi saada tuo navigaatiopalkki, jonka alla kolme vierekkäistä diviä. Aaaargh!

+---------------------------------------+
|              navigaatio               |
+-------+---------------------+---------+
| div 1 |         div 2       |   div 3 |
+-------+---------------------+---------+
|              div 4                    |
+---------------------------------------+

Tämä menee lähemmäs haluttua:

li {
    display: inline;
    float: left;
    margin: 0px 0px 0px 20px;
}
a {
    display: block;
    line-height: 37px;
}

Ongelmasi johtuu IE:n sisäisestä hasLayoutista. Se kytkeytyy mm. siitä, jos määrittää elementille jonkin leveyden. Sen taustalla on Microsoftin oma dokumenttirenderöijä 90-luvun puolelta, joka riitti hyvin HTML-sivujen kanssa. Ongelmat johtuvat siitä, että sitä on yritetty vääntää toimimaan myöhemmin kehitellyn CSS:n sääntöjen mukaan, mutta sen kaksijakoinen toimintamalli ei oikein sovellu siihen. Tätä paikkailtiin vielä IE7:ssä (uusilta bugeilta ei vältytty), kunnes sitten IE8 sai vihdoin lähes kokonaan perustoiltaan uudelleenkirjoitetun renderöijän.

Tuo ylempi koodinpätkäni kiertää ongelmia ottamalla hasLayoutin kytkeytymisen pois li- ja a-elementeistä. Olennaisimmat tyylit kannattaa määrittää suoraan linkkeihin ja jättää li-elementti vaan tuollaiseksi välikappaleeksi. Vastaavasti taas ul-elementille on parempi antaa hasLayoutin määrittyä.

Kiitosta. Sain nuo kolme diviä vierekkäin laittamalla ensimmäisen ja viimeisen position: absolutella, sillä sisällön ei tarvitse venyä kuin keskimmäisen mukaan.

Jos kiinnostaa, niin tässä on yksi tapa, jolla saa joustavat kolme palstaa myös IE6:lle: Flexible equal height 3 columns – tosin tuossa pitää sitten aika pilkulleen laittaa nuo jotkut tyylit paikalleen, ja joidenkin lisäämisten kanssa pitää olla varovainen (esim. position: relative; wrapperiin saa palstojen taustavärit ilmestymään IE6:ssa sivun loppupuoliskolle). Pääpiirteittäin kuitenkin suht vähän CSS:ää ja ylimääräistä HTML:ää.