scrollbar im ie6 (suckerfish)

Hallo liebe gemeinde,

ich habe mit dem tut von frank hess a la suckerfish ein horizontales flyoutmenu auf meiner seite erstellt.
Leider hat das menu im ie6 einen horizontalen scrollbalken sodass die untermenus bei mouseover nicht angezeigt werden können.

mein css code:

Code:

---

.mod_navigation ul
{
        margin:0;
        padding:0;
        list-style-type:none;
}
.mod_navigation
{
        width:650px;
        position:absolute;
        overflow:visible;
        z-index:999;
}
.mod_navigation p
{
        margin:0;
        padding:0;
}
.mod_navigation li
{
        width:80px;
        position:relative;
        float:left;
        background-color:#999999;
        border-right:1px solid #ffffff;
        border-bottom:1px solid #ffffff;
        border-left:1px solid #ffffff;
        line-height:35px;
}
.mod_navigation li ul ul
{
        left:161px;
        position:absolute;
        top:0px;
}
.mod_navigation li:hover ul
{
        display:block;
}
.mod_navigation ul li:hover ul ul
{
        display:none;
}
.mod_navigation ul ul li:hover ul
{
        display:block;
}
/* ID aus jscript übernehmen */
.mod_navigation ul li:hover ul,
.mod_navigation ul li.sfhover ul
{
        display:block;
}
.mod_navigation ul li:hover ul ul,
.mod_navigation ul li.sfhover ul ul
{
        display:none;
}
.mod_navigation ul ul li:hover ul,
.mod_navigation ul ul li.sfhover ul
{
        display:block;
}
.mod_navigation a
{
        padding-left:5px;
        text-decoration:none;
        color:#ffffff;
}
.mod_navigation li:hover,
.mod_navigation li.sfhover
{
        background-color:#666666;
}
.mod_navigation li ul
{
        bottom:0;
        left:-1px;
        position:absolute;
        display:none;
        right:0px;
        top:36px;
}

---

mein javascript:

Code:

---

// JavaScript Document
sfHover = function() {
  var sfEls = document.getElementById("header").getElementsByTagName("li");
  for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
 }
 if (window.attachEvent) window.attachEvent("onload", sfHover);

---

ab ie7 funzt alles
weiß da jemand rat?

Hallo Kralle,
dein Problem wird nicht direkt die Navigation sein, sondern das div drum herum.
Das wird schätzungsweise etwas besitzen wie 'overflow:scroll'. Dadurch wird ein Scrollbalken dargestellt bei übergroßem inhalt.

Aber ohne Link wird man da nur im Dunklen stochern.. daher kann ich da im Moment nicht viel mehr zu sagen.

Viele Grüße

hey mackp,

Die Seite

durch das tutorial hab ich mod_navigation auf overflow:visible; gesetzt, ansonsten eigentlich nichts.

Hallo Kralle,
hab gerade nicht so viel Zeit um mir das genau anzuschauen.. antwortet ja auch gerade kein anderer.. aber mach dir das Leben leichter indem du das CSS von hier nimmst -> http://www.contao-community.de/showt...css+suckerfish

Das ist neuer und da sind auch einige Erläuterungen in dem Thread die weiter helfen können.

Viele Grüße

Hallo, dann werde ich mal schauen, was ich für dich tun kann ;)

Unser Contao-Yoda hat vollkommen Recht es liegt einzig allein an deinem CSS. Du hast nun verschieden Möglichkeiten.

1. das bestehende CSS sauber zu schreiben, so das es dann in allen Browsern funktioniert
2. für den IE6 den Hack verwenden und diesen dann seperat mit "CSS" zu füttern

Ich würde die erste Möglichkeit vorziehen und mal schauen wie weit ich damit komme:

HTML-Code:

---

.mod_navigation{
        width:650px;
}

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

.mod_navigation li{
        width:80px;
        float:left;
        background-color:#999999;
        border-right:1px solid #ffffff;
        border-bottom:1px solid #ffffff;
        border-left:1px solid #ffffff;
        line-height:35px;
}
.mod_navigation ul li ul
{
        left:-99999px;
        position:absolute;
}
.mod_navigation ul li:hover ul{
        left:0px;
        position:absolute;       
}

---

So das wäre meine Ansatz, weiter darfst du dann erstmal alleine machen!

LG Kirsten