Keskustelu: Nettisivujen teko: Vaihteeks taas IE temppuilee(tarvitaan CSS apua.)

En taas ymmärrä miksei toi display:inline-block toimi IE 7:ssa.
Mitä ratkaisua ehdottaisitte?

Tässä osa koodista

ul#navi li
{
	width: 12%;
	display: inline-block;
	list-style-type: none;
	color: #525252;
	font-size: 12px;
	letter-spacing: 1px;
	/*height: 20px;*/
	border-right: 1px solid #525252;
	text-align: center;

	/*border:2px solid green;*/
}


ul#navi
{

	width: 70%;
	min-width: 565px;
	position:absolute;
	left: 15%;
	top: 15%;

	font-family: Verdana, Geneba, Sans-Serif;
	padding: 0;

}

<!-- Navi ei ole minkään muun divin sisällä-->
 <ul id="navi">
  <li id="firstLink"><a href="index.php">ETUSIVU</a></li>
  <li id="myytavat"><a href="index.php">MYYTÄVÄT KOHTEET</a></li>
  <li class="refYht"><a href="index.php">REFERENSSIT</a></li>
  <li><a href="index.php">YRITYS</a></li>
  <li class="refYht"><a href="index.php">YHTEYSTIEDOT</a></li>
 </ul>

Muistaakseni IE ei hyväksy inline-block:ia. Miksei pelkkä inline riitä?

Hennkka kirjoitti:

Muistaakseni IE ei hyväksy inline-block:ia. Miksei pelkkä inline riitä?

Koska inlinelle ei voi asettaa leveyttä.

Paulus M kirjoitti:

En taas ymmärrä miksei toi display:inline-block toimi IE 7:ssa. Mitä ratkaisua ehdottaisitte?

Kokeile tätä: http://grasshopperpebbles.com/css/css-inline-block-ie7-hack/

Tossu, kiitos sikana! Pääsinpä vähällä, ei tarttenut alkaa mitään scriptiä vääntämään.

Kannattaa kysyä täällä, saan melkein aina huippu vastauksia!

Vielä siistimmällä pääset, jos tyylittelet linkkielementin ja jätät li-elementin tyylittömäksi, ts. pelkkä display: inline; sille. Sitten ei tarvitse luottaa minkään tason "hackeihin": et tarvitse zoomia, ei tarvitse heittää *display:tä listaelementille. Sama koodi kaikille selaimille.