✔ [Yaml] Horizontales UL/LI Menü macht Probleme bei IE 6.0

[josDesign]

Hallo,

ich mache für den heimischen MTB-Verein eine neue Seite. Ich verwende dazu Yaml in der neuen Version.

Ich hatte anfangs Probleme beim IE 6.0 mit dem Zentrieren der Seite. Habe das dann gelöst, indem ich inline-CSS reingeschrieben habe.


Mein aktuelles Problem ist aber im div#header, indem habe ich folgenden HTML-Code

		<div id="header" style="width:720px;">
			<div id="topnav">
				<!-- start: skip link navigation -->
				<a class="skip" href="#navigation" title="skip link">Zur Navigation</a><span class="hideme">.</span>
				<a class="skip" href="#content" title="skip link">Zum Inhalt</a><span class="hideme">.</span>
				<!-- end: skip link navigation -->
				</div>
				<div id="hauptmenu_wrapper">
					<div id="hauptmenu" style="width:719px;height:75px;">
						<ul>
						  <li>
							<a href="#"><span>START</span></a>
						  </li>
						  <li>
							<a href="#"><span>AKTUELL</span></a>
						  </li>
						  <li>
							<a href="#"><span>DER CLUB</span></a>
						  </li>
						  <li>
							<a href="#"><span>TERMINE</span></a>
						  </li>
						</ul>
					</div>
				</div>
				<div id="header_content_wrapper">
					<div id="header_content">
						<img src="bilder/header_dummybild.png" border="0" />
					</div>
				</div>
			</div>

Hier habe ich also das Hauptmenü welches ich nacher durch das ypslideoutmenü-Javaskript-Menü erweitern werde. Hierfür muss aber zuerst das Hauptmenü funktionieren, was es in allen bis auf den IE 6.0 auch tut. Wenn man im IE 6.0 mit der Maus darüberfährt verschiebt sich der darunterliegende DIV header_content_wrapper um einige Pixel. Ich habe aber nirgendwo in einem hover definiert das etwas angepasst wird.

Das zugehörige CSS zum Hauptmenü sieht so aus: (es scheint als ob es im IE 6 nicht richtig interpretiert wird?)

  #hauptmenu_wrapper {
  		height:77px;
  		padding-top:13px;
  		width:720px;
  		z-index:10;

  }
  #hauptmenu_wrapper #hauptmenu {
  		background:url(../../bilder/hauptmenu_dummy.pn) transparent;
  		text-align:left;
  		width:720px;
  		height:77px;
  		float:left;
  }
  #hauptmenu ul {
  		padding:0pt;
  		margin:0pt;
  		list-style-type: none;
  }
  #hauptmenu ul li {
  		float:left;
  		position:relative;
  		font-style:italic;
  		text-transform:uppercase;
  		padding-left:0px;
  		padding-right:0px;
  		list-style: none inside none;
  		margin:0 0;
  		
  }
  #hauptmenu ul li a:hover {
  		text-decoration:none;
  }
  #hauptmenu ul li a {
  		display:block;
  		float:left;
  		height:77px;
  		line-height:20px;
  		text-decoration:none;
		color:#ffffff;
		font-size:15px;	
		vertical-align:middle;
  }
  #hauptmenu ul li a span {
  		padding:0 13px;
  		padding-top:28px;
  		margin:0 0;
  		color:#ffffff;
  		display:block;
  }
  
  #hauptmenu ul li a:hover {
  		background:url(../../bilder/hauptmenu_hover.png);
  }

Hat jemand eine Idee an was das liegt?
Mit bestem Dank im Voraus,
jos


EDIT: Ich konnte es nun nach insgesamt 6 Stunden lösen. Ich habe das Problem mit absoluter Positionierung gemacht.