✔ Versteckte Felder Anzeige Problem im Internet Explorer 6

[chasse83]

Hallo Community!

Ich habe da ein kleines Anzeigeproblem im Internet Explorer 6.

Und zwar hab ich ein Menü gebastelt und arbeite mit versteckten Feldern um das Menü nicht aufzublähen. Zwischen den Menüpunkten liegt ein fester Abstand von 2px. Das Problem im IE6 besteht nun darin, wenn ich mit der Maus über einen Menüpunkt fahre, über dem ein versteckter DIV Container liegt, so wird der Abstand nicht eingehalten und der Menupunkt rutscht ganz an den darüberliegenden Menüpunkt ran. Dieses Verrutschen beim MouseOver soll natürlich vermieden werden und geschieht auch nicht im Firefox und IE7.

Hier der Quellcode:

HTML

<a class="menu" href="#" onClick="menu('untermenu1');">Menupunkt1</a>
<div id="untermenu1">
<a class="submenu" href="#">Untermenupunkt1</a>
<a class="submenu" href="#">Untermenupunkt1</a>
</div>
<a class="menu" href="#" onClick="menu('untermenu2');">Menupunkt2</a>
...

CSS

#menu a.menu {
  	display:block; width:200px; height:1.3em; padding:3px;
  	text-align:left; font-weight:normal; text-decoration:none;
  	border: 1px solid #ddd; margin: 2px;
}

#menu a.menu:hover {
  	color:#000; background-color:#eee;
}

#menu a.menu:visited {
  	color: #0000ff;
}

#menu a.submenu {
  	display:block; width:193px; height:1.1em; padding:3px;
  	text-align:left; font-weight:normal; text-decoration:none;
  	border: 1px solid #ddd; margin: 2px; padding-left: 10px;
}

* html #menu a.submenu {
	width: 200px;
}

#menu a.submenu:hover {
  	color:#000; background-color:#eee;
}

#menu a.submenu:visited {
  	color: #0000ff;
}

#untermenu1 {
	visibility: hidden;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0;
}

* html #untermenu1 { height: 100%; }

Ich hoffe, jemand kann mir helfen.

Grüße
Christian

 

[Maik]

Hi,

versuch es mal anstelle von visibility:hidden mit display:none:

#untermenu1 {
        display: none;
        position: absolute;
        margin: 0;
        padding: 0;
        top: 0;
}

Dementsprechend musst du dann noch den Scriptcode ändern, der zum Ein- u. Ausblenden der Submenüs eingesetzt wird.

Das Menü liesse sich alternativ auch mit dem Listenelement auszeichnen:

ul#menu, ul#menu ul {
margin:0;
padding:0;
list-style:none;
}

#menu a.menu {
          display:block;
          width:200px;
          height:1.3em;
          padding:3px;
          text-align:left;
          font-weight:normal;
          text-decoration:none;
          border: 1px solid #ddd;
          margin: 2px;
}

#menu a.menu:hover {
          color:#000;
          background-color:#eee;
}

#menu a.menu:visited {
          color: #0000ff;
}

#menu a.submenu {
          display:block;
          width:193px;
          height:1.1em;
          padding:3px;
          text-align:left;
          font-weight:normal;
          text-decoration:none;
          border: 1px solid #ddd;
          margin: 2px;
          padding-left: 10px;
}

* html #menu a.submenu {
        width: 200px;
}

#menu a.submenu:hover {
          color:#000;
          background-color:#eee;
}

#menu a.submenu:visited {
          color: #0000ff;
}

#untermenu1 {
        display: none;
        position: absolute;
        top: 0;
}

<ul id="menu">
     <li><a class="menu" href="#" onclick="menu('untermenu1');">Menupunkt1</a>
            <ul id="untermenu1">
                <li><a class="submenu" href="#">Untermenupunkt1</a></li>
                <li><a class="submenu" href="#">Untermenupunkt1</a></li>
            </ul>
     </li>
     <li><a class="menu" href="#" onclick="menu('untermenu2');">Menupunkt2</a></li>
</ul>

 

[chasse83]

Hallo Maik,

vielen Dank für die Antwort.

Ich hab mal ein Beispiel für dich vorbereitet, schon mit deinen Vorschlägen.

http://www.christian-hasse.com/test/test.html

Allerdings wirst du / ihr sehen, dass er immer noch beim MouseOver die Elemente verschiebt.

Wäre super, wenn du bzw. jemand das Problem im IE 6 beseitigen kann.

 

[Maik]

Hi,

erweitere das Stylesheet mit der folgenden Regel:

* html #menu li { float:left; }

 

[chasse83]

Danke Maik, Problem gelöst.