CSS und IE 7

Status
Nicht offen für weitere Antworten.
Ich hab hier zwar nicht den IE7 zur Verfügung, aber hast du es schon mal mit einer höheren Schichtpositionierung z-index für das Menü probiert?

Code: 
.menu {
font-family: arial, sans-serif; 
width:810px; 
position:relative; 
font-size:10px;
padding: 0px 0px 0px 0px;
z-index: 3;
}
bzw.

Code: 
.menu ul {
padding: 0px; 
margin: 0px;
list-style-type: none;
position: relative;
z-index: 3;
}
 
Okay, muß ich das direkt in die css machen oder würde auch folgende Lösung gehen:

PHP: 
<layer name="erster" left="0" top="0" z-index="1">.navigation.</layer>
<layer name="zweiter" left="0" top="0" z-index="2">.iframe.</layer>
 
Das layer-Element kommt aus dem Hause Netscape und war für die 4er-Version des Netscape-Browsers gedacht. Mit anderen Worten: das Element ist veraltet und wird von allen anderen Browsern nicht unterstützt, auch nicht von den aktuelleren Netscape-Versionen.

Siehe hierzu auch SELFHTML: HTML / Layer (Netscape).

Verwende stattdessen das div-Element.

Wie du die Schichtpositionierung vornehmen kannst, habe ich dir ja schon heute Mittag gezeigt.

Zudem muß die Ebene, die in der Schichtposition ganz oben (vorne) liegen soll, den höheren z-index-Wert erhalten.
 
Okay, das habe ich verstanden, jetzt nochmal ne andere Frage zu dem Thema, wie muß man dem IE 7 bebringen, was er mit den Drop-Down-Navis zu tun hat?

in http://www.renafan.de und http://www.gzg-teltow.de sind zwei css-Navigationen verbaut, welche nicht aufklappen unter IE 7.

Der Quellcode der einen schaut so aus:

PHP: 
<div class="menu" align="center">
  <ul>
    <li><a class="drop" href="unternehmen.html" target="screen">Über uns
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table>
        <tr>
          <td> <ul>
              <li><a href="unternehmen.html" target="screen" title="Unternehmen">Unternehmen</a></li>
              <li><a href="geschichte.html" target="screen" title="Geschichte">Geschichte</a></li>
              <li><a href="dienstleistung.html" target="screen" title="Dienstleistung">Dienstleistung</a></li>
              <li><a class="hide" href="wohnformen.html" target="screen" title="Wohnformen">Wohnformen
                &gt;
                <!--[if IE 7]><!-->
                </a>
                <!--<![endif]-->
                <table>
                  <tr>
                    <td> <ul>
                        <li><a href="wf_tegel" title="Wohnanlage Tegel" target="screen">Wohnanlage
                          Tegel</a></li>
                        <li><a href="wf_rudow.html" title="Wohnanlage Rudow" target="screen">Wohnanlage
                          Rudow</a></li>
                        <li><a href="wg_intensiv.html" title="Wohngemeinschaft Intensiv" target="screen">Wohngemeinschaft
                          Intensiv</a></li>
                           <li><a href="intensiv_wittenau.html" title="Beatmungsentwöhnung Wittenau" target="screen">Beatmungs- entwöhnung Wittenau</a></li>
                      </ul></td>
                  </tr>
                </table>
                <!--[if lte IE 7]>
</a>
<![endif]-->
              </li>
              <li><a href="standorte_allgemein.html" target="screen" title="Standort">Standort</a></li>
              <li><a href="geschaeftspartner.html" target="screen" title="Gesch&auml;ftspartner">Gesch&auml;ftspartner</a></li>
              <li><a href="jobs.html" target="screen" title="Jobs">Jobs</a></li>
              <li><a href="news.html" target="screen" title="News">News</a></li>
            </ul></td>
        </tr>
      </table>
      <!--[if lte IE 7]>
</a>
<![endif]-->
    </li>
    <li><a href="ambulante_pflege_inhalt.html" target="screen">Ambulante Pflege
      <!--[if IE 7]>-->
      </a>
      <!--<![endif]-->
      <table>
        <tr>
          <td> <ul>
              <li><a href="ambulante_pflege_inhalt.html" target="screen" title="Inhalt">Inhalt</a></li>
              <li><a href="ambulante_pflege_service.html" target="screen" title="Leistungen">Leistungen</a></li>
              <li><a href="ambulante_pflege_zusammenarbeit.html" target="screen" title="Zusammenarbeit">Zusammenarbeit</a></li>
              <li><a href="ambulante_pflege_kosten.html" target="screen" title="Kosten">Kosten</a></li>
              <li><a href="ambulante_pflege_grundlagen.html" target="screen" title="Gesetzliches">Gesetzliches</a></li>
              <li><a href="ambulante_pflege_standorte.html" target="screen" title="Standort">Standort</a></li>
              <li><a href="tarifkalkulator.php" target="screen" title="Tarifkalkulator">Tarifkalkulator</a></li>
            </ul></td>
        </tr>
      </table>
      <!--[if lte IE 7]>
</a>
<![endif]-->
    </li>
    <li><a href="intensiv_inhalt.html" target="screen">Intensiv Pflege
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table>
        <tr>
          <td> <ul>
              <li><a href="intensiv_inhalt.html" target="screen" title="Inhalt">Inhalt</a></li>
              <li><a href="intensiv_service.html" target="screen" title="Leistungen">Leistungen</a></li>
              <li><a href="intensiv_zusammenarbeit.html" target="screen" title="Zusammenarbeit">Zusammenarbeit</a></li>
              <li><a href="intensiv_kosten.html" target="screen" title="Kosten">Kosten</a></li>
              <li><a href="intensiv_grundlagen.html" target="screen" title="Gesetzliches">Gesetzliches</a></li>
              <li><a href="intensiv_standorte.html" target="screen" title="Standort">Standort</a></li>
              <li><a href="intensiv_bundesweit.html" target="screen" title="Bundesweit">Bundesweit</a></li>
            </ul></td>
        </tr>
      </table>
      <!--[if lte IE 7]>
</a>
<![endif]-->
    </li>
    <li><a href="bildung.html" target="screen">Bildung
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table>
        <tr>
          <td> <ul>
              <li><a href="bildung.html" target="screen" title="Inhalt">Inhalt</a></li>
              <li><a class="hide" href="fortbildungsreihe.html" target="screen" title="Fortbildungen">Fortbildungen
                &gt;
                <!--[if IE 7]><!-->
                </a>
                <!--<![endif]-->
                <table>
                  <tr>
                    <td> <ul class="right">
                        <li><a href="fortbildungsreihe.html" target="screen" title="Fortbildungsreihe">Fortbildungsreihe</a></li>
                        <li><a href="fortbildungen_intensiv.html" target="screen" title="Bereich Intensiv">Bereich
                          Intensiv</a></li>
                        <li><a href="erste_hilfe.html" target="screen" title="Erste Hilfe Kurse">1.
                          Hilfe Kurse</a></li>
                      </ul></td>
                  </tr>
                </table>
                <!--[if lte IE 7]>
</a>
<![endif]-->
              </li>
              <li><a href="bildung_standort.html" target="screen" title="Standort">Standort</a></li>
            </ul></td>
        </tr>
      </table>
      <!--[if lte IE 7]>
</a>
<![endif]-->
    </li>
    <li><a href="akademie_inhalt.html" target="screen">Akademie
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table>
        <tr>
          <td> <ul>
              <li><a href="akademie_inhalt.html" target="screen" title="Inhalt">Inhalt</a></li>
              <li><a href="akademie_programm.html" target="screen" title="Programm">Programm</a></li>
              <li><a href="akademie_fachfortbildung.html" target="screen" title="Fachfortbildung">Fachfortbildung</a></li>
              <li><a href="akademie_standort.html" target="screen" title="Standort">Standort</a></li>
            </ul></td>
        </tr>
      </table>
      <!--[if lte IE 7]>
</a>
<![endif]-->
    </li>
    <li><a href="qualitaetsmanagement.html" target="screen">Qualität
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table>
        <tr>
          <td> <ul>
              <li><a href="qualitaetsmanagement.html" target="screen" title="Grundlagen">Grundlagen</a></li>
              <li><a href="qualitaet_bei_renafan.html" target="screen" title="Qualität bei RENAFAN">Qualität
                bei RENAFAN</a></li>
            </ul></td>
        </tr>
      </table>
      <!--[if lte IE 7]>
</a>
<![endif]-->
    </li>
    <li><a href="presse_extern.html" target="screen">Presse
      <!--[if IE 7]><!-->
      </a>
      <!--<![endif]-->
      <table>
        <tr>
          <td> <ul>
              <li><a href="presse_extern.html" target="screen" title="Externe Presse">Externe
                Presse</a></li>
              <li><a href="presse_intern.html" target="screen" title="Interne Presse">Interne
                Presse</a></li>
              <li><a href="pressemitteilungen" target="screen" title="Pressemiteilung">Pressemiteilung</a></li>
            </ul></td>
        </tr>
      </table>
      <!--[if lte IE 7]>
</a>
<![endif]-->
    </li>
  </ul>
</div>

die CSS-Datei schaut so aus:

Code: 
 /* common styling */
.menu {
font-family: arial, sans-serif; 
width:810px; 
position:relative; 
font-size:10px;
padding: 0px 0px 0px 0px;
}

.menu ul {
padding: 0px; 
margin: 0px;
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
margin-left: 0px;
}

.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#fff; 
width:104px; 
height:22px; 
color:#fff; 
border:1px solid #fff; 
border-width:1px 1px 1px 1px; 
background:#D40128;  
padding: 0px 0px -1px 0px;
line-height:21px;
}

* html .menu ul li a, .menu ul li a:visited {
width:102px;
w\idth:105px;
}

.menu ul li ul {
display: none; 
}

table {
margin: -2px -2px -2px -1px; 
border-collapse: collapse;
font-size:10px;
}

/* specific to non IE browsers */
.menu ul li:hover a,
.menu ul li a:hover {
color:#fff; 
background:#A7001F;
padding: 0px 0px 0px 0px;
}

.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:21px;
margin-top:0px;
left: 0px; 
width:104px;
}
* html .menu ul li a:hover ul {
margin-top:0px;
marg\in-top:0px;
}

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden; 
position:absolute; 
height:0; 
width:0;
}

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; 
background:#D40128; 
color:#fff; 
height:auto; 
line-height:12px; 
padding:3px 0px 4px 0px;
width:104px;
text-align: center;
}

* html .menu ul li a:hover ul li a {
width:105px;
wi\dth:104px;
}

.menu ul li:hover ul li a.drop,
.menu ul li a:hover ul li a.drop {
background:#A7001F;
}

.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#A7001F; 
color:#fff;
}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible; 
position:absolute; 
left:105px; 
top:0px;
width:104px;
}

.menu ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul.left {
left: 2px;
}

Gibt es hier einen Fehler?
 
Wie gestern schon erwähnt, habe ich nicht den IE7 zur Verfügung, um das Stylesheet der Navigation darin zu überprüfen. Ich arbeite nämlich unter Win2k, und der IE7 ist erst ab WinXp verfügbar.

Dem Quellcode zu Folge vermute ich mal sehr stark, daß das CSS-Menü von Stu Nicholls stammt. Funktioniert denn die Original-Version im IE7?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück