Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] CSS Sub-Menü funktioniert in FF & Chrome, nicht aber in IE.

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] CSS Sub-Menü funktioniert in FF & Chrome, nicht aber in IE.

    Hallo,

    ich plage mich jetzt geschlagene 2 Wochen mit dem besch**** Internet Explorer rum. Ich möchte ein Menü mit Submenüpunkten mit CSS erstellen, aber der Internet Explorer tanzt immer aus der Reihe. Ich habe jetzt ein ganz einfaches Menü im Netz gefunden, und in meine Homepage eingebunden.
    Vorlage ist dieses Menü:

    http://css.maxdesign.com.au/listamatic2/vertical11.htm

    Ich habe den Code so angepasst:

    CSS:
    Code:
    #navlist
    		{
    			list-style-type: none;
    			color: darkgray;
    		
    			margin-left: 5px;
    		}
    		
    		#active:hover li { display: block; }
    		#active li { display: none; }
    		
    	
    		#links a
    		{
    			color: black;
    			
    			width: 120px;
    			display: block;
    		}
    		
    		#links a:visited
    		{
    			color: black;
    			
    		}
    		
    		#links a:active
    		{
    			color: white;
    			background-color: gray;
    		}
    		
    		#links a:hover
    		{
    			color: white;
    			background-color: blue;
    		}
    HTML/PHP:
    PHP-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <
    html>
    <
    head>
    <
    title>HueCMS</title>
    <
    meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <
    link rel="stylesheet" type="text/css" href="template.css" />  
    </
    head>

    <
    body>

    <
    div id="kopf">
      <
    p><strong>HueCMS</strong></p>
    </
    div>

    <
    div id="mitte">

        <
    div id="inhalt">
        <
    pre>
        
    LOREM IPSUM
        asdasd
        asdadsasd
        asdasdasd
        asd
        asd
        ad
        d
        d
        d
        d
        d
        d
        d
        d
        d
        d
        d
        d
        d
        d

        
    </pre>
        </
    div>

        <
    div id="links">
            
            <
    ul id="navlist">
            <
    li id="active"><a href="#" id="current">Item one</a>
            <
    ul id="subnavlist">
                <
    li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>

                <
    li><a href="#">Subitem two</a></li>
                <
    li><a href="#">Subitem three</a></li>
                <
    li><a href="#">Subitem four</a></li>
            </
    ul></li>
            <
    li><a href="#">Item two</a></li>
            <
    li><a href="#">Item three</a></li>

            <
    li><a href="#">Item four</a></li>
        </
    ul>

            

        </
    div>

        <
    div id="rechts"><p><strong>Rechte Spalte</strong></p>
        </
    div>



    </
    div>

    <
    div id="fuss">
      <
    p><strong>Fußleiste</strong></p>

    </
    div>

    </
    body>
    </
    html
    Im Internet Explorer öffnet sich das Submenü einfach nicht...
    Was mache ich falsch?
    Grüße

    M3doXX


  • #2
    Der DOCTYPE scheint als Quirks-Mode-DOCTYPE interpretiert zu werden. Vielleicht, weil dort „HTML 4.0“ und nicht „HTML 4.01“ steht. *schulterzuck*
    PHP-Wissenssammlung Composer Awesome Awesomeness PHP: The Right Way @mermshaus

    Kommentar


    • #3
      Wie Dir der verlinkte Browserchart zu Pop open list verrät, unterstützt der IE das Menü auch gar nicht. IMHO gibt es für den IE (mindestens) 6 überhaupt keine CSS-only Klappmenüs. Du wirst hier immer auf eine Javascript-Erweiterung ausweichen müssen.
      Ich würde Suckerfisch empfehlen.

      der Internet Explorer
      Im Internet Explorer
      Also ich kenne x Versionen. Du solltest schon klar benennen, wofür Du entwickelst, wenn Du hier Hilfe erwartest.
      --

      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


      --

      Kommentar


      • #4
        OK, danke.
        Werde dann wohl auf eine Javascript-Lösung umsteigen.

        Kommentar


        • #5
          Meistens reicht es aus, per JS (bspw. jQuery) die :active oder :focus Verhalten per Klasse nachzubilden und zusätzlich im CSS anzulegen; also bspw.

          Code:
          li:hover {
            ...
          }
          zu

          Code:
          li.hover ,
          li:hover {
            ...
          }
          und

          in jQuery:

          PHP-Code:
          $('#navi li').each (function () {
            var 
          that this;
            $(
          this)
              .
          mouseover (function () { that.addClass ('hover'); })
              .
          mouseout  (function () { that.removeClass ('hover'); });
          }); 
          o.ä.
          --

          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


          --

          Kommentar

          Lädt...
          X