Nad Flanders: Css Dropdown Problem im IE 7

SELF-Forum

Css Dropdown Problem im IE 7

Nad Flanders
– Informationen zu den Bewertungsregeln

Hallo,

wie bereits in der Überschrift angerissen, ahbe ich ein kleines Problem bei der Darstellung eines Dropdwon Menus im IE 7.
Im 6er läuft es, ebenso im FF und Safari. Hier mal der Code, dass Css für den Ie6 habe ich mal rausgelassen. Auch muss ich das Css noch nen Bissel aufräumen.

  
<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled Document</title>  
<style type="text/css">  
.menu {font-family: arial, sans-serif;height:30px; position:relative; font-size:11px; z-index:100;background-image: url(../images/menu-bg.jpg);  
text-align:center;padding-top:13px;background-repeat:no-repeat;}  
#menu_inner{width:880px;margin:0 auto 0 auto}  
.menu ul li a, .menu ul li a:visited, .toplink {display:block; text-decoration:none;height:20px; text-align:center;line-height:25px;  
color: #dd2100;font-size:15px;font-weight:bold;text-decoration:none;overflow:hidden;padding-left:8px;padding-right:7px;float:left}  
.sm1{width:60px}.sm2{width:86px}.sm3{width:67px}.sm4{width:65px;}.sm5{width:106px}#sm6{width:100px}.sm7{width:91px}  
.sm1,.sm2,.sm3,.sm4,.sm5,#sm6{border-right:2px solid #dd2100}  
.menu ul {padding:0; margin:0; list-style: none;}  
.uldd{border:1px solid silver;height:45px;width:100px;}  
.menu ul li {float:left; position:relative;}.menu ul li ul {display: none;line-height:15px}  
.menu ul li:hover a {color:#7c7c7c}  
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}  
.menu ul li:hover ul li a.hide {color:#fff;height:25px;line-height:25px}  
.menu ul li:hover ul li ul {display: block;}  
.menu ul li:hover ul li a {display:block;color:#7c7c7c;}  
.menu ul li:hover ul li a:hover {color:#dd2100;}  
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0px;}  
.menu ul li:hover ul li:hover ul.left {left:-105px;}  
</style>  
</head>  
<body>  
<div class="menu">  
<div id="menu_inner">  
<ul>  
<li class="sm1"><a class="toplink" href="../menu/index.html">HOME</a></li>  
<li class="sm1"><a class="toplink" href="../menu/index.html">SITES</a></li>  
<li class="sm1"><a class="toplink" href="../menu/index.html">NEWS</a></li>  
<li class="sm1"><a class="toplink" href="../menu/index.html">BLOG</a></li>  
<li class="sm2"><a class="toplink" href="../menu/index.html">EXPERTS</a></li>  
<li class="sm3"><a class="toplink" href="../menu/index.html">STORE</a></li>  
<li class="sm5"><a class="toplink" href="../menu/index.html">INTERVIEWS</a></li>  
<li class="sm2"><a class="toplink" href="../menu/index.html">REVIEWS</a></li>  
<li class="sm4"><a class="hide" href="#">MEDIA</a>  
<!--[if lte IE 6]>  
<a href="index.html">MEDIA  
<table><tr><td>  
<![endif]-->  
<ul class="uldd">  
<li style="width:100px"><a href="spies.html">VIDEOS</a></li>  
<li style="width:100px"><a href="vertical.html">PODCASTS</a></li>  
</ul>  
<!--[if lte IE 6]>  
</td></tr></table>  
</a>  
<![endif]-->  
</li>  
</ul>  
<a class="toplink" id="sm6" href="../menu/index.html">COMMUNITY</a>  
<a class="toplink" href="../menu/index.html">CONTACT</a>  
</div>  
</div>  
</body>  
</html>

Ich bin für jede Hilfe dankbar.

Lg,
Nad

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Css Dropdown Problem im IE 7

    JensL
    – Informationen zu den Bewertungsregeln

    Guten Morgen Nad,

    Ich bin für jede Hilfe dankbar.

    Ok, ich weiß jetzt zwar nicht, wie Dir geholfen werden kann, aber ich versuche einfach mal ins Blaue zu raten (kann Dir allerdings nicht garantieren, dass ich auch wirklich ins Schwarze treffe).

    Da Du Dein Problem nicht weiter beschrieben hast, beschreibe ich Dir einfach mal, was mir so auffällt, während ich mir Deinen Quellcode betrachte.

    Zunächst einmal muss ich vorausschicken, dass eine Validität schon einmal gegeben ist. D.h. am Quellcode selbst kann es eigentlich nicht liegen. Das lässt für mich eigentlich nur den Schluss zu, dass der IE7 irgend ein Problem hat. Da müssen sich allerdings andere Leute dran versuchen, da ich mich damit nicht wirklich auskenne.

    Die zweite Sache, die mir auffällt, wenn ich mir den Quellcode bei mir lokal anschaue, ist folgendes:
    Du scheinst diese Menüleiste anscheinend über eine verschachtelte <ul> zu definieren, die in einem <div> steht.
    Schau Dir doch einfach mal diese <http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm@title=dynamische Navigationsleiste> an (Vor allem der Quellcode, der dahinter steckt!). Die kann Dich vielleicht etwas weiter bringen. Das dazugehörige Kapitel aus der letzten Version findest Du übrigens http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=-- hier>!

    In diesem Sinne eine schöne Nacht
    LG
    Jens

    P.S.: Was ich noch ganz vergessen habe: Es ist immer besser, sein Problem so genau wie möglich zu beschreiben! Schließlich erwartet man ja Lösungshinweise! Und die kann es nur geben, wenn die Antwortenden auch wirklich wissen, was der Fragesteller meint!

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Css Dropdown Problem im IE 7

      Nad Flanders
      – Informationen zu den Bewertungsregeln

      P.S.: Was ich noch ganz vergessen habe: Es ist immer besser, sein Problem so genau wie möglich zu beschreiben! Schließlich erwartet man ja Lösungshinweise! Und die kann es nur geben, wenn die Antwortenden auch wirklich wissen, was der Fragesteller meint!

      Recht hast du, also:

      Ich fahre über den Lin "Media". Daraufhin klappt das Menu auf, Hurra, so war es auch geplant. So, den ersten Link im Menu, es müüste Vidoe sein, also auf jeden Fall den obersten kann ich noch "benutzen". Wenn ich jedoch den Mauzeiger auf den unteren Link fahre, dann verschindet die ul.....
      Ich vermute, dass irgendetwas mit line-height zu tun hat, bin mir aber auch nicht sicher. Ich habe auch zahlreiche Möglichkeiten ausprobiert, das problem zu lösen. Leider erfolglos. *Damned*

      Um das Porblem versuchsweise noch weiter einzugrenzen: Ich bin mir (recht) sicher, dass es an einer Maßangabe liegt, wie gesagt recht sicher. Sprich eine höhe oder ein padding....irgendwas ist falsch.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Css Dropdown Problem im IE 7

        Beat Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Ich fahre über den Lin "Media". Daraufhin klappt das Menu auf, Hurra, so war es auch geplant. So, den ersten Link im Menu, es müüste Vidoe sein, also auf jeden Fall den obersten kann ich noch "benutzen". Wenn ich jedoch den Mauzeiger auf den unteren Link fahre, dann verschindet die ul.....
        Ich vermute, dass irgendetwas mit line-height zu tun hat, bin mir aber auch nicht sicher. Ich habe auch zahlreiche Möglichkeiten ausprobiert, das problem zu lösen. Leider erfolglos. *Damned*
        Um das Porblem versuchsweise noch weiter einzugrenzen: Ich bin mir (recht) sicher, dass es an einer Maßangabe liegt, wie gesagt recht sicher. Sprich eine höhe oder ein padding....irgendwas ist falsch.

        Ich hatte bei meiner Site Probleme mit dem MSIE7 in der Navigation.
        (Siehe Link im head dieser Message.)
        Es war genau so, dass mitten in der ausgeklappten Subnav der hover verloren ging.
        Ich habe dann für den MSIE mit display:inline experimentiert, vor allem für das <li> und das darin enthaltene <a> Element (die ansonsten vom Typ Block sind). Dadurch hat sich das Problem gelöst.

        Ich habe allerdings keine Tests für MSIE6 gemacht. Der Browser ist mir heute egal.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Css Dropdown Problem im IE 7

          Nad Flanders
          – Informationen zu den Bewertungsregeln

          Hi Beat,

          das hat leider Nichts gebracht. Ich haben den <li> Elementen ein display: inline verpasst, ohne Erfolg. Testweise habe ich es auch mit den in <li> enthaltenen Links probiert. Leider auch ohne Erfolg.
          Der Link im Header deines Posts hat übrigens wie der Ar*** auf den Eimer gepasst, mit der Problematik befasse ich mich nämlich auch gerade.
          Gibt es noch ander Vorschläge zur Lösung meines Problems?

          Lg;
          Nad

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln