Falsche Darstellung der Navigation im Internet Explorer

[webdesign86]

Dies ist leider schon mein drittes Thema das mit der Navigation meiner Website zu tun hat, aber leider hören die Probleme nicht auf. Mittlerweile habe ich den CSS-Quelltext, den ich von dieser Website habe, schon relativ gut in den Griff bekommen. Doch als ich heute die Website im Internet Explorer 7 angeschaut habe, musste ich leider feststellen dass mein Dropdown-Menu alles andere als richtig dargestellt wird Und zwar werden nur 2 (Startseite, Sponsoren) von eigentlich insgesamt 11 Buttons angezeigt. Im Firefox wird das Menu richtig dargestellt, weshalb der CSS-Code ja eigentlich nicht falsch sein kann oder? Falls ihr euch mal selbst überzeugen wollt, hier der Link meiner Homepage: http://www.neu.memmingen-indians.de (bitte nicht von der Template-Fehlermeldung stören lassen ). Wäre super wenn ihr mir schreiben könnt, was der Fehler ist! Falls es euch weiterhilft, hier noch das Stylesheet für die Navigation:

<style type="text/css">

 /* common styling */
.menu2 {
float:left; 
width:100%; 
font-family: verdana, arial, sans-serif; 
font-size:11px; 
border-top:1px solid #441111;/* oberer Rand */
 /* Hintergrund */
margin:0 0 20px 0; /* for this demo only */
}
.menu2 ul {
padding:0;margin:0;list-style-type:none;
}
.menu2 ul li {
float:left; 
position:relative;
margin-top:0;
margin-right:0;
margin-bottom: 1em;
margin-left:0px;

}

.menu2 ul li.group {display:block; text-indent:10px; background:#666; color:#ff0; width:152px; padding:4px 0;}

.menu2 ul li a, .menu2 ul li a:visited {
float:left; 
display:block; 
text-decoration:none; 
background:#872121 url(images/menu2.gif) repeat-x; /* Schriftfarbe */
padding:0px 0px; 
line-height:25px; 
height:31px; 
}
.menu2 ul li a.startseite {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.sponsoren {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.spielbetrieb {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.teams {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.mitglieder {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.galerie {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.fanzone {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.verein {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.foerderverein {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.links {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li a.archiv {
background:#872121 url(images/startseite.gif);
width:85px;
}

.menu2 ul li:hover {width:auto;}

.menu2 ul li a:hover {background:#aaa url(images/sub2a.gif); color:#cc3333;}

.menu2 ul li:hover a {background:#aaa url(images/sub2a.gif); color:#cc3333;}

.menu2 ul li ul {
display: none;
}
.menu2 table {
margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;
}

/* specific to non IE browsers */
.menu2 ul li:hover ul {
display:block; position:absolute;top:29px; background:#aaa; margin-top:1px; left:0; width:152px;
}

.menu2 ul li:hover ul.scroller {
height:138px; width:172px; overflow:auto;}

.menu2 ul li:hover ul.endstop {
left:-90px;
}
.menu2 ul li:hover ul li ul {
display: none;
}
.menu2 ul li:hover ul li a {
display:block; background:#872121; color:#DD7575;height:auto;line-height:15px;padding:4px 16px; width:120px;
}
.menu2 ul li:hover ul li a.drop {
background:#888;
}
.menu2 ul li:hover ul li a:hover {
color:#ff0; background: #888;
}
.menu2 ul li:hover ul li a:hover.drop {
background: #888; color:#ff0;
}
.menu2 ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-70px; color:#000; left:152px; height:138px; width:172px; overflow:auto; background:#888;
}
.menu2 ul li:hover ul li:hover ul li a {background:#888;}
.menu2 ul li:hover ul li:hover ul li.group {width:152px; padding:5px 0;}


.menu2 ul li:hover ul li:hover ul.left {
left:-172px;
}
.menu2 ul li:hover ul li:hover ul li a:hover {background:#666; color:#0ff;}



/* specific to IE5.5 and IE6 browsers */
.menu2 ul li a:hover ul {
display:block;position:absolute;top:30px; t\op:29px; background:#aaa;left:0; marg\in-top:1px;
}
.menu2 ul li a:hover ul.scroller {
height:138px; overflow:auto;}

.menu2 ul li a:hover ul.endstop {
left: -90px;
}
.menu2 ul li a:hover ul li a {
display:block; color:#fff; height:1px; line-height:15px; padding:4px 16px; width:152px; w\idth:120px;
}
.menu2 ul li a:hover ul li a.drop {
background:#888; padding-bottom:5px;
}
.menu2 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; width:0;
}
.menu2 ul li a:hover ul li a:hover {
color:#ff0; background: #888;
}
.menu2 ul li a:hover ul li a:hover.drop {
 background: #888; color:#ff0;
}
.menu2 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:-69px; t\op:-70px; color:#000; left:152px; height:138px; width:170px; overflow:auto; background:#888;
}
.menu2 ul li a:hover ul li a:hover ul.left {
left:-170px;
}
.menu2 ul li a:hover ul li a:hover ul li a:hover {background:#666; color:#0ff;}


.left {clear:both;}
</style>

[Mich@el]

Hi webdesign86.
Also ehrlich gesagt... im FF sieht´s auch eher bescheiden aus. Und ist dazu noch schwer steuerbar. Du hast so viele Links in Deiner Navi. Es würde Sinn machen, hier noch eine Sidebar mit Navis einzubauen.
Wenn Du es so läßt, ist´s zu unübersichtlich.

Grüße
Michael

[webdesign86]

Zitat von Mich@el

Hi webdesign86.
Also ehrlich gesagt... im FF sieht´s auch eher bescheiden aus. Und ist dazu noch schwer steuerbar. Du hast so viele Links in Deiner Navi. Es würde Sinn machen, hier noch eine Sidebar mit Navis einzubauen.
Wenn Du es so läßt, ist´s zu unübersichtlich.

Grüße
Michael

Das Design der Navigation ist erst in der Anfangsphase. Später sollen alle Buttons auch mal in einer Reihe und nicht wie jetzt in 2 Reihen positioniert werden. So wie es jetzt ist kann ich das natürlich keinem zumututen Für eine Sidebar ist leider kein Platz, weil im linken Bereich die Logos der Sponsoren zu sehen sein sollen. Ich arbeite aber jetzt erst mal nicht daran weiter, solange bis sich das Problem mit dem Internet Explorer geklärt hat. Kannst du dir erklären, warum die Navigation im Internet Explorer falsch dargestellt wird?

[webdesign86]

Kann mir keiner weiterhelfen? Das wäre das erste mal in diesem Forum...

[Mich@el]

Du hast irgendwo einen Übertragungsfehler im Code stecken. Wenn ich den Code von Stu´s Seite 1 zu 1 in DW kopiere und mir dann im IE anschaue, ist alles im grünen Bereich.
Da müßtest Du noch einmal selbst ran und den Fehler suchen. Nimm Dir den Code noch einmal vor und füge nach und nach Deine Links dazu. Und dann immer wieder im IE anschauen und verleichen, ob´s noch paßt. So kommst Du am besten zur Fehlerquelle.

Grüße
Michael

[webdesign86]

Vielen Dank für den super Tipp!!! Der Fehler lag nicht im CSS sondern im html. Nun habe ich den Code nochmal neu reinkopiert und die Rubriken umbenannt und jetzt klappt alles einwandfrei!!! Vielen Dank nochmal Mich@el!!! Ich wusste doch, dass ich mich auf dieses geniale Forum verlassen kann

[Mich@el]

Na bitte schön!
Allerdings solltest Du schon noch mal ein wenig an der Optik der Navi und der "Sidebar" arbeiten.
Wenn zu wenig Platz dafür ist, dann mach´ den Content breiter. Hast doch noch Luft.
Sobald´se fertig ist, stellst sie uns einfach noch mal rein.

Grüße
Michael

[webdesign86]

Zitat von Mich@el

Na bitte schön!
Sobald´se fertig ist, stellst sie uns einfach noch mal rein.

Nach sehr viel Arbeit ist die Navigation nun so gut wie fertig (>). Allerdings bekomm ich die Unteruntermenus noch nicht in den Griff. Diese bestehen nämlich aus einem breiten Bereich (dunkelrot markiert) und einem sehr schmalen Bereich (knallrot) markiert. Zu sehen ist dies z.B. unter Spielbetrieb > 1. Mannschaft. Hier mal der entsprechende CSS-Quelltext zu den beiden Bereichen:

Schmaler Bereich:

.menu2 ul li:hover ul li:hover ul {
display:block;
position:absolute;
top:auto;
color:#000;
left:152px;
height:auto;
width:160px;
overflow: hidden;
background:#ff0000 /* schmale rechte Fläche der Unterunterrubrik */;
}

Breiter Bereich:

.menu2 ul li:hover ul li:hover ul li a.unteruntermenu {
display: block;
background:#740D01 /* breite Fläche derUnterunterrubrik */;
color: #cc3333;
width:152px;
height: auto;
line-height:20px;
text-align: left;
text-indent:2px;
font-weight: normal;
padding-left: 5px;
}

Nun könnte ich natürlich den schmalen Bereich auch dunkelrot machen, so dass er nicht mehr auffällt. Jedoch würde ich gerne das Unteruntermenu an den Ecken abrunden, indem ich im schmalen Bereich eine abgerundete Grafik einsetze. Doch die verschiedenen Unteruntermenus sind ja unterschiedlich hoch. Aus diesem Grund bräuchte ich verschiedene "classes". Also z.B.: .menu2 ul li:hover ul li:hover ul.spielbetrieb, .menu2 ul li:hover ul li:hover ul.verein usw. Allerdings weiß ich nicht genau, wo ich diese im HTML-Code eintragen soll. Dieser schaut für den Unterpunkt "1. Mannschaft" folgendermaßen aus:

<li>
<a class="spielbetrieb" href="#nogo">Spielbetrieb
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul><li>
<a class="drop" href="#nogo">1. Mannschaft
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul><li class="group">Vorbereitung</li>
<li>
<a class="unteruntermenu" href="#nogo">Ergebnisse / Spielplan</a>
</li>[...]

Oder fällt euch eine andere nicht so komplizierte Möglichkeit ein, das Unteruntermenu an den Ecken abzurunden?

[Mich@el]

Ich erkenne jetzt nicht Dein Problem. Die Ecken sind doch abgerundet!?

[webdesign86]

Sorry ich hab nicht gemerkt, dass noch die abgerundete Grafik, von der ich geschrieben habe, online war. Jetzt hab ich sie mal rausgenommen, wodurch die knallrote Hintergrundfarbe des schmalen Bereiches zum Vorschein kommt. Doch selbst wenn die abgerundete Grafik drin ist, schauen die Rundungen z.B. unter Verein > Eissporthalle nicht wirklich gut aus, weil dieses Unteruntermenu viel niedriger als Spielbetrieb > 1. Mannschaft ist. D.h. die abgerundete Grafik schaut immer nur bei einem Unteruntermenu gut aus, weil sie bzgl. der Höhe nur auf eines abgestimmt werden kann.

[His.Master's.Voice]

Zitat von webdesign86

Oder fällt euch eine andere nicht so komplizierte Möglichkeit ein, das Unteruntermenu an den Ecken abzurunden?

Eine Möglichkeit ganz ohne Grafik auszukommen zeigt Steffen im Labor auf seiner Website!
Ob dies nun eine Erleichterung sein kann und wie du es an unterschiedliche Höhen des Menüs anpassen kannst musst du durch experimentieren herausfinden. Halt auch ein bissl im Labor die Chemikalien mixen!




P.S.: Mein Kollege Mich@el wird mir langsam unheimlich - schreibt da oben was von "verleichen". Hört sich ja gruselig an.

[Mich@el]

Zitat von His.Master's.Voice

P.S.: Mein Kollege Mich@el wird mir langsam unheimlich - schreibt da oben was von "verleichen". Hört sich ja gruselig an.

Ja! Diesesmal kaufe ich mir anstatt einem "p" noch ein "g"!

[webdesign86]

So jetzt konnte ich zum Glück das Problem lösen! Bei dem Menu war ein Scrollbalken per CSS integriert, den ich nun löschen konnte. Somit kann ich jeder Rubrik/Unterrubrik die jeweilige abgerundete Grafik zuordnen, ohne den erwähnten lästigen roten schmalen Bereich daneben zu haben, welcher durch den Scrollbalken verursacht wurde.

@ Mich@el: Vielen Dank für deine erneute Hilfestellung!
@ His.Master's.Voice: Danke für den super Link-Tipp, auch wenn ich ihn letztendlich doch nicht anwenden musste