[CSS] Menü. Darstellungsprobleme

[bofan]

Hallo!

Ich habe ein Problem.

Ich binde ein Menue ein. Zum Aufklappen.

In Firefox sieht es so aus:



Im IE7 macht er folgendes:



Mein Code

<div id="navigation" class="navigation">
   <ul id='nav'>
       <li id='first'><div>&nbsp;<b><a href='index.php'>Home</a></b></div></li>

       <li><div>&nbsp;<b><a href='filiale.php'>Unsere Firma</a></b></div>
             <ul>
             <li class='extra'><a href='filiale.php?id=1'>Reuterstadt Stavenhagen</a></li>
             <li class='extra'><a href='filiale.php?id=2'>Waren / M&uuml;ritz</a></li>
             </ul>
      </li>
      <li><div>&nbsp;<b><a href='service.php'>Service</a></b></div>
             <ul>
             <li class='extra'><a href='kontakt.php'>Kontakt</a></li>
             <li class='extra'><a href='gaestebuch.php'>G&auml;stebuch</a></li>
             <li class='extra'><a href='agb.php'>Unsere AGB</a></li>
             <li class='extra'><a href='impressum.php'>Impressum</a></li>
             </ul>
      </li>
      <li><div><b><a href='wissenswertes.php'>Wissenswertes</a></b></div></li>
      <li><div>&nbsp;</div></li>
      <li id='last'>&nbsp;</li>
   </ul>
</div>

[CSS]

.extra
{
background-color:#FFFFFF;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
  border: 1px solid #cecece;
}
#nav a {
	border:#333333;
	color:#666666;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #666666;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #cecece;
	border-width: 0 5px;
}

li {
  float: left;
  position: relative;
  width: 120px;
  margin: 0px;
  padding: 0px;
}

li#first {
	border-left-width: 1em;
}

li#last {
	border-right-width: 1em;
}

li ul {
  display: none;
  position: absolute;
  top: 1em;
  }
li > ul {
	top: auto;
	left: auto;
	}
li:hover ul, li.over ul{ display: block; }

Hat einer ne Idee.?!?

[wahsaga]

Erst mal den Verschachtelungsfehler raus machen, dann weitersehen.

Und Abstände bitte vernünftig per CSS realisieren, und nicht über non-breaking spaces.

[bofan]

Verschachtelungsfehler?

Unter Mecklenburger Goldschmiede © 2009 ist es in "Aktion" zu sehen.

okay. die   nehme ich dann mal raus.

[wahsaga]

Verschachtelungsfehler?

In dem Code, den du gezeigt hast, wird ein UL nicht geschlossen.

li > ul {
	top: auto;
	left: auto;
	}

Absolute Positionierung ganz ohne Angabe „echter” Koordinaten ist im IE oft problematisch.

[Kropff]

Außerdem arbeitet man bei cellpadding und cellspacing nicht mit CSS-Angaben, sondern nur mit stinknormalen Zahlen. Und mit dem li > ul kommt der IE6 nicht klar.

Peter

[bofan]

Ich habe mal den Code komplett gepostet.

Also die Tags sind alle geschlossen.



Wie kommst du auf Cellspaing?

[Kropff]

Wie kommst du auf Cellspaing?

<table style='width:100%;height:360px;' cellspacing='3px' cellpadding='2px'> 

Noch etwas. Man arbeitet nicht mehr mit physikalischen Auszeichnungen wie <b> oder <i>. Statt dessen nutzt man <em> oder <strong>. Je nach semantischer Bedeutung. Außerdem sind die &nbsp;- und <div>-Elemente überflüssig wie ein Kropf. Und wie sich schon sagte, kommt der IE6 nicht mit li > ul klar. Arbeite statt dessen mit li ul.

Peter

[Gunah]

li {
  float: left;
  position: relative;
  width: 120px;
  margin: 0px;
  padding: 0px;
}

sowas kannst du generell vergessen, warum gefloatet wenn es nicht soll...
das kannst du ganz einfach machen, in dem du bei dem UL und LI Tag "display: block" setzt, Standard für List Elemente ist: "display:list-item;"

[bofan]

Nach langem Suchen

Nach langem Suchen habe ich eine Lösung.

Siehe

Mecklenburger Goldschmiede © 2009

Nur habe ich ein Problem

die Breite der seite auf 900px limitiert.

Nun habe ich 9 Menu punkte. die sind 90px breit.


Warum wird nun der 9. Punkt in eine Neue Zeile gebracht. denn 90*9 =810px also eig. ist genug platz.

Thx for Help

[AmicaNoctis]

Da ist nicht genug Platz, weil

<div id="menu" style="width: 760px;">

gerade mal 760px breit ist und dessen Inhalt demzufolge auch

[bofan]

OMG.

Da war ich wohl Blind ...