Keskustelu: Nettisivujen teko: IE7 ja valikon napit

Tämä toimii hienosti mm. Firefoxilla ja IE8:lla, mutta IE7:lla ei.

Tässä sorsa:

<div id="valikko">
<ul class="section_list">
<li><a href="">Etusivu</a></li>
<li><a href="">Sivu2</a></li>
<li><a href="">Sivu3</a></li>
<li><a href="">Sivu4</a></li>
</ul>
</div>

Ja css:

#valikko ul {
	width: 700px;
	height: 32px;
	background-color: #461626;
	margin: 0;
	padding: 0;
	float: left;
	border-top: 1px solid #FFF;
	font-size: 14px;
}

#valikko ul li {
	display: inline;
	margin: 0;
	padding: 0;
	float: left;
	line-height: 2;
	height: 30px;
	width: 150px;
	text-align: center;
	font-size: 14px;
}

#valikko ul li a {
	display: table-cell;
	text-decoration: none;
	background-color: #461626;
	color: #FFF;
	height: 30px;
	width: 150px;
	font-size: 14px;
}

#valikko a:active {
	background-color: #792641;
}

#valikko a:hover {
	background-color: #662031;
}

#valikko .current {
	background-color: #662535;
}

Voi olla, että on purkkaa kun on säädetty suuntaan ja toiseen toimivuuden saamiseksi. Tämä siis tekee IE7:lla sen, ettei nämä "napit" ole saman kokoisia, vaan ainoastaan tekstin kokoisia.

Vinkkejä? Kiitos!

Tolla MS:llä on useita selaimia, mutta onneksi niitä käyttää niin harvat ettei niistä tarvi välittää. Lisäät niitä varten esim.

<!--[if IE]>
<h2> Sivu toimii parhaiten Firefoxilla, <a href="http://getfirefox.com">Lataa Firefox</a></h2>
<![endif]-->

Ennenko joku ottaa edellisen kommentin tosissaan niin IE:llähän on vieläkin yli 50 % markkinaosuus (joka tietysti vaihtelee sivustokohtaisesti). Itse ongelmaan en valitettavasti tiedä ratkaisua.

IE7 ei tue tyyliä table-cell. Voit huoletta vaihtaa tilalle blockin.