XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit Suckerfish-Menu im Mozilla (http://xhtmlforum.de/showthread.php?t=52479)

eRoZion 29.06.2008 16:23

Problem mit Suckerfish-Menu im Mozilla
 
Hallo!

Ich bastele gerade an einer Umsetzung des Suckerfish-Menu's und habe riesen Probleme mit Mozilla. Im Mozilla bleibt das Eltern-Listenelement einfach nicht angewählt, wenn ich mit der Maus im Bereich der Sub Liste bin.

Code:

Ist nun wieder unwichtig
Code:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <title>Beispiel</title>

        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <link href="./css/layout.css" rel="stylesheet" type="text/css" />

        <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>
    </head>

    <body>
        <div id="page">
            <div id="header">
                <h1>Header</h1>

                <div id="nav-bar">
                    <ul id="nav">
                        <li><a href="#1"><span>Link 1</span></a>
                            <ul>
                                <li><a href="#11"><span>Sub Link 1</span></a></li>
                                <li><a href="#12"><span>Sub Link 2</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#2"><span>Link 2</span></a>
                            <ul>
                                <li><a href="#21"><span>Sub Link 1</span></a></li>
                                <li><a href="#22"><span>Sub Link 2</span></a></li>
                            </ul>
                        </li>
                    </ul>

                    <div class="clearfix"></div>
                </div>
            </div>

            <div id="content">
                <div class="col-1">
                    <h2>Col 1</h2>
                    <p>Lorem ipsum dolor sit ....</p>
                    <p>Duis autem vel eum iriure ...p>
                </div>

                <div class="col-2">
                    <h2>Col 2</h2>
                    <p>Lorem ipsum dolor sit ...</p>
                    <p>Duis autem vel eum iriure ...p>
                </div>

                <div class="col-3">
                    <h2>Col 3</h2>
                    <p>Lorem ipsum dolor sit ....</p>
                    <p>Duis autem vel eum iriure ...p>
                </div>

                <div class="clearfix"></div>
            </div>

            <div id="footer">
                <p>Footer</p>
            </div>
        </div>
    </body>
</html>

Es sieht eigentlich fast so aus, als würde das Javascript im Mozilla nicht laufen. Der Internet-Explorer 7 macht alles wie gewollt. :(

Hat jemand eine Idee?

Danke,
Daniel

Boris 29.06.2008 17:05

Das Javascript ist nur für den IE5 und IE6, nicht für alle anderen Browser. Daran kann es daher nicht liegen.

Nimm allerdings mal den XML Prolog am Anfang raus und setze einen XHTML 1.0 Strict DOCTYPE ... ;)

eRoZion 29.06.2008 17:19

Zitat:

Das Javascript ist nur für den IE5 und IE6, nicht für alle anderen Browser. Daran kann es daher nicht liegen.
Das verstehe ich jetzt nicht. Das Javascript gibt doch dem Eltern-Listenelement, in dem sich meine Sub Liste befindet das Class-Attribut "over", sodass ich es per CSS als aktiv markieren kann, solange sich die Maus im Bereich der Sub Liste befindet.

Diese Funktionalität müsste doch für alle Browser gelten, weil sie nicht standard ist?

Mit dem "li:hover" hat es nichts zutun, mir geht es nur darum, dass das Eltern-Listenelement das Class-Attribut "over" erhält, solange man mit der Maus im Bereich der Sub Liste ist. Und im Mozilla sieht es so aus, als würde das nicht funktionieren.

Ich ändere mal noch den Doctype und teste dann noch einmal.

Gruß,
Daniel

eRoZion 29.06.2008 17:28

Peinlich - Du hast natürlich Recht!

Ich habe jetzt folgendes gemacht, damit es im Mozilla funktioniert:
Code:

#nav a:hover,
#nav li:hover a,
#nav li.over a {
    color: #0088b5;
    background-color: #fff;
    border: 1px solid #555;
    border-bottom: 0;
    padding: 0 5px 1px;
}

Einfach mal richtig nachgedacht und schon funktioniert es wie gewünscht. :roll:

Gruß,
Daniel

Boris 29.06.2008 19:37

Macht nix, dafür ist das Problem erledigt ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:44 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023