IE: Darstellungsproblem: <ul>-Element im <ul>-Element

**Akyaneos** · 05.03.2007 10:03

Hallo zusammen! Ein schönes Forum habt ihr hier!
Kann mir jemand helfen? Mein Problem ist folgendes:

Ich möchte ein Menu bauen aus <ul>- und <li>-Elementen. Der Firefox zeigt es genau so an, wie ich es gerne haben möchte. Der IE7 aber, hält Platz immer vor jedem ersten Untermenupunkt. Dies ist der Code:

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" xml:lang="de">
<head>
   <title>richtige Syntax</title>
   <style type="text/css">

body  {
   margin: 0;
   border: 0;
   padding: 0;
   font-weight: 400;
   font-size: 12px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   background-color: black;
}

#seite {
   position: fixed;
   top: 55px;
   width: 100%;
   height: 85%;
   background-color: white;
}

#menuspalte {
   float: left;
   position: relative;
   margin: 0 30px 0 0;
   top: 246px;
   left: 1em;
   width: 14em;
   height: inherit;
}

ul {
   margin: 0;
}

ul#menu, ul#menu2, ul#menu3  {
   border: solid thin red;
   padding: 0 0 0 0.7em;
}   

ul#menu li {
   list-style: none;
}

ul#menu a {
   display: block;
   text-decoration: none;
}

ul#menu a:link {
  color: #666;
}

ul#menu a:visited {
  color: #666;
}
ul#menu a:hover {
  color: #F7A218;
}
ul#menu a:active {
   color: #F7A218;
}

</style>
</head>
<body>
   
   <div id="seite">
      <div id="menuspalte">      
         <ul id="menu">
            <li><a href="index.html">Menupunkt1</a></li>
            <li><a href="index.html">Menupunkt2</a></li>
            <li><a href="index.html">Menupunkt3, geoeffnet</a></li>
            <li>
               <ul id="menu2">
                  <li><a href="index.html">Untermenu1-Menupunkt1</a></li>
                  <li><a href="index.html">Untermenu1-Menupunkt2, geoeffnet</a></li>
                  <li>
                     <ul id="menu3">
                        <li><a href="index.html">Untermenu2-Menupunkt1</a></li>
                        <li><a href="index.html">Untermenu2-Menupunkt2</a></li>
                        <li><a href="index.html">Untermenu2-Menupunkt3</a></li>
                     </ul>
                  </li>   
                  <li><a href="index.html">Untermenu1-Menupunkt3</a></li>
               </ul>
            </li>
            <li><a href="index.html">Menupunkt4</a></li>
         </ul>
      </div>
</body>
</html>

Bei meinen eigenen Versuchen, das wieder hinzukriegen, bin ich auch über etwas verwunderliches gestoßen: Wenn ich immer da im Quelltext, wo ein Untermenu beginnt das <li> der darüber liegenden Ebene weglasse, wird mir die Seite im IE7 wieder richtig dargestellt - leider ist diese Lösung zu radikal für die W3C-Validierung; hier der Quelltext - vielleicht kann ich damit jemanden weiterbringen:

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" xml:lang="de">
<head>
   <title>Agentur Lindner</title>
   <style type="text/css">

body  {
   margin: 0;
   border: 0;
   padding: 0;
   font-weight: 400;
   font-size: 12px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   background-color: black;
}

#seite {
   position: fixed;
   top: 55px;
   width: 100%;
   height: 85%;
   background-color: white;
}

#menuspalte {
   float: left;
   position: relative;
   margin: 0 30px 0 0;
   top: 246px;
   left: 1em;
   width: 14em;
   height: inherit;
}

ul {
   margin: 0;
}

ul#menu, ul#menu2, ul#menu3  {
   border: solid thin red;
   padding: 0 0 0 0.7em;
}   

ul#menu li {
   list-style: none;
}

ul#menu a {
   display: block;
   text-decoration: none;
}

ul#menu a:link {
  color: #666;
}

ul#menu a:visited {
  color: #666;
}
ul#menu a:hover {
  color: #F7A218;
}
ul#menu a:active {
   color: #F7A218;
}

</style>
</head>
<body>
   
   <div id="seite">
      <div id="menuspalte">      
         <ul id="menu">
            <li><a href="index.html">Menupunkt1</a></li>
            <li><a href="index.html">Menupunkt2</a></li>
            <li><a href="index.html">Menupunkt3, geoeffnet</a></li>
                  <ul id="menu2">
                        <li><a href="index.html">Untermenu1-Menupunkt1</a></li>
                        <li><a href="index.html">Untermenu1-Menupunkt2, geoeffnet</a></li>
                                  <ul id="menu3">
                                        <li><a href="index.html">Untermenu2-Menupunkt1</a></li>
                                        <li><a href="index.html">Untermenu2-Menupunkt2</a></li>
                                        <li><a href="index.html">Untermenu2-Menupunkt3</a></li>
                              </ul>
                     <li><a href="index.html">Untermenu1-Menupunkt3</a></li>
                </ul>
            <li><a href="index.html">Menupunkt4</a></li>
         </ul>
      </div>
</body>
</html>

Wenn jemand was weiss, bitte, postet das hier rein, ich wär euch echt dankbar!

Schöne Grüße,
der Akyaenos

**Akyaneos** · 05.03.2007 11:31

danke, ingo!
habs kapiert! ein <ul>-Element in einem <ul>-Element verhält sich also (im Bezug auf die Zeilenabstände der einzelnen Listenzeilen), als wäre es ein weiteres <li>. Darauf wär ich nicht gekommen, also nochmals danke

**Akyaneos** · 08.03.2007 09:40

oh... ja stimmt^^ mein fehler war, dass ich für die Listen der unteren Ebenen immer ein neues <li>-Element geöffnet hab; anstatt, so wie ich jetzt kapiert hab unter ein ungeschlossenes <li> in dem schon text steht ein <ul> zu öffnen.

Andere Frage: Wie ist das mit dem IE6 ? Ich hab hier gleich noch ein Beispiel: Hier hat jede Listenzeile immer ein riesen Abstand zur nächsten Listenzeile, bloß da wo eine neue Listenebene anfängt ist der Abstand klein genug.

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" xml:lang="de">
<head>
	<title>Agentur Lindner</title>
	<style type="text/css">ul {
	top: 0;
	margin: 0;
	padding: 0;
	border: 0;
}	

ul#menu2 {
	padding-left: 1em;
}	

ul#menu3 {
	padding-left: 1em; 
}	

ul#menu a {
	display: block;
	text-decoration: none;
	font-size: 14px;
	font-weight:500;
}

ul#menu li {
	list-style: none;
}

ul#menu a:link {	
	color: #666;
}

ul#menu a:visited {
  color: #666; 
}

ul#menu a:hover {
  color: #F7A218; 
}

ul#menu a:active {
	color: #F7A218;
}</style>
</head>
<body>

<div style="font-size:14px; margin: 0; border: 0; padding: 0; font-weight: 400;">
		
			<ul id="menu">
				<li><a href="././index.html">Menupunkt1</a></li>
				<li><a href="././index.html">Menupunkt2</a>
							 <ul id="menu2">
							 		 <li><a href="././index.html">UnterMenupunkt1</a></li>
									 <li><a href="index.html">Untermenupunkt2</a></li>
									 <li><a href="index.html">Untermenupunkt3</a>
									 				<ul id="menu3">
															<li><a href="index.html">Unteruntermenupunkt1</a></li>
															<li><a href="index.html">Unteruntermenupunkt2</a></li>
													</ul>
									 </li>
									 <li><a href="index.html">Untermenupunkt4</a></li>
							 </ul>
			  	</li>
				<li><a href="index.html">Menupunk3</a></li>
			</ul>
	      
	 </div></body></html>

Weiss jemand wie ich dieses Problem beheben kann?

**Akyaneos** · 08.03.2007 12:11

Zitat von ingo

Ein Leerzeichen, bevor du den Link wieder schließt, schafft Abhilfe

Das ist ja der Wahnsinn ^^
Danke !

**Boris** · 12.03.2007 13:56

Ein height: 1%; im CSS bringt das gleiche und man spart sich ein Leerzeichen

zur Startseite vom TP

Thema: IE: Darstellungsproblem: <ul>-Element im <ul>-Element

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

IE: Darstellungsproblem: <ul>-Element im <ul>-Element

Aktive Benutzer

Aktive Benutzer