jaderbass: Transparenz und Ausklappmenü bei IE6 fehlerhaft

SELF-Forum

Transparenz und Ausklappmenü bei IE6 fehlerhaft

jaderbass
– Informationen zu den Bewertungsregeln

Hallo alle miteinander,

mein Problem ist folgendes: Ich habe ein Menü inkl. Untermenü erstellt, welches beim Überfahren mit der Maus aufklappt. Soweit sogut. Ich möchte nun, dass die Ausklappbaren Menüs transparent erscheinen. Da ich für Mozilla-basierende Browser und dem IE verschiedene CSS-angaben benötige, habe ich dafür 2 unterschiedliche Methoden für IE und den Rest benutzt.

Mein Problem dabei: FFF 3 stellt die Transparenz korrekt dar. Sobald ich aber den Alpha-Filter für den IE setze klappt mein 2. Untermenü nicht mehr auf. Kann mir hier jemand raten?

Hier der Code:
HTML-Seite:

  
...  
<link rel="stylesheet" media="all" type="text/css" href="styles/dropdown.css" />  
<!--[if lte IE 6]>  
<link rel="stylesheet" media="all" type="text/css" href="styles/dropdown_ie.css" />  
<![endif]-->  
...  
<li><a class="hide" href="#">HAUPTMENÜ</a>  
  
<!--[if lte IE 6]>  
<a href="#">HAUPTMENÜ  
<table><tr><td>  
<![endif]-->  
  
        <ul class="transp">  
        <li><a href="#" title="Titel">Untermenü 1-1</a></li>  
        <li><a href="#" title="Titel">Untermenü 1-2</a></li>  
        <li><a href="#" title="Titel">Untermenü 1-3</a></li>  
  
        <li><a class="hide" href="#" title="Titel">Untermenü 1-4 &gt;</a>  
  
    <!--[if lte IE 6]>  
    <a class="sub" href="#" title="Titel">Untermenü 1-4 &gt;  
    <table><tr><td>  
    <![endif]-->  
  
                <ul>  
                        <li><a href="#" title="Titel">Untermenü 2-1</a></li>  
                        <li><a href="#" title="Titel">Untermenü 2-2</a></li>  
                        <li><a href="#" title="Titel">Untermenü 2-3</a></li>  
                        <li><a href="#" title="Titel">Untermenü 2-4</a></li>  
                </ul>  
  
        <!--[if lte IE 6]>  
        </td></tr></table>  
    </a>  
    <![endif]-->  
  
        </li>  
        <li><a href="#" title="Titel">Untermenü 1-5</a></li>  
        </ul>  
  
<!--[if lte IE 6]>  
</td></tr></table>  
</a>  
<![endif]-->  
  
</li>  
...

--------------------------------------------------------------

Hier der CSS Code allgemein:

  
/* Navigationsleiste Hauptmenü */  
.nav {  
  font-family:  Verdana, Arial, Helvetica, sans-serif;  
  font-weight:bold;  
  font-size: 8pt;  
  border-top: 1px solid #999;  
  border-right: 1px solid #999;  
  background: #C04000;  
  position: absolute;  
  top: 10px;  
  left: 210px;  
  z-index:100;  
}  
.nav a {  
  font-weight:bold;  
  font-size: 8pt;  
}  
.sub {  
  zoom:1;  
}  
.transp {  
  opacity: .8;  
}  
.nav ul li a, .nav ul li a:visited {  
  display:block;  
  text-decoration:none;  
  width:144px;  
  height:22px;  
  text-align:center;  
  color: #333;  
  padding-top: 8px;  
}  
.nav ul {  
  padding:0;  
  margin:0;  
  list-style: none;  
}  
.nav ul li {  
  float:left;  
  position:relative;  
}  
  
/* Submenü ausgeblendet */  
.nav ul li ul {  
  display: none;  
}  
  
/* specific to non IE browsers */  
/* Hauptmenü Mousover */  
.nav ul li:hover a {  
  color:#fff;  
  background:#cc6b3f;  
}  
/* Submenü 1 ausgeklappt */  
.nav ul li:hover ul {  
  display:block;  
  position:absolute;  
  top:30px;  
  left:0;  
  width:120px;  
}  
  
/* Submenü 1 Eintrag mit Submenü */  
.nav ul li:hover ul li a.hide {  
  background:#cc6b3f;  
  color:#000;  
}  
.nav ul li:hover ul li:hover a.hide {  
  background:#C04000;  
  color:#000;  
}  
  
/* Submenü 2 */  
.nav ul li:hover ul li ul {  
  display: none;  
}  
.nav ul li:hover ul li a {  
  display:block;  
  background:#cc6b3f;  
  color:#000;  
}  
.nav ul li:hover ul li a:hover {  
  background:#C04000;  
  color:#000;  
}  
  
/* Position Submenü */  
.nav ul li:hover ul li:hover ul {  
  display:block;  
  position:absolute;  
  left:144px;  
  top:0;  
}  
.nav ul li:hover ul li:hover ul.left {  
  left:-105px;  
}

--------------------------------------------------------

und hier der CSS-Code speziell für den IE:

  
.nav ul li a:hover ul li a ul {  
  visibility:hidden;  
}  
.nav ul li a:hover ul li a {  
  background:#cc6b3f;  
  color:#000;  
}  
.nav ul li a:hover ul li a:hover {  
  background:#C04000;  
  color:#000;  
}  
  
/* Position Submenü */  
.nav ul li a:hover ul li a:hover ul {  
  visibility:visible;  
  position:absolute;  
  left:144px;  
  top:0;  
  color:#000;  
  filter: alpha(opacity=80);  
}  
.nav ul li a:hover ul li a:hover ul.left {  
  left:-105px;  
}

-----------------------------------------------------
Gruß
Jörg

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Transparenz und Ausklappmenü bei IE6 fehlerhaft

    jaderbass
    – Informationen zu den Bewertungsregeln

    Sorry, habe beim HTML-Code noch etwas vergessen. Hier der komplette Code:

      
...  
<link rel="stylesheet" media="all" type="text/css" href="styles/dropdown.css" />  
<!--[if lte IE 6]>  
<link rel="stylesheet" media="all" type="text/css" href="styles/dropdown_ie.css" />  
<![endif]-->  
...  
<div class="nav">  
  
<ul>  
...  
<li><a class="hide" href="#">HAUPTMENÜ</a>  
  
<!--[if lte IE 6]>  
<a href="#">HAUPTMENÜ  
<table><tr><td>  
<![endif]-->  
  
        <ul class="transp">  
        <li><a href="#" title="Titel">Untermenü 1-1</a></li>  
        <li><a href="#" title="Titel">Untermenü 1-2</a></li>  
        <li><a href="#" title="Titel">Untermenü 1-3</a></li>  
  
        <li><a class="hide" href="#" title="Titel">Untermenü 1-4 &gt;</a>  
  
    <!--[if lte IE 6]>  
    <a class="sub" href="#" title="Titel">Untermenü 1-4 &gt;  
    <table><tr><td>  
    <![endif]-->  
  
                <ul>  
                        <li><a href="#" title="Titel">Untermenü 2-1</a></li>  
                        <li><a href="#" title="Titel">Untermenü 2-2</a></li>  
                        <li><a href="#" title="Titel">Untermenü 2-3</a></li>  
                        <li><a href="#" title="Titel">Untermenü 2-4</a></li>  
                </ul>  
  
        <!--[if lte IE 6]>  
        </td></tr></table>  
    </a>  
    <![endif]-->  
  
        </li>  
        <li><a href="#" title="Titel">Untermenü 1-5</a></li>  
        </ul>  
  
<!--[if lte IE 6]>  
</td></tr></table>  
</a>  
<![endif]-->  
  
</li>  
...  
</ul>  
  
</div>  
...
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Transparenz und Ausklappmenü bei IE6 fehlerhaft

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber jaderbass,

    mir ist klar, dass der IE :hover nur bei <a>-Elementen korrekt unterstützt. Aber dafür extra eine <table> in ein solches hineinverfrachten...???

    Mein Vorschlag: Probiere einmal eine syntaktisch korrekte (sprich: valide) Version Deiner Navi und gestalte sie mit CSS auf herkömmliche Art. Anschließend kannst Du mittels JavaScript das fehlende :hover nachrüsten. Wenn Dir der Code in SELFHTML dazu nicht passt, dann gibt es noch whateverhover.htc...

    So, und erst dann schauen wir uns die Sache mit dem Alpha-Filter wieder an. OK?

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Transparenz und Ausklappmenü bei IE6 fehlerhaft

      jaderbass
      – Informationen zu den Bewertungsregeln

      Lieber Felix,

      danke für die schnelle Antwort. Bei der ganzen Code-Schreiberei ins Forum ist mir doch aufgefallen, dass ich in meiner Datei einen Fehler hatte und das Ding doch im IE funktioniert. (Auch dafür ist ein Forum gut ;-))

      Ich werde aber deinen Vorschlag beherzigen und mein Menü noch einmal überarbeiten. Auch der Link zu whateverhover war hilfreich.

      Gruß
      Jörg

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Transparenz und Ausklappmenü bei IE6 fehlerhaft

      suit Homepage des Autors
      – Informationen zu den Bewertungsregeln

      mir ist klar, dass der IE :hover nur bei <a>-Elementen korrekt unterstützt. Aber dafür extra eine <table> in ein solches hineinverfrachten...???

      pass auf, dass das gunnar nicht liest :)

      im übrigen: ich bin deiner meinung -> javascript zum nachrüsten dieses features ist imho ok - obwohl diese conditional-comment-geschichte nicht invalide ist, ist es "gefühlt" nicht richtig

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Transparenz und Ausklappmenü bei IE6 fehlerhaft

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Lieber suit,

        pass auf, dass das gunnar nicht liest :)

        warum?

        obwohl diese conditional-comment-geschichte nicht invalide ist, ist es "gefühlt" nicht richtig

        Moment mal! <a><table>...</table></a> ist nicht valide! Ob das per CC oder auf anderem Wege so erreicht wird ist dabei doch schnurz!

        Oder irre ich mich etwa?

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Transparenz und Ausklappmenü bei IE6 fehlerhaft

          EKKi
          – Informationen zu den Bewertungsregeln

          Mahlzeit Felix Riesterer,

          obwohl diese conditional-comment-geschichte nicht invalide ist, ist es "gefühlt" nicht richtig

          Moment mal! <a><table>...</table></a> ist nicht valide! Ob das per CC oder auf anderem Wege so erreicht wird ist dabei doch schnurz!

          Naja ... da Dank der Conditional Comments nur der IE diesen invaliden Code zu sehen bekommt und dieses Browserimitat ja auch invaliden Code "irgendwie" darstellt, spielt das doch keine große Rolle, oder? ;-)

          MfG,
          EKKi

          --
          sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln