Suckerfish Navigation - Untermenupunkte erscheinen nicht

Hallo,

ich habe soeben dieses Tutorial durchgearbeitet (http://de.contaowiki.org/typolight/TutorialsSuckerfish) und alles so befolgt, wie es im Tutorial steht, bis auf die Browserkompatibilität, denn mir ist aufgefallen, dass mir die Untermenupunkte schon im Firefox gar nicht mehr angezeigt werden, auch wenn Display auf Block steht.

Hier der Link zu der Webseite: http://www.christoph-schiffer.de/typolight/
(Ich habe mehrere Untermenüpunkte bei Software)

Hat da jemand eine Idee?

Vielen Dank,
Chris

ist grade erst gelöst worden; siehe da:
https://community.contao.org/de/showthread.php?t=4336

Hallo!

Du hast vergessen, auf .mod_navigation eine Höhenangabe zu definieren.

Code:

---

.mod_navigation {
    height:300px;
}

---

Danach sollte das funktionieren. ;)

Wie mir scheint, hast Du den gesamten Punkt *Letzte Anpassungen* im Tutorial auch nicht umgesetzt.

Zitat:

---

Zitat von Thomas

Hallo!

Du hast vergessen, auf .mod_navigation eine Höhenangabe zu definieren.

Code:

---

.mod_navigation {
    height:300px;
}

---

Danach sollte das funktionieren. ;)

---

Das Untermenü ist dann zwar sichtbar, aber der .mod_navigation container verschiebt auch alles andere nach unten.

Die (bessere) Lösung in dem Fall ist imho

Code:

---

.mod_navigation {overflow: visible; }

---

Ja, aber die Höhenangabe benötigt er zur besseren Übersicht und um das anzupassen, wird ja später im Tut wieder entfernt.

Wie ich oben schon editiert habe, hat er wohl den Punkt *Letzte Anpassungen*, im Tutorial, nicht umgesetzt.

Ich hab das Tut bis dato nicht gelesen; da ich die Lösung kannte ...

Vielleicht könntest Du Dein Tutorial ja noch um einige Hinweise/Erklärungen ergänzen:

Zum einen, dass die Höhenangage tatsächlich nur der Übersicht beim stylen dient und daher am Ende wieder entfernt wird und zum anderen, was es mit dem overflow auf sich hat

Ich denke, dann ist es - grade für Anfänger - verständlicher.

Gruß

Dennis

p.s.: was mir grade noch aufgefallen ist: im JS selektierst du ja Layoutbereich > li, wäre es nicht besser, dem Navigationsmodul eine ID zu geben und dann nach ID der Navigation > li zu selektieren? Es ist ja nicht auszuschließen, das im selben Layoutbereich auch noch andere Listen vorkommen ... (z.b. eine individuelle Navigation)

Vielen Dank für die Antworten :)

Ich habe das Problem nun wie beschrieben mit z-index: 999; und overflow: visible gelöst, allerdings klappt die dritte Ebene nicht zur Seite raus. Ich habe einen Untermenüpunkt bei Software -> Einsatzgebiete.

Gibt es irgendwo ein Tutorial, wie ich das Untermenu so einblenden lassen kann wie auf https://contao.org/ ?

Zitat:

---

Zitat von brandtmarke

p.s.: was mir grade noch aufgefallen ist: im JS selektierst du ja Layoutbereich > li, wäre es nicht besser, dem Navigationsmodul eine ID zu geben und dann nach ID der Navigation > li zu selektieren? Es ist ja nicht auszuschließen, das im selben Layoutbereich auch noch andere Listen vorkommen ... (z.b. eine individuelle Navigation)

---

Ich habe vor, über der Hauptnavigation noch eine kleinere individuelle Navigation zu platzieren, also könnte das für mich auch relevant sein, denke ich.

Danke,
Chris

atwht im TUT:

Code:

---

.mod_navigation ul ul li:hover ul
{
    display:block;
 }

---

Nach dem ausblenden muss es auch wieder eingeblendet werden .... ;)

und naochwas, durch

Code:

---

.mod_navigation li ul{left:-1px;top:36px;position:absolute;display:none;}

---

wird die 3te Ebene nach unten versetzt, das lässt sich durch

Code:

---

.mod_navigation li ul ul{top: 0}

---

beheben ...

Das habe ich alles so drinne. Aber irgendwie scheint es trotzdem nicht zu klappen.

Edit: Ich habe noch ein anderes Problem. Ich habe einen eigenen Layoutbereich "Navigation" erstellt und diesem im Template fe_pages.tpl über dem Header mit <?php echo $this->getCustomSections('Navigation'); ?> platziert.

Dann habe ich im Layout das Logo und die Navigation dem Layoutbereich "Navigation" zugewiesen. Wenn ich mir nun die Seite anschaue, erscheint das Logo und das Menü im Inhaltsbereich.

Zitat:

---

Edit: Ich habe noch ein anderes Problem. Ich habe einen eigenen Layoutbereich "Navigation" erstellt und diesem im Template fe_pages.tpl über dem Header mit <?php echo $this->getCustomSections('Navigation'); ?> platziert.

Dann habe ich im Layout das Logo und die Navigation dem Layoutbereich "Navigation" zugewiesen. Wenn ich mir nun die Seite anschaue, erscheint das Logo und das Menü im Inhaltsbereich.

---

Ich nehme an, das Du im Seitenlayout den Layoutbereich ausgewählt hast und bei Position der Lasyoutbereiche "innerhalb der Hauptspalte" ausgewählte hast (ist die Default Einstellung).

Wenn Du in Deinem fe_page.tpl die Layoutbereiche händisch einfügst solltest Du zum einen

Code:

---

<?php echo $this->getCustomSections('main'); ?>

---

entfernen und zum anderen ist der korrekte Aufruf direkt im Template

Code:

---

<?php echo $this->getCustomSection('Navigation'); ?>

---

also nicht "..Sections.:" sondern nur "...Section..."

Bau das nochmal so hin und setz auch die Navi wieder an die korrekte Stelle, dann schau ich nochmal, was mit der Navigation nicht stimmt...

Die Anweisung

Code:

---

.mod_navigation UL UL LI:HOVER UL{display:block;}

---

MUSS im css UNTER

Code:

---

.mod_navigation UL LI:HOVER UL UL{display:none;}

---

Vielen Dank für deine Geduld brandtmarke :) Die Navi und das Logo sind nun über dem Header.

Die Navigation ist noch etwas empfindlich, sprich wenn man auf Software klickt und mit der Maus nach unten fährt, blendet er die Untermenupunkte ab und zu wieder weg.

wenn Du den .mod_navigation li mal eine Hintergrundfarge gibts wirst Du sehen, dass zwischen der horizontalen 1ten Ebene und der vertikalen 2ten Ebene 1 Pixel luft ist. Der Grund dafür:

Code:

---

.mod_navigation li{width:160px;
height:35px;
position:relative;
float:left;font-family:Verdana;
font-size:16px;
color:#e43226;
line-height:35px;}

---

Du hast für die 2te Ebene aber

Code:

---

.mod_navigation li ul {
left:-1px;
top:36px;
position:absolute;
display:none;}

---

... Klar soweit ;)

Ja, habe ich verstanden. Wenn man auf den 1px der frei war gekommen ist, wurde das Untermenü wieder ausgeblendet. Vielen Dank!

Ich warne Dich schonmal vor. :)

Im IE wirst Du einiges an Frickelarbeit machen müßen.
Hier ein Pixelchen dazu, hier eines weg.
An Deiner Stelle würde ich mich direkt darum kümmern und es nicht auf die lange Bank schieben. Man vergißt so einiges, wenn man längere Zeit nicht daran arbeitet. ;)

Ich habe diese Browserkompatibilität mit dem Javascript aus dem Tutorial gar nicht gemacht und die Navigation funktioniert trotzdem unter IE7 und IE8.

Allerdings ist der Footer im IE7 viel weiter oben mitten in der Seite und überlappt sich mit anderen Ebenen.

Ich weiß das ist wahrscheinlich eine ziemliche Anfängerfrage, aber wie bekomme ich das DIV mit dem Logo und das Navigations-DIV nebeneinander?

Gruß,
Chris

Zitat:

---

Zitat von Chris87

Ich habe diese Browserkompatibilität mit dem Javascript aus dem Tutorial gar nicht gemacht und die Navigation funktioniert trotzdem unter IE7 und IE8.

---

Der Javascript FIX ist für den IE 6, da der :hoer nur bei a-Elementen kennt.

Zitat:

---

Ich weiß das ist wahrscheinlich eine ziemliche Anfängerfrage, aber wie bekomme ich das DIV mit dem Logo und das Navigations-DIV nebeneinander?

---

Kannst Du absolut positionieren, nachdem Du das Elternelement relativ positioniert hast:

Code:

---

#Navigation {position: relative;}
.mod_navigation{width:740px;position:absolute;overflow:visible;z-index: 999; left: 300px; top: 40px;}

---

Zitat:

---

Allerdings ist der Footer im IE7 viel weiter oben mitten in der Seite und überlappt sich mit anderen Ebenen.

---

sieht nach einem Problem mit Floats aus; obwohl der clearer da ist ... muss ich mir genauer angucken ...

mal eine grundsätzliche Empfehlung:

Wenn Du nicht ohnehin Firefox zum enwickeln benutzt, solltest Du das tun und folgende Extensions installieren:

• Firebug
• Web Developer Tools-
• HTML Validator

Du hast einige nicht valide Macken im Quelltext, ich z.b.

Code:

---

<p>
<!-- indexer::stop -->
<div class="mod_quicklink block">

<form action="index.php" method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_quicklink" />
<select name="target" class="select">
  <option value="">Quicklink</option>
  <option value="index.php/startseite.html">Startseite</option>
  <option value="index.php/software.html">Software</option>
  <option value="index.php/service.html">Service</option>
  <option value="index.php/unternehmen.html">Unternehmen</option>

</select>
<input type="submit" class="submit" value="Los" />
</div>
</form>

</div>
<!-- indexer::continue -->
</p>

---

Du hast p-Tags als Elternelement von .mod_quicklink !????
Beheb das erstmal ...

Danke für die Tips, Web Developer und Firebug habe ich bereits installiert. HTML Validator werde ich mir gleich noch installieren.

Ich habe das Template von Typolight generieren lassen. Die <p> Tags habe ich nicht hinzugefügt.

Code:

---

<div class="mod_contentbox block">
        <h1>Schnelleinstieg</h1>
        <div class="box">
        </div>
        <div class="box_footer"/>
                <h1>Neuigkeiten</h1>
                <div class="box">
                </div>
        <div class="box_footer"/>
</div>

---

... Du hast das schließende Tag vom div mit der Klasse box_footer ebenfalls mit einer Klasse versehen; nehm die Klasse an der Stelle mal raus

Zitat:

---

Zitat von brandtmarke

Code:

---

<div class="mod_contentbox block">
        <h1>Schnelleinstieg</h1>
        <div class="box">
        </div>
        <div class="box_footer"/>
                <h1>Neuigkeiten</h1>
                <div class="box">
                </div>
        <div class="box_footer"/>
</div>

---

... Du hast das schließende Tag vom div mit der Klasse box_footer ebenfalls mit einer Klasse versehen; nehm die Klasse an der Stelle mal raus

---

Oha, das ist mir gar nicht aufgefallen, dadurch kommen wahrscheinlich auch diese Abstände oben und unten zustande.

Zitat:

---

Zitat von Chris87

Ich habe das Template von Typolight generieren lassen. Die <p> Tags habe ich nicht hinzugefügt.

---

Wie hast Du das Modul denn ins Layout eingebaut? Mit einem insert-Tag in einem Artikel?

Zitat:

---

Zitat von Chris87

Oha, das ist mir gar nicht aufgefallen, dadurch kommen wahrscheinlich auch diese Abstände oben und unten zustande.

---

Code:

---

<div class="mod_contentbox block">
        <h1>Schnelleinstieg</h1>
        <div class="box">
        </div>
        <div class="box_footer"/>
                <h1>Neuigkeiten</h1>
                <div class="box">
                </div>
        <div class="box_footer"/>
</div>

---

Du hast sogar zwei schließende DIV Tags ... Mich wunderts, dass Dein Layout nicht vollkommen zerschossen ist ...

Ich weiß allerdings nicht, wie das zustande kommt. Der Quelltext der mod_box_items.tpl schaut bei mir so aus:

Code:

---

<?php foreach ($this->items as $item): ?>
<?php if($item['headline']): ?>
<<?php echo $item['h1']; ?>><?php echo $item['headline']; ?></<?php echo $item['h1']; ?>>
<?php endif; ?>
<div class="box">

<?php if ($item['addImage'] && $item['addBefore']): ?>
<div class="image_container"<?php if ($item['margin'] || $item['float']): ?> style="<?php echo $item['margin'] . $item['float']; ?>"<?php endif; ?>>
<?php if ($item['href']) : ?>
  <a href="<?php echo $item['href']; ?>" title="<?php echo $item['alt']; ?>" <?php if($item['fullsize']): ?> rel="lightbox"<?php endif; ?>>
<?php endif; ?>
<img src="<?php echo $item['src']; ?>" alt="<?php echo $item['alt']; ?>"<?php echo $item['imgsize']; ?> /><?php if ($item['href']): ?></a><?php endif; ?>
<?php if ($item['caption']): ?>
<div class="caption"><?php echo $item['caption']; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>

<?php echo $item['content']; ?>

<?php if ($item['addImage'] && !$item['addBefore']): ?>
<div class="image_container"<?php if ($item['margin'] || $item['float']): ?> style="<?php echo $item['margin'] . $item['float']; ?>"<?php endif; ?>>
<?php if ($item['href']) : ?>
  <a href="<?php echo $item['href']; ?>" title="<?php echo $item['alt']; ?>" <?php if($item['fullsize']): ?> rel="lightbox"<?php endif; ?>>
<?php endif; ?>
<img src="<?php echo $item['src']; ?>" alt="<?php echo $item['alt']; ?>"<?php echo $item['imgsize']; ?> /><?php if ($item['href']): ?></a><?php endif; ?>
<?php if ($item['caption']): ?>
<div class="caption"><?php echo $item['caption']; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<div class="box_footer"></div>
<?php endforeach; ?>

---

Zitat:

---

Zitat von brandtmarke

Wie hast Du das Modul denn ins Layout eingebaut? Mit einem insert-Tag in einem Artikel?

---

Welches Modul meinst du? Ich habe das Boxes (content-box) Addon und habe zwei Module mit dem Box Addon erstellt (Box Rechts und Box Links). Diese Box-Module habe ich dem Template zugewiesen.

Dann habe ich mehrere Content-Boxen erstellt und diesen Boxen habe ich wiederum die Module Quicklink und Nachrichtenliste zugeordnet.

Code:

---

<div id="schatten_u_header">

---

Du verwendest 2 mal auf der Seite eine ID, mach da mal eine Klasse draus

Code:

---

<div class="schatten_u_header">

---

Ok, das habe ich gemacht, schatten_u_header ist nun eine Klasse.
Ich weiß allerdings nicht wo dieses <p>-Tag herkommt, es muss ja irgendwie vom Content-Box-Modul kommen, aber im Template finde ich nichts. Hier der Code aus der mod_box.tpl:

Code:

---

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline && $this->items): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<?php echo $this->items; ?>

</div>
<!-- indexer::continue -->

---

Die Content Boxen nutzen doch den TinyMCE, oder? (hab leider grade keine Installation mit der Erweiterung parat) Wenn Du die Module via insert Tag in die Content Boxen eingebaut hast, dann wird das daran liegen; dann geh mal in den HTML Modus vom TinyMCE und entferne die p-tags manuell ...

Vielen Dank für den Hinweis, das scheint wohl der Fehler zu sein. Allerdings macht er die p-Tags jedes mal wieder neu rein, auch wenn ich die vorher im HTML-Modus entferne.

Liegt das vielleicht an dem Haken "Automatischer Zeilenumbruch" im HTML-Editor? Der Haken lässt sich aber auch nicht entfernen, der ist jedes mal wieder angehakt.

das Verhalten kannst Du in den TL Einstellungen ändern unter Backend Einstellungen -> Neue Zeilen mittels Absätzen erstellen

hier noch einige kleine Macken, die mir aufgefallen sind:

Code:

---

<div class="logo_qmcenter"><img src="tl_files/Layout/Logos/qmc_logo.png" border="0"></div>

---

das IMG tag ist nicht geschlossen und statt border="0" notiert man unter xhtml style="border: 0;" ein alt="QMC Logo" o,ä würd dem auch gut stehen ...

Irgendwo weiter unten kommt dann

Code:

---

<p>&nbsp;</p>
<hr size="1" />
<p>&nbsp;</p>

---

Das size-Attribut ist unter xhtml ist auch propriotär

Diese Dinge sind zwar kein Beinbruch, aber der Vollständigkeit halber ...

Vielen Dank nochmal, du hast mir echt sehr weiter geholfen :)

Warum der IE 7 mit dem Footer zicken macht hab ich allerdings noch nicht rausgefunden, aber versuch mal

Code:

---

#footer {clear: both;}

---

Zitat:

---

Zitat von brandtmarke

Warum der IE 7 mit dem Footer zicken macht hab ich allerdings noch nicht rausgefunden, aber versuch mal

Code:

---

#footer {clear: both;}

---

---

Super, das hat geholfen :)

Habe nun auch das mit den Absätzen raus genommen, der Abstand ist nun kleiner geworden aber immer noch da. Irgendwie macht er zwischen <h1>Schnelleinstieg</h1> und <div class="box"> einen Abstand, genau so am Ende zwischen </div> und <div class="box_footer"></div>.

Ich versuch einfach mal das margin bei den beiden Klassen auf 0 zu setzen.

mach mal

Code:

---

#left h1, #right h1, #left p, #right p {
 margin: 0;
}

---

Ja, das hat das Problem mit den Abständen behoben, allerdings werden nun auch die gewollten Abstände zwischen den Boxen und zwischen den News-Einträgen auf 0 gesetzt.

Kann ich die irgendwie differenzieren und somit nur die falschen Abstände auf 0 setzen?

Eine Möglichkeit wäre ja, z.B. im Quellcode des Box-Moduls sowie der Nachrichtenliste, manuell Abstände hinzuzufügen. Aber vielleicht kann man das auch eleganter lösen.

Vielen Dank,
Chris

Abstand News zur Headline z.b. mit

Code:

---

.box {padding: 15px 0;}

---

Die artikel an sich mit

Code:

---

.layout_latest {
margin: 5px 0;
padding 5px 0;
border-bottom: 1px solid #eee;
}

---

Mit Padding auf die .box macht er mir wieder die Abstände (ohne Rand) rein, obwohl der Rand links und rechts in der Klasse .box definiert ist. Also wird der Rand auch mit Padding verschoben?

Ich habe jetzt noch eine zweite Navigation hinzugefügt, wie kann ich die beiden Navigationen rechtsbündig machen, so dass ich vllt kein margin-left benutzen muss? Ansonsten muss ich das margin ja immer anpassen, wenn die Navigationen breiter werden.

Vielen Dank,
Chris

Die Lösung ist im Grunde nicht schwer; zuerst einmal ins Markup schauen, welche Elemente sich wofür anbieten. Desweiteren sollte das a) Box Model Prinzip bekannt sein > hier gucken oder hier, der Umgang mit Margins und Paddings ...

Und Los gehts:
Das Markup um Beispiel Deiner Newslist:

Code:

---

<h1>Neuigkeiten</h1>
<div class="box">
        <div class="mod_newslist block">
                <div class="layout_latest block first even">...</div>
                <div class="layout_latest block last odd">...</div>
        </div>
</div>
<div class="box_footer"/>

---

Dann macht man im CSS folgendes

Code:

---

.box{
        border: 1px solid #e1e1e1;
        border-width:0px 1px;
        padding:10px 7px; /*7px oben und unten, 0 px links und rechts*/
        }
.box_footer{
        height:4px;
        margin-bottom:15px;
        background-image:url("tl_files/Layout/Hintergrund/box_footer_bg.png");
        background-repeat:no-repeat;
        }

---

Die Breitenangaben können wir weglassen; bzw. belassen es bei auto (default), die orientiert sich am Elternelement unter Berücksichtigung von border, margin und padding, dann bekommt .box footer noch eine margin nach unten, damit die Blöcke nicht zusammenkleben - und das wars auch schon ...

Grundsätzlich: versuche Breitenangaben nur da zu machen, wo sie auch wirklich nötig sind; Dein #right Container hat ja schon eine feste Breite; mehr brauchst Du erstmal nicht, der Rest wird bei Block Level Elementen wie schon gesagt von allein berechnet ...

Zitat:

---

Ich habe jetzt noch eine zweite Navigation hinzugefügt, wie kann ich die beiden Navigationen rechtsbündig machen, so dass ich vllt kein margin-left benutzen muss? Ansonsten muss ich das margin ja immer anpassen, wenn die Navigationen breiter werden.

---

kannst Du beide Absolut positionieren:

Code:

---

.mod_customnav,
.mod_navigation {
        position: absolute;
        right: 20px;
        top: 20px;
}
.mod_navigation {
        top: 50px;
}

---

Im IE7 wird die Navigation bzw. die Untermenüpunkte durch den Header überlagert. Im IE8 und FF funktioniert es problemlos.

Code:

---

#Navigation{
width:980px;
height:103px;
position:relative;background:url("tl_files/Layout/Hintergrund/navi_bg.jpg") center top no-repeat;
z-index: 999;
}

---

Super! Vielen Dank noch Mal ;)

Sry, wenn ich hier noch mal nerven muss, aber ich habe nun wie im Tutorial beschrieben noch den IE-Fix eingebaut, damit die Navigation auch im IE6 ordentlich angezeigt wird, aber die Navigation funktioniert immer noch nicht.

http://de.contaowiki.org/typolight/TutorialsSuckerfish

Ich habe die .js-Datei hochgeladen, ins Template eingebunden und die CSS-Klassen entsprechend angepasst.

Du hast im CSS die Klasse .shover angegeben im JS aber .sfhover ....

Oh man, das hätte mir auch selber auffallen müssen, sry...

Ich habe nun die Klassen dementsprechend umbenannt und nun macht er allerdings im IE6 nicht das, was er soll. Wenn ich über die Menüpunkte gehe dann erscheint eine horizontale Scroll-Leiste. Um den #left-Bereich sind nun auch Scroll-Leisten.

gib dem .mod_navigation ul nochmal ein overflow: visible; ....

Hmm das macht keinen Unterschied. Gibt es vielleicht eine Alternative zu dem Javascript-Fix, damit es unter IE6 läuft?

Edit: Ist es möglich, dass sich der Hauptmenüpunkt auch einfärbt, wenn man sich auf einer Unterseite dieses Menüpunktes befindet?

Hallo Chris87,
da der IE6 kein overflow bei _nicht_ links beherrscht geht es nicht anders als mit einem kleinen JS für den IE6.

Viele Grüße

PS: Einfärben mit .trail

Wurde hier und schon an sehr vielen Stellen beschrieben. Bitte benutzt doch die Suche.
Sogar ein Tutorial für Suckerfish Navigation mit TL gibt es hier im Forum...
Daher bitte fangt an die Suche zu benutzen.

Vielen Dank für den Hinweis.

Ich habe das .js wie im Tutorial (http://de.contaowiki.org/1/TutorialsSuckerfish) beschrieben eingefügt, aber anstatt mir die Untermenüpunkte anzuzeigen, erscheint eine horizontale Scroll-Leiste beim Hauptmenü.

Edit: Ich habe die Klasse .trail erstellt, damit sich der Hauptmenüpunkt auch rot einfärbt, wenn man sich auf einer Unterseite befindet, aber es funktioniert leider nicht.

http://www.christoph-schiffer.de/typ...eferenzen.html

Danke,
Chris

Zitat:

---

Zitat von Chris87

Ich habe das .js wie im Tutorial (http://de.contaowiki.org/1/TutorialsSuckerfish) beschrieben eingefügt, aber anstatt mir die Untermenüpunkte anzuzeigen, erscheint eine horizontale Scroll-Leiste beim Hauptmenü.

---

in der iefixes.css ist für die Klasse .block overflow: auto notiert, und zwar mit dem star-Html hack

Code:

---

* html .block{
        overflow: auto;
        zoom: 1;
}

---

das scheint an dieses Stelle das Problem zu sein, da der IE durch die zusätzlichen Selektoren * und html der overflow Anweisung eine höhere Priorität zuordnet als dem Selektor .mod_navigation
setz in Deine QM-center.css also mal

Code:

---

*html .mod_navigation {
        overflow: visible;
}

---

Dadurch sollte overflow: visible auch greifen.

Ausserdem ist mir aufgefallen, dass hier

Code:

---

.mod_navigation li:hover ul {
display:block;
}

---

moch der Selketor .sfhover für den IE fehlt ...

Bei mir ist Deine -trail Klasse definitiv rot ...

Super, die Navigation funktioniert nun auch im IE.

Die Scrollbalken bei den letzten News habe ich auch wegbekommen, das lag daran, dass ich dort einen link "Alle News lesen" rechtsbündig gemacht habe und das div des Links keine feste Breite hatte. Habe dem Div eine Breite von 220px gegeben und nun funktioniert es.

Vielen Dank brandtmarke für deine ganzen Beiträge, das hat mir echt sehr viel weiter geholfen.

Gruß,
Chris