Horizontale Navigation im FF und IE verschoben

Status
Nicht offen für weitere Antworten.
F

Fiberman

Mitglied
Hallo, ich habe mir eine CSS Navigation gebastelt und bekomme es nicht hin, dass sie im Firefox und IE sauber untereinander angezeigt wird. Ich glaube ich habe hier irgendeine Kleinigkeit übersehen oder was vergessen.

Meine Probleme:

- Die Navigation soll allgemein zentriert in dem Div stehen mit 5px Abstand zwischen den Buttons
- Die Subnavigation soll genau passend zentriert unter den Buttons sein
- Das wichtigste und größte meiner Probleme es soll mindestens mit FF und IE funktionieren.

Zur verdeutlichung hab ich mal den Quelltext und einen Link zur Seite gepostet. Die Rahmen zeigen Graphische Elemente.

Danke für euere Hifle...

Hier der Link zur Seite: http://fiberman.fi.funpic.de/

und hier der HTML code ohne Javascript:
Code: 
<html>
<head>
<title>Horizontale Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</style>
</head>
<body>
<div id="main"> 
 <div id="top"></div> 
 <div id="navileiste">
   <div id="nav">
     <li id="neu"><a href="#">Hauptseite</a>
       <ul>
         <li id="neu"><a href="#">Hauptseite 1</a></li>
         <li id="neu"><a href="#">Hauptseite 2</a></li>
         <li id="neu"><a href="#">Hauptseite 3</a></li>
         <li id="neu"><a href="#">Hauptseite 4</a></li>
         <li id="neu"><a href="#">Hauptseite 5</a></li>
         <li id="neu"><a href="#">Hauptseite 6</a></li>
         <li id="neu"><a href="#">Hauptseite 7</a></li>
         <li id="neu"><a href="#">Hauptseite 8</a></li>
         <li id="neu"><a href="#">Hauptseite 9</a></li>
       </ul>
     </li>
     <li id="neu"><a href="#index.php?id=6">Zeite Seite</a>
       <ul>
         <li id="neu"><a href="#">Seite 2.1</a></li>
         <li id="neu"><a href="#">Seite 2.2</a></li>
         <li id="neu"><a href="#">Seite 2.3</a></li>
         <li id="neu"><a href="#">Seite 2.4</a></li>
       </ul>
     </li>
     <li id="neu"><a href="#index.php?id=5">Rest</a>
       <ul>
         <li id="neu"><a href="#">Sonstiges</a></li>
         <li id="neu"><a href="#">Blindtext</a></li>
         <li id="neu"><a href="#">Nur mal so</a></li>
       </ul>
     </li>
     <li id="neu"><a href="#index.php?id=4">Reisen</a>
       <ul>
         <li id="neu"><a href="#">Ausland</a></li>
         <li id="neu"><a href="#">Inland</a></li>
       </ul>
     </li>
     <li id="neu"><a href="#">Tutorials</a>
     </li>
   </div> 
 </div>
 <div id="content"></div>
 <div class="clear"></div>
 <div id="footer"><p> Ein ganz normaler Footer</p></div> 
</div> 
</body>
</html>

Hier CSS:
Code: 
html,body {
  height: 100%;
  background: #006600;
  color: #FFFFFF;
  text-align:center;
  min-height: 100.05%;
  margin: 0 auto;
  padding: 0;
  font-family: Arial,Verdana, Helvetica, sans-serif;
  font-size: 85%;
  
} 

#main {
   margin : 0 auto;
   width : 800px;
   min-height: 100.05%;
   height: auto !important;
   position: relative;
   height:100.05%;
}

#top {
   height: 150px;
   width: 800px;
   border:1px #FFFFFF solid;
   background-image: url('images/kopf-1.jpg');
   background-repeat: no-repeat;
   margin : 0 auto;
   
}

#navileiste {
	width : 800px;
	margin : 0 auto;
	height: 29px;
	background-image: url('images/kopf-2.jpg');
	background-repeat: no-repeat;
}


#content {
    margin: 0 auto;
	height: 351px; 
	width: 800px;	
border:1px #FFFFFF solid;
	background-image: url('images/kids-blanco1.jpg');
	background-repeat: no-repeat;
}
#spacer {
	padding-top:	1px; 
	height: 25px;  /* damit der footer nicht über das content rutscht */
}

#content h1, #content p {
	padding:0;
	margin:0;
}

#footer{
    width: 800px;
	position: absolute; 
	background: #006600;
	bottom: 0 !important; 
	bottom: -1px; 
	height: 25px; 
	left: 50%;
	margin-left: -400px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 85%;
	color: #FFFFCC;
	
}

.clear {
	clear: both;
	margin: 0;
	padding: 0;
}

#nav { 
	padding: 0px;
	margin-left: 55px !important;
	margin: 0 auto;
	list-style: none;
	display:block;
    width: 700px; /* important for Opera7 */
	font-family:tahoma,arial,helvetica,sans-serif;
	font-size:12px;
	font-weight:bold;
	
}

#nav ul { 
	padding: 0px;
	margin: 0 auto;
	list-style: none;
	position:absolute; 
    display:block;
    width: 112px;	
}

#nav a {
	display: block;
	width: 110px;
	text-align:center;
    text-decoration:none;
    padding: 2px ;
    margin: 0 auto;
	color: #FFFFFF;
	background-color:#008000

}
#nav a:hover {
	display: block;
	width: 110px;
	text-align:center;
    text-decoration:none;
    padding: 2px;
    margin: 0 auto;
	color: #96F358;
	background-color:#00622c;
	
}

#nav li { 
	float: left;
	width: 110px;
	border:1px #68a370 solid;
	margin: 0px;
	
	
	
}
#neu li {
	width: 120px; 
	border:1px #68a370 solid;
	margin: 0 auto;
	background-color:#008000;
	color:#ffffff;
	
}

#nav li ul { 
	margin: 0px;
	width: 110px;
	left: -999em; 
}

#nav li ul ul { 
	margin: 0px;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
	background-color:#00622c;
	color: #96f358;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	background-color:#00622c;
	color: #96f358;
	
}

#nav li:hover , #nav li li:hover, #nav li.sfhover, #nav li li.sfhover { /* lists nested under hovered list items */
	left: auto;
	background-color:#00622c;
	color: #ffffff;
	
}
#content {
	clear: left;
}

Danke
 
Mir ist aufgefallen, daß im Online-Demo zwischen DIV#navileiste und UL#nav ein weiteres DIV eingebettet ist. Vielleicht ist das der Grund für den Darstellungsfehler?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück