Keskustelu: Nettisivujen teko: Miten IE toimintaan

Tunnetustihan IE ei tue hover elementtiä, joten mitenkähän sen saisi toimimaan pudotusvalikossa.

<ul id="navigointi">
	<li><a href="#">Linkki 1</a>
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
		</ul>
	</li>

	<li><a href="#">Linkki 2</a>
		<ul>
			<li><a href="#">l2</a></li>
			<li><a href="#">l3</a></li>
		</ul>
	</li>
</ul>

#navigointi, #navigointi ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}

#navigointi a
{
  background:#6699ff;
  color:white;
  text-decoration:none;
  text-align:center;

  display: block;
  width: 5em;
}

#navigointi li
{
  float: left;
  width: 5em;
}

#navigointi li ul
{
  position: absolute;
  width: 5em;
  left: -999em;
}
#navigointi li:hover ul
{
  left: auto;
}

Sulla pitänee laajentaa se a blokkitason elementiksi, niin että se kattaa koko sitä ympäröivän elementin sisällön (tässä tapauksessa li). Sitten annat sille a:lle sen hovermääreen, se kun on ainoa elementti jolle IE hyväksyy hover-effektit.

IE7 tukee :hoveria millä vaan, joten IE6:tta varten voit käydä nappaamassa vaikka whatever:hover -skriptin (iehover.htc) tai IE7-nimisen skriptin. Tietty tulee vaatimus JavaScriptille, mutta sivujen teko helpottuu aikamoisen kivasti.

Jos haluat oikein standardienmukaista ja "oikeintehtyä" selaimesta toiseen toimivaa valikkojärjestelmää katsella, niin Devvestä löytyy.

Merri kirjoitti:

IE7 tukee :hoveria millä vaan, joten IE6:tta varten voit käydä nappaamassa vaikka whatever:hover -skriptin (iehover.htc)

Ei mulla ainakaan pelitä tuo ensimmäinen räpellys IE7:llakaan.

Valikkojen tekeminen on aika taitolaji jos yrittää tehdä selaimesta toiseen toimivaa ratkaisua. Kurkkaa tämä, siinä on ratkaistu todella monta ongelmaa valmiiksi; jokainen sääntö joka siihen on kirjoitettu on perusteltu olemaan siellä. Valikossa on hyvin tyylittelyvaraakin, värit voi vaihtaa, elementtien korkeutta voi vaihtaa (line-heightia asettamalla), sisennyksiä voi muuttaa, reunoja voi muutella.

Tietty jos yrität saada omaasi toimimaan, niin sitten voit kehittää sen semmoiseen pisteeseen että se toimii kaikilla paitsi IE:llä ja sitten alkaa leikkimään ehdollisilla kommenteilla syöttäen IE:lle korjaavat säännöt. display : inline-block; voi olla hyödyllistä kokeilla eri elementeissä, zoom : 1; on semmoinen jolla saa kytkettyä hasLayoutin päälle mihin tahansa elementtiin. Tosin yleensä valikoita tehdessä sitä ei halua päälle, koska sillä on taipumus... no, näet sitten ehkä itse.