Meine Navigation funktioniert bei IE nicht.

Rambow360 · 06.05.2010

Hi, habe ein Problem mit meiner Navigationsleiste. Unter Firefox funktioniert die Navi aber unter IE nicht. Hoffe Ihr könnt mir Helfen.

HTML:

<div id="nav_horizontal">
<ul id="nav" class="dropdown dropdown-horizontal">
<li class="cottbus"><center><font color="#fff">Cottbus</font></center>
<ul>
</li>
<li><a href="#">Chronik</a></li>
<li><a href="#">Historik</a></li>
<li><a href="#">Stadtgebiete</a></li>
<li><a href="#">Cottbusser Straßen</a></li>
<li><a href="#">Cottbusser Parks</a></li>
</ul>
</li>

<li class="sport"><center><font color="#fff">Sport</font></center>
<ul>
</li>
<li><a href="#">Fußball</a></li>
<li><a href="#" >Turnen</a></li>
<li><a href="#">Radsport</a></li>
<li><a href="#">Reitsport</a></li>
<li><a href="#">Wassersport</a></li>
</ul>
</li>


<li class="freizeit"><center><font color="#fff">Freizeit</font></center>
<ul>
</li>
<li><a href="#">Tierpark</a></li>
<li><a href="#">Planetarium</a></li>
<li><a href="#">Parkeisenbahn</a></li>
<li><a href="#">Messen</a></li>
<li><a href="#">Museen</a></li>
<li><a href="#">Events</a></li>
</ul>
</li>


<li class="kultur"><center><font color="#fff">Kultur</font></center>
<ul>
</li>
<li><a href="#">Staatstheater</a></li>
<li><a href="#">Puppenbühne</a></li>
<li><a href="#">Theater Native C</a></li>
<li><a href="#">Piccolo Theater</a></li>
<li><a href="#">Staatstheater</a></li>
<li><a href="#">Stadthalle</a></li>
<li><a href="#">Weltspiegel</a></li>
<li><a href="#">UCI Kinowelt</a></li>
<li><a href="#">weiter Veranstaltungsorte</a></li>
</ul>
</li>

<li class="bildung"><center><font color="#fff">Bildung</font></center>
<ul>
</li>
<li><a href="#">Cottbusser Schulen</a></li>
<li><a href="#">Volkshochschule</a></li>
<li><a href="#">Tech. Universität</a></li>
<li><a href="#">Fachhochschule</a></li>
<li><a href="#">Bibliotheken</a></li>
</ul>
</li>

<li class="multimedia"><center><font color="#fff">Multimedia</font></center>
<ul>
</li>
<li><a href="#">Gästebuch</a></li>
<li><a href="#">Bildergalerien</a></li>
<li><a href="#">Panoramen</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Link us</a></li>
<li><a href="#">Ausrüstung</a></li>
</ul>
</li>
</div>

HTML:

#nav_horizontal {
   position: absolute;
   top: 493px;
   left: 50%;
   height: 30px;
   width: 950px;
   padding: 11px 0px 0px 0px;
   margin-left: -475px;
}

#nav {
position:relative;
top: 1px;
}

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: left;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}



ul.dropdown li.rtl ul {
top: 100%;
right: 0;
left: auto;
}

ul.dropdown li.rtl ul ul {
top: 1px;
right: 99%;
left: auto;
}

ul.dropdown {
font-weight: bold;
}

ul.dropdown li {
padding: 10px 10px;
background-color: #1d1d1d;
color: ;
border-style: solid;
border-width: 0px 0px 1px 1px;
border-color: #FFF #FFF #FFF;
}



ul.dropdown a:link,
ul.dropdown a:visited { color: #FFF; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }



ul.dropdown ul {
width: 100%;
margin-top: 0px;
}

ul.dropdown ul li {
font-weight: normal;
}




ul.dropdown *.cottbus {
background-color: #1d1d1d;
background-position: 100% 50%;
background-repeat: no-repeat;
border: 0px;
width: 125px;
height: 20px;
}


ul.dropdown *.sport {
background-color: #1d1d1d;
background-position: 100% 50%;
background-repeat: no-repeat;
border: 0px;
width: 138px;
height: 20px;
}

ul.dropdown *.freizeit {
background-color: #1d1d1d;
background-position: 100% 50%;
background-repeat: no-repeat;
border: 0px;
width: 170px;
height: 20px;
}

ul.dropdown *.kultur {
background-color: #1d1d1d;
background-position: 100% 50%;
background-repeat: no-repeat;
border: 0px;
width: 146px;
height: 20px;
}

ul.dropdown *.bildung {
background-color: #1d1d1d;
background-position: 100% 50%;
background-repeat: no-repeat;
border: 0px;
width: 126px;
height: 20px;
}

ul.dropdown *.multimedia {
background-color: #1d1d1d;
background-position: 100% 50%;
background-repeat: no-repeat;
border: 0px;
width: 125px;
height: 20px;
}


ul.dropdown *.cottbus li:hover {
background-color: #414141;
color: #000;
border-width: 1px;
border-color: #FFF;
}

ul.dropdown *.sport li:hover {
background-color: #414141;
color: #000;
border-width: 1px;
border-color: #FFF;
}

ul.dropdown *.freizeit li:hover {
background-color: #414141;
color: #000;
border-width: 1px;
border-color: #FFF;
}

ul.dropdown *.kultur li:hover {
background-color: #414141;
color: #000;
border-width: 1px;
border-color: #FFF;
}

ul.dropdown *.bildung li:hover {
background-color: #414141;
color: #000;
border-width: 1px;
border-color: #FFF;
}

ul.dropdown *.multimedia li:hover {
background-color: #414141;
color: #000;
border-width: 1px;
border-color: #FFF;
}

ul.dropdown *.cottbus li {
border-style: solid;
border-width: 1px 1px 1px 1px;
background-color: ;
}

ul.dropdown *.sport li {
border-style: solid;
border-width: 1px 1px 1px 1px;
background-color: ;
}

ul.dropdown *.freizeit li {
border-style: solid;
border-width: 1px 1px 1px 1px;
background-color: ;
}

ul.dropdown *.kultur li {
border-style: solid;
border-width: 1px 1px 1px 1px;
background-color: ;
}

ul.dropdown *.bildung li {
border-style: solid;
border-width: 1px 1px 1px 1px;
background-color: ;
}

ul.dropdown *.multimedia li {
border-style: solid;
border-width: 1px 1px 1px 1px;
background-color: ;
}

FreddyX2 · 06.05.2010

AW: Meine Navigation funktioniert bei IE nicht.

Wird wohl an

Code:

#nav_horizontal{
position: absolute;
[...]
margin-left: -475px;
}

liegen. Der IE kommt mit negativen Marginwerten in Verbindung mit position:absolute nicht klar.

Falls das nicht das Problem löst, wäre eine Fehlerbeschreibung noch sehr hilfreich und, wenn vorhanden, ein live-Beispiel.

hubspe · 06.05.2010

AW: Meine Navigation funktioniert bei IE nicht.

Moin,

der IE6 kennt :hover nur in Verbindung mit a, deshalb ignoriert er li:hover und das Dropdown klappt nicht aus.

Rambow360 · 06.05.2010

Zum Fehler.

IE Klappt nicht auf und die Unterkategorien stehen untereinander, wie eine Liste, im Content.

hubspe schrieb:
Moin,

der IE6 kennt :hover nur in Verbindung mit a, deshalb ignoriert er li:hover und das Dropdown klappt nicht aus.

Was kann ich dagegen tun, dass er es erkennt???

hubspe · 06.05.2010

AW: Meine Navigation funktioniert bei IE nicht.

Rambow360 schrieb:
Was kann ich dagegen tun, dass er es erkennt???

Lies dir

Bitte kostenlos registrieren, damit du die Links siehst.

Ist ein horizontales Dropdown.
Mit etwas JS wird für den IE6 eine Klasse eingefügt.

Es gibt auch von Stu Nicholls eine reine CSS-Lösung, wo über Cond.Comm. Tabellen eingefügt werden.
Da sollte man aber schon genau wissen was man tut.

Rambow360 · 07.05.2010

AW: Meine Navigation funktioniert bei IE nicht.

hubspe schrieb:
Lies dir
Bitte kostenlos registrieren, damit du die Links siehst.

Ist ein horizontales Dropdown.
Mit etwas JS wird für den IE6 eine Klasse eingefügt.

Es gibt auch von Stu Nicholls eine reine CSS-Lösung, wo über Cond.Comm. Tabellen eingefügt werden.
Da sollte man aber schon genau wissen was man tut.

Sorry Hilft mir nicht weiter. Hast du noch eine andere Seite???

hubspe · 07.05.2010

AW: Meine Navigation funktioniert bei IE nicht.

Rambow360 schrieb:
Sorry Hilft mir nicht weiter. Hast du noch eine andere Seite???

nein, leider nicht.
Du mußt es halt durcharbeiten, verstehen und dann auf deinen F all anwenden.

Rambow360 · 07.05.2010

AW: Meine Navigation funktioniert bei IE nicht.

hubspe schrieb:
nein, leider nicht.
Du mußt es halt durcharbeiten, verstehen und dann auf deinen F all anwenden.

Ok, vielen Dank.