Hallo,
es gelingt mir nicht, ein simples horizontales Menü so mit CSS zu formatieren, dass es in den aktuellen Browsern identisch angezeigt wird. Das Problem ist, dass die Menüpunkte, die als Liste implementiert sind, im Internet-Explorer eine zu geringe Höhe haben, so dass der Hintergrund des Elternelements mit einer Dicke von 1 bzw. 2 Pixeln unter diesen Menüpunkten zu sehen sind. Diese Abweichung tritt nur mit dem Internetexplorer auf (benutzt wird die Version 11). Wird hingegen die Höhe des Banner geändert, um im Internet Explorer dieselbe Höhe zu haben wie Menüpunkte, werden die Menüpunkte in anderen Browsern mit einer größeren Höhe angezeigt, so dass sie aus dem umgebenden Balken herausragen.
Kann mir jemand sagen, welchen Fehler ich mache?
Für einen Hinweis wäre ich sehr dankbar.
Christian
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>list-style:none;
padding:15px 26px;
background:#003366;
color:#ffffff;
<title>Test</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#banner {
width:100%;
height:47px;
margin-left:auto;
margin-right:auto;
background-color:#003366;
}
#menue {
height:47px;
width:960px;
background-color:#003366;
font-size:15px;
font-family:ubuntu;
display:block;
}
#menue ul li {
position:relative;
float:left;
}
#menue ul li:hover {
background:#5883a8;
text-decoration:none;
}
#menue a{
color:#ffffff;
text-decoration:none;
}
</style>
</head>
<body>
<div id="banner">
<div id="menue" style="margin:0 auto;">
<ul>
<li><a href="/Seite_1.php">Seite 1</a></li>
<li style="background-color:#5883a8;">Seite 2</a></li>
<li><a href="/Seite_3.php">Seite 3</a></li>
<li><a href="/Seite_4.php">Seite 4<a/></li>
<li><a href="/Seite_5.php">Seite 5<a/></li>
<li><a href="/Seite_6.php">Seite 6<a/></li>
</ul>
</div>
</div>
</body>
</html>