Suckerfish Probleme im IE

Status
Nicht offen für weitere Antworten.
H

hottentotten12

Grünschnabel
Hallo zusammen.
Ich bin gerade dabei mir ein einfaches vertikales Suckerfish Drop Down Menü zu erstellen und benötige etwas Unterstützung.

Dies ist meine Menüstruktur:
HTML: 
<body>
<ul id="dd_mother" class="dd_mocl">
	<li><a href="#">Menuepunkt 1</a>
		<ul>

        	<li><a href="#">Unterpunkt 1</a></li>
            <li><a href="#">Unterpunkt 2</a></li>
            <li><a href="#">Unterpunkt 3</a></li>
        </ul>
	</li>
	<li><a href="#">Menuepunkt 2</a>
		<ul>

        	<li><a href="#">Unterpunkt 4</a></li>
            <li><a href="#">Unterpunkt 5</a></li>
            <li><a href="#">Unterpunkt 6</a></li>
        </ul>
	</li>
	<li><a href="#">Menuepunkt 3</a>
		<ul>

        	<li><a href="#">Unterpunkt 7</a></li>
            <li><a href="#">Unterpunkt 8</a></li>
            <li><a href="#">Unterpunkt 9</a></li>
        </ul>
	</li>
	<li><a href="#">Menuepunkt 4</a>
		<ul>

        	<li><a href="#">Unterpunkt 10</a></li>
            <li><a href="#">Unterpunkt 11</a></li>
            <li><a href="#">Unterpunkt 12</a></li>
        </ul>
	</li>
</ul>
<li class="ddclear">&nbsp;</li></ul>
</body>


Dies ist das CSS:
HTML: 
<style type="text/css">
<!--

/*Suckerfish CSS Einstellungen*/

.dd_mocl {
position:relative;

}

.dd_mocl a, .dd_mocl li {
float:left;
display:block;
white-space:nowrap;
}

.dd_mocl div a, .dd_mocl ul a, .dd_mocl ul li {
float:none;
}

.dd_mocl div {
visibility:hidden;
position:absolute;
}

.dd_mocl ul {
left:-10000px;
position:absolute;
}

.dd_mocl, .dd_mocl ul {
list-style:none;
padding:0px;
margin:0px;
}

.dd_mocl li a {
float:none
}

.dd_mocl li {
position:relative;
}

.dd_mocl ul {
z-index:10;
}

.dd_mocl ul ul {
z-index:20;
}

.dd_mocl ul ul ul {
z-index:30;
}

.dd_mocl ul ul ul ul {
z-index:40;
}

.dd_mocl ul ul ul ul ul {
z-index:50;
}

li:hover>ul {
left:auto;
}

/*Klasse für IE 5 & 6*/
.ieHover ul {
left:auto;
}

.ddclear {
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}

/*------------------------------*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #666666;
margin:0px;
padding:0px;
}
ul, li, a{
margin:0px;
padding:0px;
}


#dd_mother {
font:Arial, Helvetica, sans-serif;
font-size:85%;

}

#dd_mother li a{
color:#000000;
text-decoration:none;
background-color:#84CEFF;
padding-top: 0.2em;
padding-right: 1.8em;
padding-bottom: 0.2em;
padding-left: 0.5em;
margin:0px;
}

#dd_mother li a:hover{
color:#000000;
text-decoration:underline;
}

#dd_mother li ul{
margin:0px;
padding:0px;
}

#dd_mother li ul li{
	margin:0px;
	padding:0px;
}

#dd_mother li ul li a{
	background-color:#72B9D3;
	margin:0px;
	color:#000000;
	padding-top: 0.5em;
	padding-right: 2.8em;
	padding-bottom: 0.5em;
	padding-left: 1.5em;
}
#dd_mother li ul li a:hover{
	text-decoration:none;
	color:#000000;
	padding-top: 0.5em;
	padding-right: 2.3em;
	padding-bottom: 0.5em;
	padding-left: 2em;
}

-->
</style>

und dies das Javascript für den IE:

HTML: 
<script type="text/javascript">
<!--
ddHover = function() {
var ddObject = document.getElementById("dd_mother").getElementsByTagName("li");
for (var i=0; i<ddObject.length; i++) {
	ddObject[i].onmouseover=function() {
		this.className+=" ieHover";
		}
	ddObject[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp(" ieHover\\b"), "");
		}
	}
}

if (window.attachEvent) window.attachEvent("onload", ddHover);
//-->
</script>

Die komplette Seite ist hier zu sehen.



Mein Problem ist nun das ich im Internet Explorer(6) riesige Abstände zwischen den Submenüs habe und ich diese nicht beseitigen kann. Ich kann mir auch nicht erklären wie diese entstehen. Das zweite Problem ist das ich im IE auch nicht auf die Submenüs komme, da es vom Javascript wieder entfernt wird sobald ich die Maus vom Hauptmenü Link entferne. Da müsste ich wohl noch etwas dran arbeiten. Könnte mir jemand bitte einen Tipp geben was ich anders machen sollte?

Gruß Andreas
 
Hallo nochmal.

Ich habe mich jetzt für die Variante von Maik entschieden. Funktioniert ja auch wunderbar wie man hier sehen kann. Ein Problem ist geblieben. Ich habe im IE 6 nach wie vor diese riesigen Abstände zwischen den Untermenü Links. Bitte. Kann mir jemand erklären wieso das so ist?
Code ist ja im Quelltext vorhanden.

Danke schon mal!
 
Der Grund hierfür ist die von dir im Selektor #nav li ul hinzugefügte width:auto-Deklaration , die die erste (erforderliche) width-Angabe überschreibt, sowie die Angabe float:none im Selektor #nav li ul li, denn der IE benötigt "floatende" Listenpunkte, um keinen vertikalen Abstand zwischen ihnen zu setzen.
 
Ok! Vielen Dank vorerst für die Info.
Was mache ich denn jetzt am besten wenn ich #nav li ul keine feste Größe zuweisen möchte und die #nav li ul li trotzdem untereinander auflisten möchte. Sprich, das dieses Menü im IE genau so aussieht wie zur Zeit im Firefox o.ä.? Ich wäre dir sehr dankbar wenn du mir da noch mal einen Rat geben könntest.

Andreas
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück