Link in Firefox nur teilweise funktionsfähig, in IE8 korrekt.

[godzilla]

Hallo zusammen

Ich habe für eine Webseite 3 Buttons als Links eingefügt. Wärend im IE8 alles problemlos funktioniert, habe ich im Firefox Probleme :
Button 1 = kein Link, Button 2 = Link nur in den unteren 10 - 20 %, Button 3 = Kompletter Button als Link.

Hier der Code aus der Webseite :

<div id="footer">
  <div id="footer-center">
   <div id="footer-back"><a href="index.htm"><img src="pic/back_button.jpg" /></a></div>
   <div id="footer-home"><a href="index.htm"><img src="pic/home_button.jpg" /></a></div>
   <div id="footer-vor"><a href="index.htm"><img src="pic/vor_button.jpg" /></a></div>
  </div>
 </div>

Ich habe hier zur Vereinfachung 3x den gleichen Link eingefügt, so ist es auch leichter Tippfehler zu finden

Der CSS-Code dazu :

#footer-center {
width: 1000px;
height:88px;
background: #ffffff url(../pic/footer.jpg) 50% 0px;   <- das Bild enthält den Rahmen
background-repeat: no-repeat;
margin: 0px auto;
padding: 0px;
}

#footer-back {
position:absolute;
margin:0px;
padding:25px 0px 0px 430px;
width: 30px;
height:30px;
z-index:2;
}

#footer-home {
position:absolute;
margin:0px;
padding:22px 0px 0px 480px;
width: 40px;
height:40px;
z-index:2;
}

#footer-vor {
position:absolute;
margin:0px;
padding:25px 0px 0px 540px;
width: 30px;
height:30px;
z-index:2;
}

Zur Erklärung : Im Footer sollen bei Bedarf ein vor / zurück - Button und ein 'Home'-Button zu sehen sein. Die Buttons liegen in der aufgeführten Reihenfolge am Bildschirm. Da nicht immer alle drei Buttons zu sehen sein werden, habe ich für jeden Button eine eigene Div - Anweisung geschrieben. Die Buttons erscheinen wahlweise an ihren Plätzen und in IE8 funktioniert alles einwandfrei. Nur in Firefox das Problem, das der erste Button überhaupt nicht als Link funktioniert und der zweite Button von etwa der Mitte zwischen Rand und Button bis unter das Häuschen. Nur der dritte Button ist ganzflächig als Link anklickbar.
Etwas klein, aber wohl zu erkennen.

Da Firefox ein ziemlich beliebter Browser ist, würde ich es schon gerne sehen, das die Seite auch dort richtig läuft.
Nur fällt mir kein Fehler mehr auf, habt Ihr Verbesserungsvorschläge ??


Danke im voraus
Detlef

 

[threadi]

Ich glaube kein Browser zeigt das richtig an - es sieht für dich nur so aus. Du positionierst hier Elemente absolut, beachtest aber nicht in welchem Rahmen dies geschieht. Das umgebende #footer-center bräuchte vermutlich noch ein "position: relative;" damit Du diese absolut positionierten Elemente auch wirklich an die richtigen Stellen bekommst. Weiterhin sollten bei absolut positionierten Elementen auch immer die Positionen (top/left, bottom/right) angegeben werden - die fehlen bei dir ebenfalls, was auch zu Problemen führen kann. Das padding kannst Du, wenn Du das hast, dann vermutlich weglassen.

Moderation: Verschoben von HTML zu CSS.

 

[godzilla]

Hallo threadi

Deine Änderungen habe ich getestet, aber die Fehlfunktion besteht immer noch.

Mittlerweile habe ich eine Lösung des Problemes gefunden:

<div id="footer">
  <div id="footer-center">
   <div id="footer-vor"><a href="index.htm"><img src="pic/vor_button.jpg" /></a></div>
   <div id="footer-home"><a href="index.htm"><img src="pic/home_button.jpg" /></a></div>
   <div id="footer-back"><a href="index.htm"><img src="pic/back_button.jpg" /></a></div>
  </div>
 </div>

Es ist mir schon peinlich, aber ich habe wirklich nur die REIHENFOLGE der Buttons geändert. Angezeigt wird natürlich alles weiterhin korrekt, aber nun sind alle 3 Buttons vollflächig als Link nutzbar. Sowohl in IE8 als auch in Firefox.


:shock: Ich habe nicht die geringste Ahnung warum es in der umgekehrten Reihenfolge klappt, in der natürlichen Folge aber nicht. Schließlich werden alle Buttons absolut positioniert, stehen also in beliebiger Kombination immer an der gleichen Stelle.


Gruß Detlef

 

[Space Vampire]

:shock: Ich habe nicht die geringste Ahnung warum es in der umgekehrten Reihenfolge klappt, in der natürlichen Folge aber nicht. Schließlich werden alle Buttons absolut positioniert, stehen also in beliebiger Kombination immer an der gleichen Stelle...

Weil threadi recht hat!
Das Problem liegt ausschließlich an der absoluten Positionierung mit drei mal dem gleichen z-index.
Durch die Änderung der Reihenfolge ist nucn der kürzeste Button nach oben gekommen und der längste nach unten.
Vorher hat der Längste die beiden Kürzeren überlagert und unklickbar gemacht.
Den gleichen Efekt hättest du auch durch abweichende z-inizes erreicht.

 

[godzilla]

Durch die Änderung der Reihenfolge ist nun der kürzeste Button nach oben gekommen und der längste nach unten.
Vorher hat der Längste die beiden Kürzeren überlagert und unklickbar gemacht.
Den gleichen Efekt hättest du auch durch abweichende z-inizes erreicht.

Nö, stimmt leider nicht ! Die Buttons sind 30x30 bzw. 40 x 40 px groß und haben jeweils 20px 'Luft' dazwischen. Die Buttons überdecken sich NIRGENDWO sondern sind alle komplett sichtbar. Ein unterschiedlicher Z-Index hat hier überhaupt keinen Effekt , da sich die Buttons eben NICHT überdecken. Denn durch den gleichen z-index können sich die Buttons nicht überlagern und durch die unterschiedlichen Positionen berühren sich die Buttons nicht einmal . Ich habe es ausprobiert : Die alte Reihenfolge und unterschiedliche z-indicies (2,3,4) . Beim Aufruf im Firefox EXAKT das gleiche Verhalten wie mit drei mal z-index= 2.

Deine Aussage, das der 'Längste die Kürzeren überlagern' würde, wäre außerdem bei einer Umstellung der Reihenfolge genauso gegeben, an der CSS habe ich ja nichts geändert. Ich rufe die Buttons jetzt nur in anderer Reihenfolge auf. Aber der Größte ist immer noch in der Mitte und müßte nach Deiner Aussage nun den anderen Button überdecken, das tut er aber nicht.

Eigendlich ist das Problem für mich erledigt und der Beitrag könnte geschlossen werden ....

 

[Space Vampire]

Tut mir leid, aber du redest Unsinn.
Auf die von dir angegebenen Buttenabmessungen musst du die Paddings aufrechnen.
Ich habe es im übrigen mit deinem eigenen Code getestet!
Zur Veranschaulichung mal ohne Bilder und mit Hintergrundfarben
Und hier mit abweichenden z-indizes

Wenn du nur jemanden suchst, der dir deine Probleme löst, du aber dabei nichts lernen willst, musst du es nur sagen. Dann halte ich mich aus deinen Beiträgen raus.
Ich verschwende nicht so gerne meine Zeit!

 

[godzilla]

Hallo Space-Vampire

Sorry, wenn es so blöde rüber gekommen ist. Selbstverständlich möchte ich in erster Linie was lernen. Ich bin nur aus Euren Antworten nicht schlau geworden.
Mir war nämlich nicht klar, das bei den Abmessungen das Padding aufgerechnet wird, konnte so die Erklärungen nicht nachvollziehen und hab nach meiner Abhilfe aufgegeben den Grund zu verstehen.
Jetzt, mit Deinem Farbbeispiel, verstehe ich das dann doch auch. Und es passt natürlich exakt zu dem von mir ausgetesteten Verhalten der Buttons.
Eigendlich hat mich das Verhalten des IE8 auf den Holzweg gebracht. Den hat die Überlagerung nämlich nicht interessiert und ich konnte selbst den untersten Button anklicken !

Noch eine Frage zum Schluß : Wenn ich jetzt anstelle des Paddings die von 'threadi' vorgeschlage Formatierung über top/left nutzen würde, wären dann die Überdeckungen nicht vorhanden oder müßte ich dann auch noch den z-index verändern??

Gruß Detlef

 

[threadi]

Solange sich die Elemente überdecken, brauchst Du auch einen z-index um zu bestimmen welches Element oben und welches unten ist. Da die Buttons anklickbar sein sollten, sollten sie sich aber gar nicht überdecken.

 

[godzilla]

Hallo threadi

Leider war es mir nicht bekannt, das das Padding ebenfalls Platz belegt. Erst durch die Zeichnung von Space Vampire habe ich Eure Erklärungen überhaupt verstanden.

Nochmal Danke für Tipps und Erklärung !!

Gruß Detlef