IE: Liste wird nicht richtig angezeigt @ tutorials.de: Tutorials, Forum & Hilfe

Thalin · 05.10.07 15:13

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

Maik · 05.10.07 15:43

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.

Thalin · 05.10.07 15:50

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...

HuRaHoRRe · 05.10.07 15:56

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).

Thalin · 05.10.07 16:01

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

Maik · 05.10.07 16:04

Workaround für die mangelnde Unterstützung des PNG-Formats im IE (<7): Cross-browser semi-transparent backgrounds

Alternative CSS-Dropdown-Menüs, die im IE (<7) laufen, findest du bei Stu Nicholls -> http://www.cssplay.co.uk/menus/ (Menus - Multi-Level CSS Onlys)

Thalin · 05.10.07 16:18

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 :/

Maik · 05.10.07 16:40

Zitat von Thalin

Das Workaround fürs PNG hab Ich gemacht mit der Folge, das der Schatten beim FF auch nicht mehr angezeigt wird.

Dann wirst du die Technik wohl falsch angewendet haben

Zitat von Thalin

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 :/

Vielleicht hilft dir da das Suckerfish-Dropdownmenu eher weiter?

Thalin · 06.10.07 21:42

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 :/

Maik · 06.10.07 22:35

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.

Thalin · 08.10.07 11:26

Achso, dann habe Ich das wohl ein wenig falsch verstanden.
Naja, Ich werde mich da dann mal durchwühlen und versuchen das auf mein Menu anzuwenden.
Danke für die Links

MfG

Thalin · 09.10.07 15:41

Also Ich habe mittlerweile es hinbekommen, das das Menu im IE funktioniert.
Jedenfalls als Drop Down. Und zwar habe Ich eine htc-Datei eingebunden.
Damit funktioniert es recht gut.
Allerdings hat die erste Zeile die gleiche Formatierung, wie die Unterpunkte der Liste.
Die erste Zeile hat jedoch diese Formatierung

Code :

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

maik sagte ja bereits, das der IE nicht die Kindselektoren unterstützt. Wie schreibe Ich es denn am besten um?

Und noch zu dem Schatten.
Ich habe die CodeZeile

Code :

1	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/schatten.png');

eingefügt. Allerdings bekomme Ich die Fehlermeldung, das "Filter" kein bekannter CSS-Eigenschaftsname ist. Somit wird der Schatten im IE nicht angezigt.

MfG

Maik · 09.10.07 16:13

Hi!

Zitat von Thalin

Die erste Zeile hat jedoch diese Formatierung

Code :

1	ul.menu > li > a { ... }

Wie schreibe Ich es denn am besten um?

Code :

1	ul.menu li a { ... }

Zitat von Thalin

Und noch zu dem Schatten.
Ich habe die CodeZeile

Code :

1	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/schatten.png');

eingefügt. Allerdings bekomme Ich die Fehlermeldung, das "Filter" kein bekannter CSS-Eigenschaftsname ist. Somit wird der Schatten im IE nicht angezigt.

filter entspricht keinem CSS-Webstandard und erzeugt daher die Fehlermeldung beim CSS-Validator.

Dennoch wird bei mir (in einem anderen Modell) die transparente PNG-Grafik im IE angezeigt.

Thalin · 09.10.07 16:38

Zitat von Maik

Code :

1	ul.menu li a { ... }

Ja, das hat geholfen. Ich musste allerdings noch

Code :

1	ul.menu li ul li a { ... }

definieren, um die Unterpunkte korrekt zu formatieren

Zitat von Maik

filter entspricht keinem CSS-Webstandard und erzeugt daher die Fehlermeldung beim CSS-Validator.

Dennoch wird bei mir (in einem anderen Modell) die transparente PNG-Grafik im IE angezeigt.

Bin Ich denn blöde?

Bei mir gehts net

Ich hab den Filter in der Klasse

Code :

1	ul.menu li ul {...}

stehen. Und für den FF hab Ich folgendes

Code :

1	ul.menu[class] li ul {background-image:url(schatten.png);}

Im FF wirds angezeigt, aber im IE leider nicht...

Maik · 09.10.07 16:40

Kannst du mal den Link zur Seite nennen?

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

Liste wird nur im Firefox richtig angezeigt

Seite wird nicht richtig angezeigt

UTF-8 wird nicht richtig angezeigt

Startseite wird im IE nicht richtig angezeigt

*.css wird nicht richtig angezeigt ....

E-Mail:

Abonnieren Abbestellen