✔ CSS Dropdown - Internet Explorer

  • Themenstarter Themenstarter mlaukel
  • Beginndatum Beginndatum
M

mlaukel

Hallo,

folgendes: In Firefox, IE7, IE8 keine Probleme. ImIE6 zeigt er dasUntermenü so 1-2 Pixel nach oben rechts versetzt.

CSS-Code:
Code: 
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu,ul.cssMenu ul {
        margin:0;
	width:898px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:orange;
	background-repeat:repeat;
	border-width:0;
}
ul.cssMenu {
	display:block;
	float: left;
	width:898px;
}
ul.cssMenu ul{
	width:225px;
}
ul.cssMenu li{
	margin:2px 0px 0px 2px;
	font-size:0px;
}

ul.cssMenu a {
	display:block;
	background-color:transparent;
	border-width:0px;
	border-color:#6655ff;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	color: #111194;
	text-decoration:none;
	cursor:default;
        font-weight:bold;
        font-size:13px;
}
ul.cssMenu span{
	overflow:hidden;
}
ul.cssMenu li {
	float:left;
	width:auto;
}
ul.cssMenu ul li {
	float:none;
	width:auto;
}
ul.cssMenu ul a {
	text-align:left;
	white-space:nowrap;
}

ul.cssMenu li:hover{
	position:relative;
}
ul.cssMenu li:hover>a{
	background-color:#4792E6;
	border-color:#665500;
	border-style:solid;
	color: #ffffff;
	text-decoration:none;
        font-weight:bold;
        font-size:13px;
}
ul.cssMenu li a:hover{
	position:relative;
	background-color:#4792E6;
	border-color:#665500;
	border-style:solid;
	color: #ffffff;
	text-decoration:none;
        font-weight:bold;
        font-size:13px;
}
ul.cssMenu li:hover > a img.def  {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul{display:block}
ul.cssMenu span{
	display:block;
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:11px;}

HTML-Code:
Code: 
     <ul class="cssMenu cssMenum">
      <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Home</span><!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul class=" cssMenum">
        <li class=" cssMenui"><a class="  cssMenui" href="#">Kinderevents</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Party- und Dekorationsbedarf</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Online-Shop</a></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
      <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Aktuelles</span></a></li>
      <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Privatkunden</span><!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul class=" cssMenum">
        <li class=" cssMenui"><a class="  cssMenui" href="#">Kindergeburtstage</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Verleihkisten</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Spielger&auml;te- & H&uuml;pfburgverleih</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Kinderschminken</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Familienfeste und Hochzeiten</a></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
      <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Gesch&auml;ftskunden</span><!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul class=" cssMenum">
        <li class=" cssMenui"><a class="  cssMenui" href="#">Unser Angebot</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Bestellschein</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Kreative Aktionen</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Kinderbetreuung</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Kinderschminken</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Spielger&auml;te- & H&uuml;pfburgverleih</a></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
      <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Referenzen</span><!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul class=" cssMenum">
        <li class=" cssMenui"><a class="  cssMenui" href="#">Referenzen</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Presse</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Galerie</a></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
      <li class=" cssMenui"><a class="  cssMenui" href="#"><span>Kontakt</span><!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul class=" cssMenum">
        <li class=" cssMenui"><a class="  cssMenui" href="#">&Uuml;ber uns</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">AGB</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Impressum</a></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
     </ul>

Das Menü liegt im div navbar 900 Pixel breit, 40 hoch. In der CSS ist definiert:

.3spalten #navbar {
height: 30px;
}

Außerdem bringt Dreamweaver zig mal das Problem:

Problem mit sich erweiternder Box (http://www.adobe.com/cfusion/commun...oductid=1&loc=de&textid=EXPANDING_BOX_PROBLEM)

1 betreffende Stelle (9 mal Zeile 30):
Code: 
  <div class="ro">
	<div class="lo">
		<div class="ru">
			<div class="lu">
<div class="box-inhalt">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis no aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis
				</div>
			</div>
		</div>
	</div>
</div>

Ist ne Box mit runden Ecken.

CSS:
Code: 
.ro {
	background:url("Grafik1.gif") top right no-repeat;
	margin-left:5px;
	margin-top:18px;
	padding:0;
	width: 240px;
}

.lo {
	background:url("Grafik2.gif") top left no-repeat;
	margin:0;
	padding:0;
}

.ru {
	background:url("Grafik3.gif") bottom right no-repeat;
	margin:0;
	padding:0;
}

.lu {
	background:url("Grafik4.gif") bottom left no-repeat;
	margin:0;
	padding:0;
}

.box-inhalt {
	margin:0;
	padding:20px 60px 45px 30px;
	text-align:justify;
}

.box-inhalt p {
	margin:0;
	padding:0;
}


Hoffe jemand kann helfen. Danke !

Gruß
 
Zuletzt bearbeitet von einem Moderator:
Hi,

existiert diese Positionsangabe auch im Original-Menü von Stu Nicholls?
CSS: 
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}

Und um welches Menü handelt es sich hierbei denn?

Kann mir nämlich nicht vorstellen, dass im Original dieser Darstellungsfehler existiert.

Desweiteren möchte ich dich darauf aufmerksam machen, dass Stu Nicholls' Copyright-Hinweis in dem Stylesheet nicht entfernt werden darf!

mfg Maik
 
Dies ist kein Stu Nicholls Menü !

Hab ich selbst gebastelt, daher der Fehler ;-)

Wie ist es zu beheben ?
 
Zuletzt bearbeitet von einem Moderator:
Dieses besondere Markup, das in seinen Menüs zum Tragen kommt, um dem IE6 auf die Beine zu helfen, lässt aber die Vermutung zu:
Code: 
<li class=" cssMenui"><a class="  cssMenui" href="#"><span>Home</span><!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul class=" cssMenum">
        <li class=" cssMenui"><a class="  cssMenui" href="#">Kinderevents</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Party- und Dekorationsbedarf</a></li>
        <li class=" cssMenui"><a class="  cssMenui" href="#">Online-Shop</a></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>


mfg Maik
 
Versteh das Problem nicht.

Die Browserweichen sind nun mal nötig.

Werden so in fast jedem Menü genutzt. Darauf hat Herr Nicholls kein Patent ;-)
 
Dann nenn' mir bitte mal eine Seite, wo Dropdown-Menüs mit diesem "Stu-Nicholls-typischen" Markup ebenso publiziert werden.

Ich hab hier nämlich eher den Eindruck, dass du da eine seiner Menü-Vorlagen "umgemodelt" hast.

mfg Maik
 
Es ist wie gesagt kein umgemodeltes Stu Nicholls Menü.

Die Menüs waren vor längerem ein Vorbild.

Kann ich nun Hilfe erwarten ? Oder was hindert daran zu helfen ?
 
Dass sie für dich noch immer ein Vorbild sind, wie einst u.a. in dem Thema Hilfe bei CSS-Dropdown Anpassung/Erstellung, sieht man ja an dem "Conditional Comment"-Hack, der definitiv nicht aus deiner Feder stammt.

Sei's d'rum, hier die gewünschte Hilfestellung:
Code: 
ul.cssMenu ul{position: absolute;left:0;top:30px;}

ul.cssMenu a {
        display:block;
        background-color:transparent;
        border-width:0px;
        border-color:#6655ff;
        border-style:solid;
        text-align:left;
        text-decoration:none;
        padding:4px;
        color: #111194;
        text-decoration:none;
        cursor:default;
        font-weight:bold;
        font-size:13px;
        height:20px;
        float:left;
}

ul.cssMenu ul a {
        text-align:left;
        white-space:nowrap;
        float:none;
}


mfg Maik
 
Vielen Dank für die Hilfe hat geholfen ! ;-)

Bei der letzten Sache im letzten Jahr habe ich explizit erwähnt das es von CSSplay stammt. ;-)

Habe aber noch ein kleines anderes Problem. Das Menü liegt im Div navbar wie folgt definiert:
.3spalten #navbar {
height: 40px;
}

Umschlossen wird das ganze vom Container Div wie folgt:
.3spalten #container {
width: 900px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}

Unterhalb des Menüs liegen die Divs sidebar1, main-content & sidebar2 mit 15 Pixeln margin-top.

Die Menü-CSS ist wie oben.

Bekomme aber zig mal folgendes Browserkompatibilitätsproblem:
Problem mit sich erweiternder Box (Mehr: http://www.adobe.com/cfusion/commun...oductid=1&loc=de&textid=EXPANDING_BOX_PROBLEM)

Und einmal:
Doppelter Außenabstand bei schwebenden Feldern - Bug (Mehr: http://www.adobe.com/cfusion/commun...roductid=1&loc=de&textid=DOUBLED_FLOAT_MARGIN)

Nehme ich das Menü raus verschwinden die Fehler.

Hoffe du kannst mir diesbezüglich nochmal weiter helfen, dass ich dank dir wieder etwas mehr dazu lerne.

Vielen Dank !

Liebe Grüße !
 
Hm, ich würde da nicht viel d'rum geben, was Dreamweaver da so an Warnungen auswirft, solange die Seite im IE6 korrekt dargestellt wird.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück