✔ IE - Darstellungsfehler im DropDown Untermenü

[Radhad]

Hallo zusammen,

ich habe gestern auf meiner Entwicklungsseite ein DropDown-Menü eingefügt. Im FireFox ist die Darstellung so wie gewollt: Hauptmenü & Untermenü bilden links eine Kante. Im IE sieht es wie im nachfolgenden Bild aus.

Hier der CSS-Code dazu:

.unter
{
	z-index: 99;
	Position: absolute;
	Background: #999999;
	Visibility: hidden;
	text-align: left;
}
.haupt
{
	background: #DF1E26;
	font: 12px Verdana #FFFFFF;
	Position: relative;
	Width: 80px;
	Border: none;
	Text-Align: center;
}

 

[Maik]

Vielleicht benötigt der IE die CSS-Eigenschaft left:0, um das Submenü linksbündig auszurichten?

.unter 
{ 
    z-index: 99; 
    position: absolute; 
    left: 0;
    background: #999999; 
    visibility: hidden; 
    text-align: left; 
}

 

[Radhad]

Dann setzt er das Menü ganz an den linken Rand. Das will ich ja nicht, ich will nur, dass es bündig ist mit dem Element darüber.

 

[Maik]

Zeig doch bitte mal den HTML-Code, damit wir auch sehen, mit welchen Elementen die Navigation aufgebaut bzw. strukturiert ist.

 

[Radhad]

So sieht mein HTML Quellcode aus:

<td class="menu">
  <DIV CLASS="haupt" OnMouseOver="MenueAuf('Menue')" OnMouseOut="MenueZu('Menue')"><a href="index.php?area=<?php echo $area; ?>">Home</a></DIV>
    <DIV cellpadding="0" CLASS="unter" ID="Menue" OnMouseOver="MenueAuf('Menue')" OnMouseOut="MenueZu('Menue')">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td onmouseover="this.style.backgroundColor='#DF1E26';" onmouseout="this.style.backgroundColor='#000000';" ><A HREF="1.htm">Untermenue 1</A></td>
        </tr>
        <tr>
          <td onmouseover="this.style.backgroundColor='#DF1E26';" onmouseout="this.style.backgroundColor='#000000';" ><A HREF="2.htm">Untermenue 2</A></td>
        </tr>
        <tr>
          <td onmouseover="this.style.backgroundColor='#DF1E26';" onmouseout="this.style.backgroundColor='#000000';" ><A HREF="3.htm">Untermenue 3</A></td>
        </tr>
        <tr>
          <td onmouseover="this.style.backgroundColor='#DF1E26';" onmouseout="this.style.backgroundColor='#000000';" ><A HREF="4.htm">Untermenue 4</A></td>
        </tr>
        <tr>
          <td onmouseover="this.style.backgroundColor='#DF1E26';" onmouseout="this.style.backgroundColor='#000000';" ><A HREF="5.htm">Untermenue 5</A></td>
        </tr>
      </table>
    </DIV>
  </DIV>
</td>

 

[Maik]

Wenn ich deine HTML- und CSS-Angaben in eine Testseite einfüge, richtet der IE das Submenü linksbündig aus

 

[Radhad]

Aber auf meiner Entwicklungsseite http://radhad.homedns.org geht das überhaupt nicht ^^

 

[Maik]

Dann entferne mal text-align:center ;-]

td.menu {
        border: 1px solid #FFF;
        font: 12px Verdana, sans-serif;
        text-align: center;
        color: #FFF;
        background: #000;
        width: 80px;
}

 

[Radhad]

Ah, ok, dann muss ich das wohl umbauen, danke, so geht es!


Gruß Radhad