[ERLEDIGT] Links werden nur in IE angezeigt/erkannt

[santadani]

Hallo HTML-Experten und Expertinnen,

Als fortgeschrittener Anfänger möchte ich gerne bei einem aus meiner Sicht mittelgrossen Mysterium um eure Hilfe bitten.
Ich betreibe einen kleinen Online-Shop und bin gerade dabei, dem Design einen weiteren Schliff zu verpassen. Konkret geht es um Folgendes:

Sobald man die Startseite verlässt und so durch den Shop surft, zeigt am oberen Rand eine horizontale Navigation an, wo dass man sich aktuell gerade befindet. () Ebenfalls hat diese Navigation den Zweck, direkt einen odere mehrere Schritte zurück zu gehen. Hierfür habe ich diese mit Links versehen. Nun verhält es sich so, dass im Internet Explorer diese Links auch einwandfrei funktionieren. Leider zeigt aber weder Firefox noch Safari diese Links an. Dort scheint es als wäre es ganz banaler Text.

Wo steckt hier der Wurm drin? Ich hab mal einen Auszug des Codes unten eingefügt. Falls weitere Infos gebracht werden, sehr gerne.
Ich danke bereits dafür, dass ihr das hier durchgelesen habt. Über Hilfe wäre ich mächtig froh.

Vielen Dank.
Gruss Dani

<div id="bread_crumb">
<div class="bread_outer">
<div class="bread_left"></div>     
<div class="bread_links"><div class="bread_link"><a class="breadNavigation" href="http://www.buyland.ch/shop/de/index.html"  title="Startseite">Startseite</a></div>
<div class="bread_middle"></div> <div class="bread_link"><a class="breadNavigation" href="http://www.buyland.ch/shop/de/Smartphone-Zubehoer.html"  title="Smartphone Zubehör">Smartphone Zubehör</a></div>
<div class="bread_middle"></div> <div class="bread_link"><a class="breadNavigation" href="http://www.buyland.ch/shop/de/Smartphone-Zubehoer/Huellen-Taschen-Cover.html"  title="Hüllen, Taschen, Cover">Hüllen, Taschen, Cover</a></div>
<div class="bread_middle"></div> <div class="bread_link"><a class="breadNavigation" href="http://www.buyland.ch/shop/de/Smartphone-Zubehoer/Huellen-Taschen-Cover/OZBO-Ledertaschen.html"  title="OZBO Ledertaschen">OZBO Ledertaschen</a></div>
<div class="bread_middle"></div> <div class="bread_link"><a class="breadNavigation" href="http://www.buyland.ch/shop/de/Smartphone-Zubehoer/Huellen-Taschen-Cover/OZBO-Ledertaschen/Ovin.html"  title="Ovin">Ovin</a></div>
<div class="bread_middle"></div> <div class="bread_link"><a class="breadNavigation" href="http://www.buyland.ch/shop/de/Smartphone-Zubehoer/Huellen-Taschen-Cover/OZBO-Ledertaschen/Ovin/OZBO-Ledertasche-Ovin-Lift-M-Gruen-118x60x11mm.html"  title="OZBO Ledertasche Ovin Lift M Grün 118x60x11mm">OZBO Ledertasche Ovin Lift M Grün 118x60x11mm</a></div>
<div class="bread_middle"></div> </div>
<div class="bread_right"></div>
</div>
</div>

#bread_crumb  {  
    float: left;
    height: 33px;
    margin: 5px;
    position: relative;
    width: 990px;
}

#bread_crumb .bread_outer  {
    background-image: url("../img/bread_bg1.png");
    background-repeat: repeat-x;
    float: left;
    height: 23px;
    margin: 5px;
    position: relative; 
}

#bread_crumb .bread_left { background-image:url(../img/bread_left.png); width: 12px; height: 23px; background-repeat: no-repeat; float: left;}
#bread_crumb .bread_middle { background-image:url(../img/bread_split.png); width: 12px; height: 23px; background-repeat: no-repeat; float: left;}
#bread_crumb .bread_link {  
    float: left;
    margin-left: 11px;
    margin-right: 5px;
}

#bread_crumb .bread_links { float: left; }
#bread_crumb .bread_links div:first-child { margin-left: 2px;}
#bread_crumb .bread_links div:last-child { background-image:none; width: 1px;}
#bread_crumb .bread_right { background-image:url(../img/bread_right.png); width: 11px; height: 23px; background-repeat: no-repeat; float: right;}
#bread_crumb a.breadNavigation { line-height: 23px; color: #2B4E72; text-decoration: none; font-size: 10px;}
#bread_crumb a.breadNavigation:hover { color: red;}

.breadcrumb a {
    color: #000000;
    display: inline-block;
    font-weight: normal;
    text-decoration: none;
}

.breadcrumb {
    background-image: url("../img/bread.jpg");
    background-position: left top;
    background-repeat: repeat-x;
    font-size: 100%;
    margin-top: 0;
    padding: 15px 0 20px 10px;
    width: 990px;
    color: #000000;  
}

.breadcrumb span {
    padding: 0 6px; 
}

.breadcrumb>span:first-child{
    padding-left: 0px !important; display: none;
}

 

[threadi]

Das Element mit der Klasse .NaviTop liegt über dem Navigationspfad. Dadurch sind die Links auch nicht anklickbar. Da .NaviTop absolut positioniert ist und keine für mich erkennbaren Inhalte hat, würde ich spontan sagen: entferne das Element.

Dein HTML-Code ist btw. auch nicht ganz valide. Auf einigen Seiten gibt es auch Probleme mit Attributen, wenn diese Artikelnamen beinhalten die wiederum doppelte Anführungszeichen haben. Das solltest Du ggfs. noch korrigieren, da das auch zu Fehldarstellungen führen kann.

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.

 

[santadani]

Guten Morgen,

Vielen vielen Dank. Das hat mein Problem gelöst. .NaviTop brauche ich schon, weil es auf der Startseite die Navigation enthält. Aber ich hab das jetzt mit einem z-index gelöst.
Super dass du dir den Rest auch gleich angeschaut hast. Ich werde das natürlich auch korrigieren.

Danke und ein schönes Wochenende.
Dani