✔ IE: Liste wird nicht richtig angezeigt

Status
Nicht offen für weitere Antworten.
T

Thalin

Mitglied
Hallo,

So, Ich habe ja mittlerweile meine Seite mit etwas Hilfe soweit, das Sie im FireFox so aussieht, wie Ich das möchte.
Allerdings mag der IE das anscheinend gar nicht. Da ist von nem DropDown Menu nicht allzu viel zu sehen... :(
Hab mal gelesen, das man da verschieden Hacks einbinden muss oder so...
Hat da vielleicht jemand ne Idee?

Hier mal der Code

HTML-Datei

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Hover_menu</title>
     <link rel="stylesheet" type="text/css" href="Hover_menu.css" />
     
</head>
<body>

<table align="center">
    <tr>
        <td>
		<table class="tableup">
			    <tr>
				    <td>				    				   		        			    		    
				      <ul class="menu" id="menuleft" >
				        <li><a title="Startseite">Home</a>
				            <ul>				            
				                <li><a title="PT-Nova">PT-Nova</a></li>
				                <li><a title="Download">Download</a></li>
				                <li><a title="Profil">Profil</a></li>				             
				            </ul>
				        </li>
				        <li><a title="Unternehmen">Unternehmen</a>
				            <ul>
				                <li><a title="Motto">Motto</a></li>
				                <li><a title="Philosophie">Philosophie</a></li>
				                <li><a title="Daten/ Fakten">Daten/ Fakten</a></li>
				                <li><a title="Profil">Profil</a></li>
				                <li><a title="Referenzen">Referenzen</a></li>
				                <li><a title="Partner">Partner</a></li>
				            </ul>
				        </li>
				        <li><a title="News">News</a></li>
				        <li><a title="Termine">Termine</a></li>
				        <li><a title="Jobs">Jobs</a></li>
				        <li><a title="Presse">Presse</a></li>				        
				      </ul>				     
				      </td>
				      <td>
				      <ul class="menu" id="menuright">
				        <li><a title="Kundenlogin">Kundenlogin</a></li>
				        <li><a title="Kontakt">Kontakt</a>
				         <ul>
				                <li><a title="Motto">Motto</a></li>
				                <li><a title="Philosophie">Philosophie</a></li>
				                <li><a title="Daten/ Fakten">Daten/ Fakten</a></li>
				                <li><a title="Profil">Profil</a></li>
				                <li><a title="Referenzen">Referenzen</a></li>
				                <li><a title="Partner">Partner</a></li>
				            </ul>
				        </li>
				        <li><a title="Sitemap">Sitemap</a></li>
				        <li><a title="Impressum">Impressum</a>
				         <ul>
				                <li><a title="Motto">Motto</a></li>
				                <li><a title="Philosophie">Philosophie</a></li>
				                <li><a title="Daten/ Fakten">Daten/ Fakten</a></li>
				                <li><a title="Profil">Profil</a></li>
				                <li><a title="Referenzen">Referenzen</a></li>
				                <li><a title="Partner">Partner</a></li>
				            </ul>
				        </li>
				        <li><a title="Download">Download</a></li>			           
				      </ul>  				     				      
	                </td>                   
				 </tr>
		    </table>
		    <table class="maintable">
			    <tr>
				    <td width="10"></td>
				    <td width="943"></td>
				    <td width="10"></td>
			    </tr>
			    <tr>
				    <td height="82"></td>
				    <td valign="middle" align="center"><img src="logo.jpg" width="963" height="82" alt="HanseCom GmbH"/></td>
				    <td></td>
			    </tr>
			    <tr>
				    <td></td>
				    <td></td>
				    <td></td>
			    </tr>
			    <tr>
				    <td height="500"></td>
				    <td class="middletable" align="center">Content</td>
				    <td></td>
			    </tr>
			    <tr>
				    <td></td>
				    <td></td>
				    <td></td>
			    </tr>
		    </table>
		</td>
	</tr>
</table>
</body>
</html>

Code: 
/* CSS Document */

/*
=================================
Skin sytles for body
=================================
*/

body 
{	
	background-color:#1F3F84;
	text-align:center;
	font-family:Arial;
}


/*
=================================
Skin sytles for TABLE-tags
=================================
*/
.tableup
{
	color:#FFFFFF;
	background-color:inherit;
	margin:60px 82px auto 76px;
	font-size:12px;
	
}

.maintable
{
	color:inherit;
	background-color:#FFFFFF; 
	margin-left:82px; 
	margin-right:82px;
	width:943px;	
	font-family: Arial;
	font-size:12px;
	
}

.middletable
{
	background-color:#E0F1FB;
	color:inherit;	 
	font-size:12px;
	
}

.navtdleft
{
	color:inherit;
	background-color:inherit;
	text-align: left;
	width: 481px;
	height: 17px;
	font-family: 'Verdana', 'Tahoma', 'Helvetica', 'Arial', sans-serif;
	font-size:12px;
	
}

.navtdright
{
	color:inherit;
	background-color:inherit;
	text-align: right;
	width: 481px;
	height: 17px;
	font-family: 'Verdana', 'Tahoma', 'Helvetica', 'Arial', sans-serif;
	font-size:12px;	
	
}

/*Menu Design--------------------------------------------------------------------------*/

/**
  * Menü-Container:
  *  
  *****************************************************************************/
ul.menu {
	margin: 0;                 
	padding: 0;              
	/*position: absolute;       
    font-size: 12px;                     
	list-style-type: none;
	font-weight:bold;
	
}


ul#menuleft {
	width: 420px;           
	float: left;
	
}


ul#menuright {
	width: 560px;            
	float: right;
	
}


/**
  * Menüeinträge in der Menüleiste:
  *  
  *****************************************************************************/
ul.menu li {
	margin: 0;                
	display: inline; 
			
}


ul#menuleft > li {
	float: left; 
	
	
}

ul#menuright > li {
	float: right;

}


ul.menu > li > a {
	color : #FFF;
	background-color:inherit;
	border-bottom:none;
	border-right:solid 1px #fff;
	border-top:none;
	
}


/**
  * Alle Untermenüs:
  *  
  *****************************************************************************/

ul.menu li ul {
	margin: 0;          
	padding: .2em .3em .3em .2em ;            
	position: absolute;   
	list-style-type: none; 
	/*background-color: #a4c6eb; */
	display: none; 
	float:left;
	width:130px;	
	/*-moz-opacity:0.90; 	*/
	background:  url('schatten.png');
	
}


/**
  * Alle Menüeinträge der Untermenüs:
  *  
  *****************************************************************************/
ul.menu ul li {
	margin: 0;
	display:block;
	background-color:#a4c6eb;
	width:99%;
	
}


/**
  * Alle Links im Menü-Container:
  *  
  *****************************************************************************/
ul.menu a {
	padding:.7em .5em .7em .5em;
	text-decoration: none;
	color: #4b6da7;	
	cursor: default;	          
	font-size: 11px;           
	text-align: left;			
	border-bottom: solid 1px #4b6da7;
	display: block; 
	margin:0px 4px 0px 4px;
	text-indent:-.5em;
	line-height:.3em;	
	background: #a4c6eb;
		
}

/**
  * Alle Links in Untermenüs beim Überfahren mit der Maus:
  *  
  *****************************************************************************/
ul.menu a:hover {	                              
	padding:.7em .5em .7em .5em;            
	color: #fff;
	background-color:#1F3F84;
	display: block;
	cursor:pointer;	
		
}


/**
  * Alle ungeordnete Listen in Untermenüs beim Überfahren der Menüeinträge in
  * der Menüleiste mit der Maus:
  *  
  *****************************************************************************/
ul.menu li:hover> ul{
	display: block;
	
}

ul.menu li:hover > ul li ul 
{
	margin-top:-23px; 
	left: 70px;
	text-align:left;
	
}


Danke schon mal für die Bemühungen :)
 
Hi,

die Vorgängerversionen des IE7 unterstützen den Kindselektor, wie beispielsweise ul#menuleft > li, nicht.

Von daher solltest du diese Regeln stattdessen mit dem Nachfahrenselektor ul#menuleft li notieren.
 
Ok, hab Ich gemacht.
Sieht jetzt schon besser aus, aber immernoch n ganzes stueck entfernt von dem wie es sein sollte :/
Außerdem erscheint im IE an der rechten Seite noch ein grau hinterlegter Scrollbalken...
 
Zuletzt bearbeitet:
Der Scrollbalken ist normal beim IE ... wüsste jetzt nicht wie man den wegkriegt..

Hast dus mit IE 6 oder 7 angeschaut... bei ie 6 wird der Schatten beschissen aussehen weil er keine transparente pngs unterstützt, aber ich glaube da gibts ne möglichkeit das ers doch richtig anzeigt(weis grad net wie).
 
Der Scrollbalken wird beim IE immer angezeigt? oO
Naja, Ich weiß schon, warum Ich lieber mit dem FF arbteite :)
Das mit den PNG hab Ich auch schon gehört...
Aber da er im mom nur die erste Ebene des Menus anzeigt und von einem DropdownMenu noch nicht allzu viel zu sehen ist, kann Ich das mit dem Schatten erstmal nach hinten schieben ;)
 
Das Workaround fürs PNG hab Ich gemacht mit der Folge, das der Schatten beim FF auch nicht mehr angezeigt wird. Ob er beim IE angezeigt wird weiß Ich nicht, da dort der Dropdown ja noch nicht funktioniert.

Die Seite von Stu Nichols ist echt gut. Nette Ideen für ne eigene HP :)
Allerdings kann Ich jetzt nicht n komplett neues Menu nehmen. Hab meins ja gerade soweit, das es so aussieht, wie es geforsdert ist...nur halt nicht im IE :/
 
Die anderen Menus, die Du mir vorschlägst sind echt jut :)
Allerdings brauch Ich kein neues Menu...Ich muss meins nur soweit hinkriegen, das es im IE ordentlich angezeigt wird :/
 
Hi,

ich hab dir mit den genannten Seiten lediglich die Möglichkeiten aufgezeigt, wie sich für den IE6 (und jünger) ein CSS-Dropdownmenü umsetzen lässt, unter Berücksichtigung der Tatsache, dass diese IE-Versionen die :hover-Pseudoklasse neben dem a-Element für die übrigen HTML-Elemente nicht unterstützen - in deinem Fall li:hover.

Das SELFHTML-Kapitel Dynamische CSS-Navigation für moderne Browser verdeutlicht dies anhand der gezeigten Beispiele.

Es ist nun deine Entscheidung, welche der empfohlenen Techniken du auf deine Listennavigation anwendest.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück