CSS-Navigation funktioniert nicht im IE7

[Darklistener]

Hey Leute,

Ich habe heute eine Navigation nach folgendem Tutorial gebaut:


Anstatt die Navigation nebeneinander anzuordnen habe ich sie allerdings untereinander angeordnet.

Im Firefox funktioniert das Ganze auch, nur im IE7 bekomm ich weder einen hover-Effekt noch einen Link. Beim überfahren mit der Maus, ändert sich diese so, als wäre dort ein Text-Feld.

Außerdem funktioniert in beiden Browsern nicht, dass ich nur einen Teil der Grafik als Button verwende und der Rest sich zwar verändert, aber nicht anklickbar ist..


Hier mal mein Quelltext:

HTML:

<ul id="navigation">
            <li><a href="Link_Heimat" title="Heimat" class="li-Heimat">Heimat</a></li>
            <li><a href="Link_Kleidung" title="Kleidung" class="li-Kleidung">Kleidung</a></li>
            <li><a href="Link_Galerie" title="Galerie" class="li-Galerie">Galerie</a></li>
            <li><a href="Link_Unicate" title="Unicate" class="li-Unicate">Unicate</a></li>
            <li><a href="Link_Auftraege" title="Aufträge" class="li-Auftraege">Aufträge</a></li>
</ul>

CSS:

ul#navigation {
    display:block;
    height:363px;
    width:187px;
    margin:0px;
    }

ul#navigation li {
    display:block;
    text-decoration:none;
    text-indent:-9999px;
    width:70px;
    }

ul#navigation li a {
    display:block;
    text-decoration:none;
    text-indent:-9999px;
    width:70px;
    }

ul#navigation li a:hover {
    display:block;
    text-decoration:none;
    text-indent:-9999px;
    }

ul#navigation li a.li-Heimat {
    width:187px;height:88px;
    position:absolute;
    margin: 0 0 0 -39px;
    }

ul#navigation li a.li-Heimat:hover {
    background:transparent url(gfx/navi_on.png) no-repeat scroll -1px 0;
    width:187px; height:88px;
    position:absolute;
    margin: 0 0 0 -39px;
    }

ul#navigation li a.li-Kleidung {
    width:187px;height:70px;
    position:absolute;
    margin: 88px 0 0 -39px;
    }

ul#navigation li a.li-Kleidung:hover {
    background:transparent url(gfx/navi_on.png) no-repeat scroll -1px -88px;
    width:187px; height:70px;
    position:absolute;
    margin: 88px 0 0 -39px;
    }
...

Danke schonmal für eure Hilfe!

Gruß,
Till

 

[anoX]

AW: CSS-Navigation funktioniert nicht im IE7

Weia - wer hat denn so ein sch*** Tut gebaut.

Nunja .. auch, wenn es damals den Zweck erfüllt hat und bei mir in allen Browsern funktioniert hat .. hier eine einfachere und schönere Lösung:

Ich nehme an, Du hast 2 Grafiken wie z.B. diese beiden hier:





Deiner ul#navigation gibst Du die Hauptgrafik mit, also die Grafik mit dem Normalzustand (navi.jpg). Außerdem erhält sie den text-indent:-9999px und den list-style-type:none;.

ul#navigation {
    background:url("navi.jpg") no-repeat scroll 0 0 transparent;
    height:352px;
    list-style-type:none;
    width:187px;
    text-indent:-9999px;
}

ul#navigation li und ul#navigation li a speckst Du ab:

ul#navigation li {
    width:187px;
    height:88px;
}

ul#navigation li a {
    display:block;
    height:88px;
}

Um nun den hover-Status zu erreichen, gibst du den li eine Klasse und vergibst jeweils die Positionen der Grafik:

ul#navigation li a.li-heimat:hover {
    background:url("navi-hover.jpg") no-repeat scroll 0 0;
    width:187px;
    height:88px;
    }
    
ul#navigation li a.li-kleidung:hover {
    background:url("navi-hover.jpg") no-repeat scroll 0 -88px;
    width:187px;
    height:88px;
}

Im HTML bleibt alles wie gehabt:

<ul id="navigation">
   <li><a href="#" title="Heimat" class="li-heimat">Heimat</a></li>
   <li><a href="#" title="Kleidung" class="li-kleidung">Kleidung</a></li>
</ul>

Getestet im FF, IE7 und IE8. Bei Fragen, fragen.


EDIT: hab vorher fast ne Stunde den Fehler gesucht, aber ohne den kompletten Code nicht möglich. Ich nehme an, dass irgendwo was falsch gefloatet wurde, oder Abstände bzw. Höhenangaben nicht richtig sind.

Um das genau sagen zu können, bräuchte ich aber den kompletten Code.

So gehts nun aber auch und es ist um einiges schöner, wie ich denke.

LG

 

[kleeaar]

AW: CSS-Navigation funktioniert nicht im IE7

nur so am rande:
ich würde es vermeiden hovereffekte mit zwei verschiedenen graphiken zu erstellen...
denn bei leuten mit langsamem internet, z.b. über einen surfstick, kommts zum merkbaren nachladen der graphik...
guck dir dazu mal dieses kleine tutorial an:


grüße

 

[anoX]

AW: CSS-Navigation funktioniert nicht im IE7

nur so am rande:
ich würde es vermeiden hovereffekte mit zwei verschiedenen graphiken zu erstellen...
denn bei leuten mit langsamem internet, z.b. über einen surfstick, kommts zum merkbaren nachladen der graphik...
guck dir dazu mal dieses kleine tutorial an:


grüße

Die Variante nutzt man, wenn die Hintergründe der Button identisch sind und es sich um eine Systemschrift handelt.

Leider konnte man das hier aus dem Anfangspost nicht entnehmen, aber da mein altes Tut verwendet wurde, gehe ich von verschiedenen Grafiken aus.

 

[Darklistener]

AW: CSS-Navigation funktioniert nicht im IE7

Hey Leute,

danke schonmal für eure Hilfe!
Habe den Code mal so umgebastelt, wie anoX es erklärt hat.

Das Problem ist jetzt aber:
1. Meine Buttons sind nicht gleichhoch, d.h. wenn ich allgemein für einen Listenpunkt die Höhe 88px angebe stimmt es am Ende der Liste gar nicht mehr.
2. Wenn ich das margin: 0 0 0 -39px; aus der hover-Klasse rausnehme rutscht die Hover-Grafik im FF 39px nach rechts.

Oder ist es vielleicht doch einfacher/besser, wenn ich die Hover-Buttons einzeln vorliegen hab und als hover dann mit position:absolute; an die richtige Stelle rücke?

Edit: Das bringt nichts, mein Problem liegt darin, dass ich die Links nicht ausgerichtet bekomme, die Hover-Bilder hab ich jetzt mit postion:absolute; an die richtige Stelle gerückt nur die ursprünglichen Links, über die ich mit der Maus fahre um zu hovern sind an der falschen
Stelle...

Edit2: Ich habs! Hab jeden einzelnen Menüpunkt per position:absolute; ausgerichtet, also ähnlich wie schon am anfang. Nur jetzt hab ich in der CSS-Datei das "ul#navigation li" weggelassen und schon läufts in beiden Browsern perfekt. Weitere werd ich jetzt noch testen. Vielleicht nicht die schönste Möglichkeit aber es läuft!

Vielen vielen Dank.
Gruß, Till