✔ Padding Problem in CSS Menü nur im IE

akdesign · 2. Juli 2009

Hallo,

ich hab ein horizontales CSS-Menü erstellt. Das Untermenü hat padding: 10px.

Dadurch blendet sich aber im IE das Untermenü immer sofort wieder aus, sobald man mit der Mouse etwas runter geht.

Mit welchem Trick kann ich das für den IE wieder ausgleichen?

Menü:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Reines CSS Menü</title>
<link href="menu.css" rel="stylesheet" type="text/css">


</head>


<body>


<div id="menu">
<ul id="Navigation">
    <li><a href="#Beispiel">Broschüren</a>
	   <ul>
        <li><a href="#Beispiel">Lacanche&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        <li><a href="#Beispiel">&nbsp;&nbsp;&nbsp;&nbsp;Énergies & Ressources</a></li>
      </ul></li>
	  
	<li><a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</a></li>  

    <li><a href="#Beispiel">Webdesign</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        <li><a href="#Beispiel">&nbsp;&nbsp;&nbsp;&nbsp;Seite 2b</a></li>
		<li><a href="#Beispiel">&nbsp;&nbsp;&nbsp;&nbsp;Seite 2c</a></li>
      </ul>
    </li>
	
	<li><a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</a></li>  


    <li><a href="#Beispiel">Packaging</a></li>
	
	<li><a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</a></li>  


    <li><a id="aktuell" href="#Beispiel">Anzeigen</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>


	
  </ul></div>

</body>
</html>

CSS Code:

Code:

ul#Navigation {
    margin: 0; padding: 0;
}

ul#Navigation li {
    list-style: none;
    float: left;
    margin: 0; padding: 0;
	
}

ul#Navigation li ul {
    margin: 0; padding-left: 0; padding-top: 10px;
    position: absolute;
    display: none;  /* Unternavigation ausblenden */

	}

ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
	
	
}

ul#Navigation li ul li {
	width: auto;
	margin: 0; padding: 0;
}

ul#Navigation a{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
    display: block;
    width: auto;  /* Breite den in li enthaltenen Elementen zuweisen */
	padding: 0px;
    text-decoration: none;
    color: #ffffff;
}

ul#Navigation li ul a{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
    display: block;
    width: auto;  /* Breite den in li enthaltenen Elementen zuweisen */
	padding: 0px;
    text-decoration: none;
    color: #003366;
	

}

ul#Navigation a:hover{
    color: #990000; 
}

Maik · 2. Juli 2009

Hi,

auf diese Weise schliesst bei mir der IE das Submenü nicht vorzeitig:

CSS:

ul#Navigation li {
    list-style: none;
    float: left;
    margin: 0; padding: 0;
    position:relative;
    height:15px;
}

ul#Navigation li ul {
    display: none;  /* Unternavigation ausblenden */
        }

ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
    margin: 0; padding-left: 0;  top:15px;
    position: absolute;

}

mfg Maik

akdesign · 2. Juli 2009

Na ja, aber mein Ziel ist ja, dass das Untermenü nicht direkt an der Hauptnavi hängt, sondern eben ein paar Pixel padding.

Und mit Deinem Vorschlag hängen die Untermenüpunkte eben direkt oben dran.

Maik · 2. Juli 2009

Und wo ist hier das Problem?

Dann stockst du eben die height- und top-Deklaration nach deinen Vorstellungen auf.

mfg Maik

akdesign · 2. Juli 2009

Das hatte ich probiert, tat sich aber nix. Hab aber gerade gemerkt, dass ich einen kl. Fehler eingebaut hatte.

Jetzt geht der Versatz, das Problem bleibt aber bestehen, dass sich das Menü sofort ausblendet

Code:

/* CSS Document */

ul#Navigation {
    margin: 0; padding: 0;
}

ul#Navigation li {
    list-style: none;
    float: left;
    margin: 0; padding: 0;
	position: relative;
	height: 30px;
	
}

ul#Navigation li ul {
    display: none;  /* Unternavigation ausblenden */

	}

ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
	margin: 0;
	padding-left: 0; top: 30px;
	position: absolute;
	
	
}

ul#Navigation li ul li {
	width: auto;
	margin: 0; padding: 0;
}

ul#Navigation a{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
    display: block;
    width: auto;  /* Breite den in li enthaltenen Elementen zuweisen */
	padding: 0px;
    text-decoration: none;
    color: #ffffff;
}

ul#Navigation li ul a{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
    display: block;
    width: auto;  /* Breite den in li enthaltenen Elementen zuweisen */
	padding: 0px;
    text-decoration: none;
    color: #003366;
	

}

ul#Navigation a:hover{
    color: #990000; 
}

Maik · 2. Juli 2009

akdesign hat gesagt.:
das Problem bleibt aber bestehen, dass sich das Menü sofort ausblendet

Kann ich mit dem neuen CSS-Code bei mir nicht reproduzieren.

mfg Maik

akdesign · 2. Juli 2009

Menü:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Reines CSS Menü</title>
<link href="menu.css" rel="stylesheet" type="text/css">


</head>


<body>


<div id="menu">
<ul id="Navigation">
    <li><a href="#Beispiel">Broschüren</a>
	   <ul>
        <li><a href="#Beispiel">Lacanche&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        <li><a href="#Beispiel">&nbsp;&nbsp;&nbsp;&nbsp;Énergies & Ressources</a></li>
      </ul></li>
	  
	<li><a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</a></li>  

    <li><a href="#Beispiel">Webdesign</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        <li><a href="#Beispiel">&nbsp;&nbsp;&nbsp;&nbsp;Seite 2b</a></li>
		<li><a href="#Beispiel">&nbsp;&nbsp;&nbsp;&nbsp;Seite 2c</a></li>
      </ul>
    </li>
	
	<li><a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</a></li>  


    <li><a href="#Beispiel">Packaging</a></li>
	
	<li><a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</a></li>  


    <li><a id="aktuell" href="#Beispiel">Anzeigen</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>


	
  </ul></div>

</body>
</html>

und neuer CSS-Code:

Code:

ul#Navigation {
    margin: 0; padding: 0;
}

ul#Navigation li {
    list-style: none;
    float: left;
    margin: 0; padding: 0;
	position: relative;
	height: 30px;
	
}

ul#Navigation li ul {
    display: none;  /* Unternavigation ausblenden */

	}

ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
	margin: 0;
	padding-left: 0; top: 30px;
	position: absolute;
	
	
}

ul#Navigation li ul li {
	width: auto;
	margin: 0; padding: 0;
}

ul#Navigation a{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
    display: block;
    width: auto;  /* Breite den in li enthaltenen Elementen zuweisen */
	padding: 0px;
    text-decoration: none;
    color: #ffffff;
}

ul#Navigation li ul a{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-weight: bold;
    display: block;
    width: auto;  /* Breite den in li enthaltenen Elementen zuweisen */
	padding: 0px;
    text-decoration: none;
    color: #003366;
	

}

ul#Navigation a:hover{
    color: #990000; 
}

Maik · 2. Juli 2009

Den HTML-/CSS-Code kenn ich schon, und es bleibt bei meiner Aussage.

mfg Maik

Maik · 2. Juli 2009

Hast du mal den Browsercache geleert, und anschliessend die Seite neu aufgerufen?

mfg Maik

Maik · 2. Juli 2009

Übrigens wird im Original-Menü http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm das Submenü ebenfalls mit top positioniert, und im IE tauchen dort auch keine deratigen Probleme auf.

mfg Maik

✔ Padding Problem in CSS Menü nur im IE

akdesign

Erfahrenes Mitglied

Maik

akdesign

Erfahrenes Mitglied

Maik

akdesign

Erfahrenes Mitglied

Maik

akdesign

Erfahrenes Mitglied

Maik

Maik

Maik

Neue Beiträge