Es ist ja mittlerweile üblich, Menus mit Unordered Lists horizontal nebeneinander zu programmieren.
Funktioniert prima. Aufgrund einer Debug-Nachricht des Zend Caches wird meine Seite jedoch im Internet Implorer mit dem sog. Quirks Modus gerendert (weil noch vor dem Doctype die Debug-Nachricht ausgegeben wird).
Kennt jemand einen CSS/HTML-Code für ein unordered lists Menu, der auch im IE Quirks Modus noch funktioniert?
Mein Code sieht so aus:
Code:
/*** menu ***/
#menu-container{
height:28px;
background-color:#eaeaea;
width:100%;
}
.menu-item{
padding-left:20px;
padding-right:20px;
color:#2f2f2f;
font-family: Arial Narrow,Arial,Verdana,sans-serif;
font-size:16px;
text-transform:uppercase;
}
#menu li
{
display: inline;
list-style-type: none;
list-style:none;
display: table-cell;
vertical-align:middle;
height:28px;
}
#menu li:hover
{
color:#FFFFFF;
background-color:#666666;
background-image:url('img/menu-updates.jpg');
}
#menu .home:hover
{
background-color:#666666;
background-image:url('img/menu-updates1.jpg');
color:#FFFFFF;
}
#menu .seite2:hover
{
background-color:#666666;
background-image:url('img/menu-updates2.jpg');
color:#FFFFFF;
}
#menu li a,#menu li a:visited
{
color:#2f2f2f;
text-decoration: none;
}
#menu li a:hover,#menu li a:visited:hover
{
color: #FFFFFF;
text-decoration: none;
}
/*** menu ***/
<div id="menu-container" align="left">
<ul id="menu">
<li class="menu-item" id="home">
<a href="/index.html">Home</a>
</li>
<li class="menu-item" id="seite2">
<a href="/seite2.html">Seite 2</a>
</li>
</ul><!-- /menu -->
</div><!-- /menu-container-->
Jetzt wo ich den CSS-Code hier einfüge fallen mir die :hover Tags auf.
Könnte darin das Darstellproblem des IE-Quirk Modus liegen?