Hallo Leute,
ich habe ein Darstellungsproblem mit meiner Navigation im IE7. Der Firefox und der IE8 stellen alles korrekt dar, aber nur eben der IE7 nicht. Beim IE7 verschiebt es die ganzen Navipunkte in jeweils eine Zeile untereinander.
Anschauen kann man sich das hier:
Test-Navigation. Allerdings sieht man das Problem nur im IE7.
Hier mal der Code der HTML-Seite:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#header {position: relative; top: 0px; left: 0px; height: 74px; width: 1000px;}
#headerlogo {position: absolute; top: 0px; left: 0px;}
#headerlogo img.headerlogo {margin: 3px 0px 3px 0px;}
#headernavigation {position: relative; top: 0px; left: 155px; width: 845px; height: 24px; text-align: right;}
#headernavigation ul {display: block;}
#headernavigation ul img {float: right;}
#headernavigation ul li {padding: 2px 2px 2px 0px; height: 24px; float: right; list-style-type: none;}
#headernavigation ul li:hover {cursor: pointer;}
#headernavigation ul li.topnav_login {background-image: url(topnav1_bg.png); background-repeat: repeat-x;}
#headernavigation ul li.topnav_sonstiges {background-image: url(topnav2_bg.png); background-repeat: repeat-x;}
#headernavigation ul li.topnav_sonstiges img.lupe {padding: 1px 0px 0px 0px; background-image: url(topnav2_bg.png); background-repeat: repeat-x;}
#headernavigation ul li.topnav_sonstiges input.topsuchfeld {margin: 1px 5px 0px 0px; padding: 0px 0px 2px 2px; width: 100px; height: 12px; color: #B0B0B0; background-color: #FFFFFF; font-size: 10px; border: 1px solid #666666; vertical-align: middle; float: right;}
</style>
</head>
<body>
<div id='header'>
<div id='headerlogo'>
</div>
<div id='headernavigation'>
<form name='topsuche'>
<ul>
<img src='topnav2_re.png' height='24' width='8' />
<li class='topnav_sonstiges'>
<img class='lupe' src='icon_lupe.png' height='16' width='16' title='Suche beginnen' />
<input class='topsuchfeld' name='suchfeld' type='text' title='Suche' value='' />
</li>
<img src='topnav2_trenner.png' height='24' width='9' /><li class='topnav_sonstiges' title='Nav 4'>Nav 4</li>
<img src='topnav2_trenner.png' height='24' width='9' /><li class='topnav_sonstiges' title='Nav 3'>Nav 3</li>
<img src='topnav2_trenner.png' height='24' width='9' /><li class='topnav_sonstiges' title='Nav 2'>Nav 2</li>
<img src='topnav2_trenner.png' height='24' width='9' /><li class='topnav_sonstiges' title='Nav 1'>Nav 1</li>
<img src='topnav12_trenner.png' height='24' width='11' /><li class='topnav_login' title='Login'>Login</li>
<img src='topnav1_li.png' height='24' width='7' />
</ul>
</form>
</div>
</body>
</html>