wolkenunddreck: Darstellung Firefox und Internet Explorer

Hi, wir haben hier folgendes Problem: Ein Menü wird mit Firefox korrekt dargestellt aber im IE nicht. Das Menü
sollte das Untermenü ausklappen, logisch, das tut es auch im I.E. aber die Ebenen legen sich übereinander.

Gegoogelt haben wir schon reichlich und in diesem Forum konnte ich das Problem nicht beschrieben finden.

Hier mal die .css:

Code:

.nav {
color:#ffffff;
float:left;
margin-left:70px;
text-align:right;
font-size:0.9em;
font-weight:bold;
}

.nav a {
display:block;
color:#ffffff;
text-decoration:none;
padding-right:5px;
}

.nav ul li {
line-height:2.5em;
list-style-type:none;
background: url(button_lo.gif) no-repeat;
width:160px;
height:30px;
border:0px;
}

.nav ul li a:hover {
color:#ffffff;
}

.nav ul li a:link {
color:#ffffff;
}

.nav ul li .current {
line-height:2.5em;
list-style-type:none;
color:#ffffff;
background: url(button_hi.gif) no-repeat;
width:160px;
height:30px;
border:0px;
}

/* ### Unternavigation ############################################################ */

.nav2nd a {
color:#ffffff;
text-decoration:none;
padding-right:5px;
}

.nav2nd ul li  {
line-height:2.5em;
list-style-type:none;
color:#ffffff;
background: url(button_lo.gif) no-repeat;
width:160px;
height:30px;
border:0px;
}

.nav2nd ul li a:hover  {
line-height:2.4em;
list-style-type:none;
color:#ffffff;
background: url(button_hi.gif) no-repeat;
width:160px;
height:30px;
border:0px;
}

.nav2nd ul li  a:link {
line-height:2.5m;
list-style-type:none;
color:#ffffff;
background: url(button_hi.gif) no-repeat;
width:160px;
height:30px;
border:0px;
}

.nav2nd ul li .current {
line-height:2.5em;
list-style-type:none;
color:#ffffff;
background: url(button_hi.gif) no-repeat;
width:160px;
height:30px;
border:0px;
}

und hier mal das html/ php Template (das Ganze wurde mit dem CMS :"Redaxo" realisiert.)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php print $REX['SERVERNAME'] . ' | ' . $this->getValue("name"); ?></title>
<meta name="keywords" content="<?php print $meta_suchbegriffe; ?>" />
<meta name="description" content="<?php print $meta_beschreibung; ?>" />
<meta name="Content-Language" content="de-DE" />
<meta name="Author" content="<?php echo $REX['SERVERNAME']; ?>" />
<meta name="Publisher" content="<?php echo $REX['SERVERNAME']; ?>" />
<meta name="Copyright" content="<?php echo $REX['SERVERNAME']; ?>" />
<meta name="Revisit" content="After 5 days" />
<meta name="Robots" content="INDEX,FOLLOW" />
<link rel="stylesheet" type="text/css" href="files/inhalt.css" />
<link rel="stylesheet" type="text/css" href="files/navigation.css" />
<link rel="stylesheet" type="text/css" href="files/formular.css" />
</head>
<body>
<div id="wrap">

<div id="header">
<div id="head_top">

</div>

</div>

<div id="top"> </div>

<div id="contentwrap">

<div class="nav">
<ul>

<?php
print $nav;
?>
</ul>
</div>

<div class="content">
<?php print $this->getArticle(1); ?>
</div>

<div style="clear:both"> </div>

</div>

</body>
</html>

Alles wäre jetzt schön fertig, aber an dieser Stelle kommen wir nicht weiter. Wir sind für jeden Hinweis dankbar.
Hier auch noch zwei Screenshoots, die das Problem veranschaulichen:

navigationie

und

navigationmoz

Falls dieser Text noch Fragen offen lässt, bitte ich um eine kurze Rückmeldung.

Vielen Dank! Mathias

  1. Hallo

    Bei deinem konkreten Problem kann ich dir leider nicht helfen, aber eine allgemeine Anmerkung hätte ich schon.

    Wie du selbst festgestellt hast, ist das Problem bei HTML und CSS, also beim Browser, zu verorten. Aber, was sollen wir dann mit deinem Template, in dem nun gerade der interessante Teil, nämlich die generierte Navigation, fehlt? Für ein clientseitiges Problem (typischerweise wäre da noch JavaScript zu nennen) brauchen wir auch den Code, den der Client bekommt. Client heißt hier: Browser, also brauchen wir den mit PHP generierten HTML-Code, so, wie ihn der Browser zur Verarbeitung bekommt.

    und hier mal das html/ php Template (das Ganze wurde mit dem CMS :"Redaxo" realisiert.)

    ...

    <div class="nav">
    <ul>

    <?php
    print $nav;
    ?>
    </ul>
    </div>
    ...

      
    
    > Falls dieser Text noch Fragen offen lässt, bitte ich um eine kurze Rückmeldung.  
      
    done ;-)  
      
    Tschö, Auge  
    
    -- 
    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
    Terry Pratchett, "Wachen! Wachen!"  
      
    [Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)
    
    1. Hi Auge,

      Du hast natürlich völlig Recht. Natürlich benötigt man auch den Quellcode
      zur Problemlösung:

      Hier ist der Code, so wie er ausgegeben wird:

      hat jemand eine Idee: Wie gesagt, es geht um die Darstellung unter I.E.

      Quellcode:

      <?xml version="1.0" encoding="utf-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Eisenhans-Hamburg | ÜBER UNS</title>
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <meta name="Content-Language" content="de-DE" />
      <meta name="Author" content="Eisenhans-Hamburg" />
      <meta name="Publisher" content="Eisenhans-Hamburg" />
      <meta name="Copyright" content="Eisenhans-Hamburg" />
      <meta name="Revisit" content="After 5 days" />
      <meta name="Robots" content="INDEX,FOLLOW" />
      <link rel="stylesheet" type="text/css" href="files/inhalt.css" />
      <link rel="stylesheet" type="text/css" href="files/navigation.css" />

      <link rel="stylesheet" type="text/css" href="files/formular.css" />
      </head>
      <body>
      <div id="wrap">

      <div id="header">
      <div id="head_top">

      </div>

      </div>

      <div id="contentwrap">

      <div class="nav">
      <ul>
      <li><ul class="current" href="index.php?article_id=2">ÜBER UNS</a>&nbsp;&nbsp;<ul class="nav2nd"><li><a href="index.php?article_id=7">Chronik</a></li><li><a href="index.php?article_id=8">Eisenhans</a></li></ul></li><li><a href="index.php?article_id=10">PRODUKTIONEN</a></li><li><a href="index.php?article_id=4">TERMINE</a></li><li><a href="index.php?article_id=6">MENSCHEN</a></li><li><a href="index.php?article_id=5">KONTAKT</a></li></ul>

      </div>

      <div class="content">
      <h1>ÜBER UNS</h1><div class="txt-img"> <p>Eisenhans zeigt, dass Menschen mit Behinderung nicht nur auf die Bühne gehören, sondern dort sehr erfolgreich sind und ein wachsendes Publikum begeistern. <br />
      <br />

      Eisenhans gibt jungen Menschen mit und ohne Behinderung die Möglichkeit ihrer großen Leidenschaft, dem Musik machen oder Theaterspielen nachzugehen. Das Besondere ist, dass auch Menschen mit schweren und mehrfachen Behinderungen gleichberechtigt bei der Rollenvergabe sind. Eine Möglichkeit, die es so sonst nicht gibt und einmalig in der Integrativen Theaterlandschaft Hamburgs ist.</p></div><div class="legende"><div class="floatLeft"><img src="./files/bitte_laecheln.jpg" title="" alt="" /></div> <p>Seit 2007 gibt es die Band Bitte lächeln! In der acht junge Musiker eigene witzige und teilweise schön schräge Rock- und Popsongs komponieren.</p></div><h2>Hintergrund und Geschichte</h2><div class="txt-img"> <p>Eisenhans wurde 1993 vom Thalia Treffpunkt des Thalia Theaters und Leben mit Behinderung Hamburg gegründet. Seit dem sind unter professioneller Anleitung von Theaterpädagogen und Regisseuren an die 40 Inszenierungen entstanden, die im Thalia in der Gaußstraße und bei Gastspielen in anderen Städten gezeigt wurden. Mittlerweile gehören drei Gruppen – zwei für junge Erwachsene im Alter von ca. 18 bis 35 Jahren und eine Gruppe für Kinder und Jugendliche im Alter von 12 bis 18 Jahren – und eine Band zum Projekt. Die Band Bitte lächeln! ist seit 2007 mit dabei.<br />
      <br />

      Ein Ziel der Arbeit des Projekts ist es, die Möglichkeiten von Menschen mit Behinderungen einem breiteren Publikum bekannt zu machen. Es hat sich zum Ziel gesetzt, integrative Theaterarbeit einem breiteren Publikum zugänglich zu machen. Die Zahl der Zuschauer wächst stetig.</p></div><h2>Finanzierung</h2><div class="txt-img"> <p>Eisenhans finanziert sich aus <a href="?article_id=21">Spenden</a>. Ein – ursprünglich von den Angehörigen gegründeter – Freundeskreis gewährleistet die kontinuierliche Fortführung der Arbeit. Zusätzlich wird pro Haushaltsjahr jeweils eine Gruppe von der Kulturbehörde Hamburg gefördert. Der Freundeskreis hat sich in den letzten Jahren vergrößert: neben den Angehörigen gehören rund 200 Freunde, Förderer und Interessierte mit dazu. </p></div></div>

      <div style="clear:both"> </div>

      </div>
      </div>
      </body>
      </html>

      1. Hi,

        <ul>
        <li><ul class="current" href="index.php?article_id=2">ÜBER UNS</a>&nbsp;&nbsp;<ul class="nav2nd">

        Bei so grob fehlerhaftem Quelltext kannst du kaum ein vorhersehbares Ergebnis erwarten.

        Validieren und Fehler beseitigen, danach weiter sehen.

        MfG ChrisB

        --
        Light travels faster than sound - that's why most people appear bright until you hear them speak.
      2. Hi,

        <ul>
        <li><ul class="current" href="index.php?article_id=2">ÜBER UNS</a>&nbsp;&nbsp;<ul class="nav2nd"><li><a href="index.php?article_id=7">Chronik</a></li><li><a href="index.php?article_id=8">Eisenhans</a></li></ul></li><li><a href="index.php?article_id=10">PRODUKTIONEN</a></li><li><a href="index.php?article_id=4">TERMINE</a></li><li><a href="index.php?article_id=6">MENSCHEN</a></li><li><a href="index.php?article_id=5">KONTAKT</a></li></ul>

        Du solltest beim Generieren der Navigation vielleicht ein paar Zeilenumbrüche (z.B. nach jedem </li>) einbauen. Dann siehst Du auch leichter, was für seltsames Zeug Du da generierst - HTML ist das jedenfalls (wie auch ChrisB schon schrieb) nicht.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind unverschämt, werden ignoriert. Das Forum existiert.
      3. @@wolkenunddreck:

        nuqneH

        <?xml version="1.0" encoding="utf-8"?>

        IE 6 im Quirksmodus? [Jendryschik] Weg mit der unnötigen XML-Deklaration!

        <meta name="keywords" content="" />
        <meta name="description" content="" />

        Was soll das?

        <meta name="Content-Language" content="de-DE" />

        "de-DE"? Willst du Österreicher und Schweizer aus deiner Leserschaft ausschließen?

        Und nicht nur die Sprache des Zielpublikums angeben, sondern auch die des Textes [I18N-HTML-TECH-LANG §3]:

        <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

        [I18N-HTML-TECH-LANG §5, LANGUAGE-DECL]

        <link rel="stylesheet" type="text/css" href="files/inhalt.css" />
        <link rel="stylesheet" type="text/css" href="files/navigation.css" />
        <link rel="stylesheet" type="text/css" href="files/formular.css" />

        Warum 3 Stylesheets? Fasse sie zusammen! „Verlinken Sie nur ein Stylesheet aus dem HTML“ [Meiert]

        <li><ul class="current" href="index.php?article_id=2">ÜBER UNS</a>&nbsp;&nbsp;<ul class="nav2nd">

        Zu dem kaputten Markup wurde schon was gesagt.

        '&nbsp;' ist nicht dafür da, Abstände zu erzeugen. Das tut man mit CSS.

        Es ist nicht sinnvoll, im Markup in Versalien zu schreiben (es sei denn, man ist der Tod). Stattdessen "Über uns" schreiben und die Versalschrift mit CSS erzeugen. [CSS2 §16.5] So muss bei späteren Änderungen (keine Versalien mehr gewünscht) nur das Stylesheet geändert werden, nicht aber das Markup.

        <h1>ÜBER UNS</h1>

        Dito.

        <p>Eisenhans zeigt, dass Menschen mit Behinderung nicht nur auf die Bühne gehören, sondern dort sehr erfolgreich sind und ein wachsendes Publikum begeistern. <br />
        <br />

        Eisenhans gibt jungen Menschen mit und ohne Behinderung die Möglichkeit ihrer großen Leidenschaft, dem Musik machen oder Theaterspielen nachzugehen. Das Besondere ist, dass auch Menschen mit schweren und mehrfachen Behinderungen gleichberechtigt bei der Rollenvergabe sind. Eine Möglichkeit, die es so sonst nicht gibt und einmalig in der Integrativen Theaterlandschaft Hamburgs ist.</p>

        '<br />' ist nicht dafür da, Abstände zu erzeugen. Das Markup sollte so aussehen:

        <p>Eisenhans zeigt, dass Menschen mit Behinderung nicht nur auf die Bühne gehören, sondern dort sehr erfolgreich sind und ein wachsendes Publikum begeistern.</p>  
        <p>Eisenhans gibt jungen Menschen mit und ohne Behinderung die Möglichkeit ihrer großen Leidenschaft, dem Musik machen oder Theaterspielen nachzugehen. Das Besondere ist, dass auch Menschen mit schweren und mehrfachen Behinderungen gleichberechtigt bei der Rollenvergabe sind. Eine Möglichkeit, die es so sonst nicht gibt und einmalig in der Integrativen Theaterlandschaft Hamburgs ist.</p>
        

        <div style="clear:both"> </div>

        Was soll das? Was hat ein sinnbefreites 'div' im Markup verloren? Weg damit!

        Qapla'

        --
        Bildung lässt sich nicht downloaden. (Günther Jauch)