Dropdown Menü im IE verschoben @ tutorials.de: Tutorials, Forum & Hilfe

Futzel · 01.03.10 11:26

Hi,

ich habe folgendes Problem.
Ich habe ein horizontales Dropdown Menü erstellt. Im Firefox wird alles richtig dargestellt.
Im IE ist allerdings das Dropdown leicht nach rechts verschoben und ich find den Fehler nicht.
Um zu verdeutlichen was ich meine, sind 2 Fotos angehangen.

Verwendet wurde der IE VErsion 6.0 und Firefox 3.5.8!

Hier der gesamte HTML Code:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=csUnicode">
<head>
<title>Incidint </title>
<link rel="stylesheet" href="format.css" type="text/css">
<!--[if IE]>
    <style type="text/css" media="screen" >
    #menu ul li {float: left; width: 100%;}
   body {overflow-y:hidden;}
    </style>
    <![endif]-->

    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {behavior: url(csshover3.htc); font-size: 100%; overflow-y:hidden;}
    #menu ul li a {height: 1%;}
    }
    </style>
    <![endif]--> 

</head>

<table align="center" bgcolor="#EEEEEE"  cellspacing="0" cellpadding="0" border="0" width=100% >
<tr>
<td bgcolor="#CCCCCC"  style="border-top:solid 1px white;border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-bottom:solid 1px #6d94a7;" align="center" align="middle"    height="50">
<span style="color:#E20074;font-size:20pt;letter-spacing:4px"> h1 Überschrift aus den Skripten</span>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" valign="middle" width="100%" height="18" align="center">
<!-- menü oben -->
<table bgcolor="#FFFFFF" width=100%  border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table  width=100%  border="0" cellpadding="0" cellspacing="0">
 <div id="menu">
<ul>
    <li><h2><a href="index.html">Statistiken  (60 Tage)</a></h2> </li>	
</ul>
	
<ul>
    <li><h2><a href="index.html">Statistiken (ges. Zeitraum)</a></h2> </li>	
</ul>
	
	 <ul>
    <li><h2><a href="index.html">Aktion (KW 07/10)</a></h2>
      <ul>
      <li><a href="xxxx.html">eins</a></li>
      <li><a href="xxxx.html">zwei</a>
      </li>
      <li><a href="xxxx.html">drei</a>
      </li>
      </ul>
    </li>	
    </ul>
	
	 <ul>
    <li><h2><a href="index.html">Kategorie(KW 07/10)</a></h2>
      <ul>
      <li><a href="xxxx.html">eins</a></li>
      <li><a href="xxxx.html">zwei</a>
      </li>
      <li><a href="xxxx.html">drei</a>
      </li>
      </ul>
    </li>	
    </ul>	
	
	 <ul>
    <li><h2><a href="index.html">Bearbeiter(KW 07/10)</a></h2>
      <ul>
      <li><a href="xxxx.html">eins</a></li>
      <li><a href="xxxx.html">zwei</a>
      </li>
      <li><a href="xxxx.html">drei</a>
      </li>
      </ul>
    </li>	
    </ul>
</div>
	
</table> </td>
</tr>
</table>
<!-- ende menü oben-->


</td>
</tr>

<tr>

<td valign="top" bgcolor="#FFFFFF"  width="100%" height="450" style="border-top:solid 1px #ffffff;border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-bottom:solid 1px #89A9B8"  >
<br>
<table height="100%" border="0" cellpadding="0" cellspacing="0"  width="100%">
<tr>
<td valign="top" ><!-- beginn hauptinhaltstabelle--><table border="0" cellpadding="0" cellspacing="0"  width="100%" >
<tr>
<!-- abstand links vom inhalt-->  <td width="30" ><img src="/images/space.gif" width="30" height="1" border="0" alt=""></td><!-- ende abstand links vom inhalt-->
<td valign="top" width="100%">

Hier kommt die Maus
<br><br>
Evt. Über Dropdown Menüs in Aktion,Bearbeiter und Kategorie direkt die Kalenderwochen auswählen.



</td><!-- abstand rechts vom inhalt--> <td width="30" ><img src="http://www.tutorials.de/forum/images/space.gif" width="30" height="1" border="0" alt=""></td><!-- ende abstand rechts vom inhalt-->
</tr>
</table><!--ende hauptinhaltstabelle-->
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="30"  align="center" style="border-top:solid 1px #ffffff;border-left:solid 1px #ffffff;border-right:solid 1px #ffffff;border-bottom:solid 1px white" ><span style="font-size:8pt;color:#E20074;" >Elapsed Time: <br>©2010 yyyyyyy</span></td>
</tr>
</table></td>
</tr>
</table>


</body>
</html>

Hier der CSS CODE für das Dropdown:

HTML-Code:

 @charset "ISO-8859-1";
body  { 	background-color:#EEEEEE;
 }


.dunkelgrau {font-family: Verdana; font-size: 12px; color: #000000; background-color:#CECFCE; text-align:left; vertical-align:middle; }
.hellgrau {font-family: Verdana; font-size: 12px; color: #000000; background-color:#ECEFEC; text-align:left; vertical-align:middle; }
.dunkelgrauR {font-family: Verdana; font-size: 12px; color: #000000; background-color:#CECFCE; text-align:right; vertical-align:middle; }
.hellgrauR{font-family: Verdana; font-size: 12px; color: #000000; background-color:#ECEFEC; text-align:right; vertical-align:middle; }
.chinStroke {font-family: Sun-ExtA; font-size: 80px; color: #000000; text-align:middle; vertical-align:middle; }
.chinStrokeS {font-family: Sun-ExtA; font-size: 20px; color: #000000; text-align:middle; vertical-align:middle; }
.chin {font-family: Arial Unicode MS; font-size: 80px; color: #000000; text-align:left; vertical-align:middle; }
.chinSmall {font-family: Arial Unicode MS; font-size: 24px; color: #000000; text-align:left; vertical-align:middle; }
.chinTop {font-family: Arial Unicode MS; font-size: 80px; color: #000000; text-align:left; vertical-align:top; }
.chinSmallTop {font-family: Arial Unicode MS; font-size: 24px; color: #000000; text-align:left; vertical-align:top; }
.separator {font-family: Verdana; font-size: 20px; color: #000000; background-color:#FFFFFF; text-align:left; vertical-align:middle; }
a:link { text-decoration:underline; color:#e00000; }
a:visited { text-decoration:underline; color:#e00000; }
a:hover { text-decoration:underline; color:#00e000; }
a:active { text-decoration:underline; background-color:#cff; }
a:focus { text-decoration:underline; background-color:#080; }
p.newpage { page-break-before: always; }
h1 {font-family: Verdana; font-size: 18px; color: #000000; background-color:#FFFFFF; text-align:left; vertical-align:top; }
h2 {font-family: Verdana; font-size: 16px; color: #000000; background-color:#FFFFFF; text-align:left; vertical-align:top; }
p {font-family: Verdana; font-size: 12px; color: #000000; background-color:#FFFFFF; text-align:left; vertical-align:top; }
br {font-family: Verdana; font-size: 12px; color: #000000; background-color:#FFFFFF; text-align:left; vertical-align:top; }

#menu a:visited{
line-height:18px;
color:#E20074;
background-color:#CCCCCC;
text-decoration:none ;font-family:verdana, sans-serif;
font-size:9pt;

padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;margin: 0px auto;

  }

#menu a:active{  
background-color:#CCCCCC;
color:#E20074;
text-decoration:none;
font-family:verdana, sans-serif;
font-size: 9pt;

padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;margin: 0px auto;

  }

#menu ul { 
list-style: none; 
margin: 0; 
padding: 0; 
width: 20%; 
float: left;
} 

#menu a, #menu h2 { 
text-decoration:none;
font-family:verdana, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: center;
display: block; 
padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;margin: 0px auto;
} 


#menu a { 
display:block;
line-height:18px;
background-color:#CCCCCC;
color:#E20074;
text-decoration:none;
font-family:verdana, sans-serif;
font-size: 9pt;

border-width: 1px; 
border-style: solid;
border-color: #ccc #888 #555 #bbb;

padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;margin: 0px auto;
}

#menu a:hover { 
background-color:#5E879B;
color:#E20074;
text-decoration:none;
font-family:verdana, sans-serif;
font-size: 9pt;

padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;margin: 0px auto;
}

#menu li {
position: relative;
} 

#menu ul ul { 
position: absolute; 
z-index: 500; 
}

#menu ul ul ul { 
position: absolute; 
top: 0; 
left: 100%; 
} 

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul{
display: none;
width: 99%; 
padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;margin: 0px auto;
} 

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul{
display: block;
width: 99%; 
padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;margin: 0px auto;
}

Maik · 01.03.10 13:19

Hi,

hast du im Stylesheet auch die voreingestelten Polsterungseigenschaften des Listenelements berücksichtigt und entsprechend zurückgesetzt?

Code css:

ul {
margin:0;
padding:0;
}

mfg Maik

Futzel · 01.03.10 13:48

Hi,

ja hab ich. Hatte aus versehen nicht den ganzen CSS Code gepostet. Ist aktualisiert.

Maik · 01.03.10 14:18

Dann poste bitte mal den vollständigen Code (HTML + CSS) der Seite, oder nenn den Link zu ihr, und verrate uns, von welcher IE-Version hier die Rede ist.

Siehe hierzu auch meinen "Sticky-Thread" in der Themenübersicht des CSS-Forums:

Wichtig: Bei CSS-Problemen mit dem IE bitte die Version angeben

mfg Maik

Futzel · 01.03.10 14:27

Zitat von Maik

Dann poste bitte mal den vollständigen Code (HTML + CSS) der Seite, oder nenn den Link zu ihr, und verrate uns, von welcher IE-Version hier die Rede ist.

Siehe hierzu auch meinen "Sticky-Thread" in der Themenübersicht des CSS-Forums:

Wichtig: Bei CSS-Problemen mit dem IE bitte die Version angeben

mfg Maik

Geupdatet. Siehe ersten Post.
Seite ist nur lokal verfügbar. Daher auch nur der Code.

Maik · 01.03.10 14:35

Die Ursache findet sich hier in den horizontalen Außenabständen, die normalerweise zum horizontalen Zentrieren dienen:

Code :

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul{
display: none;
width: 99%;
padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;margin: 0px [B][COLOR="Red"]auto[/COLOR][/B];
}
 
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul{
display: block;
width: 99%;
padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;margin: 0px [B][COLOR="Red"]auto[/COLOR][/B];
}

mfg Maik

Futzel · 12.03.10 23:40

Hi,

ich muss den Thread wieder öffnen, da ich beim Testen nun festgestellt habe, dass das Dropdown im IE8 nicht funktoniert.
Mozilla ind IE6 klappt es wunderbar. IE7 kann ich leider nicht testen.

Kann mir einer einen Tip geben woran es liegt?

Hier der Link zur Testseite:

http://xmailing.de/design/index2.html

Maik · 12.03.10 23:43

Hi,

das liegt an deinem gewählten Doctype, mit dem alle Browser in den proprietären "Quirks Mode" schalten, und in diesem Darstellungsmodus verhalten sich IE7 und IE8 wie ihr berühmt berüchtigter Vorgänger, der die :hover-Pseudoklasse ausschließlich für das <a>-Element unterstützt.

Der »DOCTYPE-Switch« und seine Auswirkungen

Übergib dein HTML-Dokument mit dem entsprechenden Doctype im standardkonformen Modus, und die jüngeren IE-Versionen interpretieren auch diesen Selektor zum Einblenden der Submenüs:

Code css:

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul{
display: block;
width: 99%; 
padding-left: 2px; padding-bottom: 2px;   padding-top: 2px;
}

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Dropdown Menü

CSS DropDown Menü

Link Menü in IE verschoben (Html&CSS)

Menü wie dropdown nur bei senkrechtem Menü

Dropdown Menü zeigt falsches Menü

E-Mail:

Abonnieren Abbestellen