• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Menü

Status
Für weitere Antworten geschlossen.

meista07

Neues Mitglied
Hi,

ich hab folgendes Problem:
Mein Menü funktioniert im FF wunderbar und im IE zwar auch allerdings ist alles ziemlich verschoben.
Ist übrigens ein Menü, welches die Menüpunkte aus einer Datenbank liest.
Hier mal dei Quelltexte:
PHP:
$sql = "SELECT id,name FROM struktur WHERE (aktiv='1' AND drpdw='0') ORDER BY reih ASC";
  $result = mysql_query($sql) OR die(mysql_error());
  $sql_1 = "SELECT id FROM struktur WHERE (aktiv='1' AND drpdw='0')";
  $result_1 = mysql_query($sql_1) OR die(mysql_error());
  $i = 1;
  while($row_1 = mysql_fetch_assoc($result_1)){
  $i = $i + 1;
  }
  echo '<center><div id="menu">';
  echo '<ul><li>';
  echo "<a href=index.php?section=1>Home</a>";
  echo "</li></ul>";
  if($i > 0){
    while($row = mysql_fetch_assoc($result)){
      $sql_5_1 = "SELECT id,name FROM struktur WHERE (aktiv='1' AND drpdw='".$row['id']."') ORDER BY drpdw ASC";
      $result_5_1 = mysql_query($sql_5_1) OR die(mysql_error());
      $sql_5_2 = "SELECT id FROM struktur WHERE (aktiv='1' AND drpdw='".$row['id']."')";
      $result_5_2 = mysql_query($sql_5_2) OR die(mysql_error());
      $i5 = 0;
      while($row_5_2 = mysql_fetch_assoc($result_5_2)){
        $i5 = $i5 + 1;
      }
      echo "<ul><li>";
      echo "<a href=index.php?section=".$row['id'].">".$row['name']."</a>";
      if($i5 > 0){
        echo "<ul>";
        while($row_5_1 = mysql_fetch_assoc($result_5_1)){
          echo '<li><a href="index.php?section='.$row_5_1['id'].'">';
          echo $row_5_1['name']."</a></li>";
        }
        echo "</ul>";
      }
      echo "</li></ul>";
    }
    echo "</div></center>";
  }

HTML:
<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!]]></script>

Code:
#menu { 
  width: 100%; 
  background: #D3E8FE;
  float: left; 
}

#menu a, #menu h2 { 
  font: bold 11px/16px arial, helvetica, sans-serif;
  display: block; 
  border-width: 1px; 
  border-style: solid;
  border-color: #0072BC;
  margin: 0; 
  padding: 2px 3px;
}

#menu h2 { 
  color: #FF8635; 
  background: #D3E8FE; 
  text-transform: uppercase;
}

#menu a { 
  color: #000; 
  background: #D3E8FE; 
  text-decoration: none; 
}

#menu a:hover { 
  color: #FFFFFF; 
  background: #0072BC; 
}

#menu li {
  position: relative;
}

#menu ul ul { 
  position: absolute; 
  z-index: 500;
  width: 100%;
}

#menu ul ul ul { 
  position: absolute; 
  top: 0; 
  left: 100%; 
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
  {display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
  {display: block;}

Bitte helft mir, ich find den Fehler nicht.
Vielen Dank
Gruß
meista07
 
Interessant wäre die HTML-Ausgabe nach dem parsen. Poste den Code mal hier. Ich denke es hängt mit der unterschiedlichen Darstellung von Listen im IE und FF zusammen.
 
So sieht das dann aus:
Body:
HTML:
<tr>
  <td>
        <center><div id="menu">
<ul><li><a href=index.php?section=1>....</a></li></ul>

<ul><li><a href=index.php?section=2>bla</a>

<ul><li><a href="index.php?section=5">bla1</a></li>

<li><a href="index.php?section=6">bla2</a></li></ul></li></ul>

<ul><li><a href=index.php?section=3>Kontakt</a></li></ul></td>
</tr>
Head:
HTML:
          <style type="text/css" media="screen">
              #menu ul li {float: left; width: 100%;}
          </style>
      <![endif]-->

      <!--[if lt IE 7]>
          <style type="text/css" media="screen">
              body {behavior: url(csshover.htc); font-size: 100%;}
              #menu ul li a {height: 1%;}
          </style>
      <![endif]--><style type="text/css">
          #menu ul {  
              list-style: none; 
              margin: 0; 
              padding: 0;
              float: left;
              width: 25%; 
 
      }
      </style>
 
Also ich hab mal an den Anfang deines CSS folgendes gesetzt:

Code:
*{
margin:0;
padding:0;
}
UL{
list-style-type:none;
}
So sieht es im IE7 und FF zwar anders als vorher, aber beide male gleich aus. ich habe es mir zur Regel gemacht, im CSS immer am Anfang margin und padding für alle Elemente auf null zu setzen. Damit geht man oftmals unterschiedlichen Darstellungen aus dem Weg. danach kann man nach belieben positionieren und den Innen- oder Aussenabstand anpassen.
 
Muss ich diesen Punkt in der CSS durch irgendeinen bestimmten Befehl noch laden oder wird dieser automatisch geladen?
Gruß
meista07
 
Muss ich diesen Punkt in der CSS durch irgendeinen bestimmten Befehl noch laden oder wird dieser automatisch geladen?
Gruß
meista07

Wenn die CSS-Datei in der HTML-Datei verlinkt ist wird sie automatisch geladen, da musst du nichts mehr machen. Gilt für alles, was in der CSS-Datei drinnen steht.
 
Hallo,
Vielen Dank für deine Antwort...
leider bringt das nix. Hab dein Teil eingesetzt...und die menüpunkte werden weiterhin im IE verschoben :cry:
Bitte helft mir nochmal !!!
Gruß
Meista07
 
Das liegt wahrscheinlich daran, dass der IE auch in Version 7 immer noch große Probleme mit der richtigen Darstellung einiger Sachen hat, das einzige was da dann hilft ist es, ein extra Stylesheet für den IE zu machen...
 
mmh das ist ja kein thema...nur wie erkenne ich sinnvoll ob ich es mit einem Browser zu tun hab der das css nun erkennt oder nicht?
Gruß
meista07
 
Mit Conditional Comments. Beispiel:

Code:
<!--[if IE 7]>
 <link type="text/css" href="styles.css" rel="stylesheet" media="all" />
 <![endif]-->
Das sagt, dass einzig der IE7 das was zwischen dem CC steht nutzen soll.

Wenn man bei seiner Webseite allerdings so weit ist, dass man bereits darauf zurückgreifen muss macht man am HTML- und/oder CSS-Code etwas falsch. Gerade der IE7 kann besser mit modernen Codes wie der Firefox umgehen. Gibt da nur wenige Ausnahmen.
 
Mmh threadi,
da ich nun an diesem Punkt angelangt bin, vielleicht könntest du mir nun sagen was ich da falsch gemacht hab?
Außerdem muss ich ja nicht nur zwischen dem IE7 und dem FF unterscheiden sondern zwischen allen IEs und den FFs da das Script in keinem IE funktioniert.
Gruß
meista07
 
Das Ding ist leider, wenn ich hier nen Link poste find ich den blöderweise demnächst bei google....will ich nun leider nicht...
Gruß
meista07
 
OK also hier ist das Beispiel....
Code:
http://radio-schultze.de/index.php

Ich arbeite grad mal
A List Apart: Articles: Suckerfish Dropdowns
ein. Ich schau erstmal weiter..vielleicht gehts ja auch so...
Erstmal vielen Dank
Gruß
meista07

soooo hab nun das suckerfish Menü installiert...wollte nun den Dropdown text centrieren...nur im IE funzt das mal wieder nicht!!! So ein misst....
Wisst ihr warum?
Gruß
meista07
 
Zuletzt bearbeitet von einem Moderator:
Deine letzten drei Beiträge habe ich zu einem zusammengefasst. Bitte keine Doppel- und Dreifach-posts machen, sondern beim nächsten mal die Edit-Funktion nutzen.

Danke.
 
Ich denke dir wird wohl keine andere als die genannte methode bleiben, also für jeden browser eine eigene css-datei. viel schreibarbeit, aber wenn du eine wirklich gute homepage basteln willst, wohl von nöten:-o
 
Ich denke dir wird wohl keine andere als die genannte methode bleiben, also für jeden browser eine eigene css-datei. viel schreibarbeit, aber wenn du eine wirklich gute homepage basteln willst, wohl von nöten:-o

Du kannst es so machen:
Du machst dir deine Homepage so, wie du sie dir vorgestellt hast, Opera, Firefox und Co. sollten wahrscheinlich auch keine Probleme mit der Darstellung haben. Dieses Stylesheet verlinkst du ganz normal, wie halt immer.
Wenn du damit fertig bist machst du dir die Seite praktisch nochmal, nur etwas einfacher, damit der Internet Explorer sie richtig darstellen kann. Dieses zusätzliche Stylesheet verlinkst du dann mit folgendem Code (muss auch im Head-Bereich stehen!):
Code:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Das wird dann nur im Internet Explorer ausgelesen und verwendet, alle anderen Browser verwenden das eigentliche und richtige Stylesheet.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben