/(BROWSER) IE 5.0 und Bilder in Links

[MudGuard]

Hi,

ich habe da ein kleines Problem mit dem IE 5.0.
Ich habe Links, die Bilder enthalten - außerdem haben die Links auch noch padding (hab ich hier für Testzwecke auf 50px erhöht).

In anderen Browsern ist das auch kein Problem - aber im IE 5.0 funktionieren die Links nicht richtig.
Nur der Padding-Bereich ist als Link aktiv (Mauszeiger ist die Hand mit ausgestrecktem Zeigefinger, Link läßt sich durch Klick ins Padding aufrufen).
Das Bild selbst ist im IE 5.0 nicht anklickbar und der Mauszeiger ist der normale Pfeil.

Hier die aufs Wesentliche reduzierte Testseite sowie das CSS für Testseite

Kennt jemand das Problem? Oder noch besser eine Lösung?

Vielen Dank im Voraus!

cu,
Andreas

[Cyx23]

Hallo,

Oder noch besser eine Lösung?

so hat es bei mir schließlich geklappt:

html + body li a img {position:relative;z-index:-1;}

Grüsse

Cyx23

[Gunnar Bittersmann]

Cyx23,
Respekt. Wie kommt man auf solche Hacks?

html + body li a img {position:relative;z-index:-1;}

^^^^^^^^^^^
Das versteht der IE doch gar nicht.

img {} reicht aus, oder eben ul#Hauptnavigation img {}

Gruß,
Gunnar

[Cyx23]

Hallo Gunnar,

Respekt. Wie kommt man auf solche Hacks?

nach einigem Training mit Netscape und Opera wissen wonach man beim IE suchen muss?

html + body li a img {position:relative;z-index:-1;}
   ^^^^^^^^^^^
Das versteht der IE doch gar nicht.

Sonst würde er wenn ich den Selektor richtig verstehe die Anweisung auch nicht ausführen, denn body folgt nicht auf html sondern
ist verschachtelt, also eine CSS Weiche für IE 4 - 5.0.

Grüsse

Cyx23

[MudGuard]

Hi,

html + body li a img {position:relative;z-index:-1;}

also das Bild sozusagen in den Hintergrund befördern?
Hm. Auf der Testseite funktioniert es.

Danke schon mal dafür.

Wie kommt man auf sowas?

Ich hab das mal mit
* html ul#Hauptnavigation a img {position:relative;z-index:-1;}
ins Stylesheet gesetzt (aber noch nicht hochgeladen, s.u.) - damit beeinflußt das Nicht-IEs nicht.

Aber da hab ich wohl etwas zu weit "aufs Wesentliche" reduziert.

Denn die tatsächlichen Links haben eine Hintergrundfarbe.
Und damit ist dann das Bild nicht mehr sichtbar, da es hinter der Hintergrundfarbe liegt.
(hab die http://www.andreas-waechter.de/[e-mail] um die Hintergrundfarbe ergänzt und hochgeladen - die Hintergrundfarbe ändert sich dann auch noch bei :visited, :hover usw., aber DAS sollte keine Rolle mehr spielen)

Mist, verflixter!

cu,
Andreas

[Cyx23]

Hallo,

Denn die tatsächlichen Links haben eine Hintergrundfarbe.
Und damit ist dann das Bild nicht mehr sichtbar, da es hinter der Hintergrundfarbe liegt.

wenns etwas rustikaler sein darf:

html + body li a {
background-image:url(IRL.png); background-repeat:no-repeat; background-position:50px 50px;
}

Aber eleganter gehts auch, da könntest du z.B. (ggf. nur für den IE 5) die Farbe und padding weglassen,
und anschliessend einen 50px dicken Rahmen verwenden:

img { background-color:#FC6; border:50px solid #FC6; }

Grüsse

Cyx23

[MudGuard]

Hi,

Denn die tatsächlichen Links haben eine Hintergrundfarbe.
Und damit ist dann das Bild nicht mehr sichtbar, da es hinter der Hintergrundfarbe liegt.
wenns etwas rustikaler sein darf:
html + body li a {
background-image:url(IRL.png); background-repeat:no-repeat; background-position:50px 50px;
}

Hm. Damit schlepp ich die Information, welche Bilder verwendet werden, auch noch im CSS mit. Da jeder Link natürlich sein eigenes Bild hat, müßte ich auch noch IDs für die Links vergeben ...

Aber eleganter gehts auch, da könntest du z.B. (ggf. nur für den IE 5) die Farbe und padding weglassen,
und anschliessend einen 50px dicken Rahmen verwenden:
img { background-color:#FC6; border:50px solid #FC6; }

Das gefällt mir schon besser ...
Werd mal rumexperimentieren.

Danke jedenfalls!

cu,
Andreas

[Cyx23]

Hallo Andreas,

img { background-color:#FC6; border:50px solid #FC6; }

Das gefällt mir schon besser ...
Werd mal rumexperimentieren.

Danke jedenfalls!

eine Variante hab ich noch, mit CSS Weiche für IE 5 mit media all um auch IE 4 abzuhalten:

@media all{ * html > body #Hauptnavigation a{display:inline;width:auto;height:auto;}}
@media all{ * html > body #Hauptnavigation img{border:50px solid #FC6;}}

Der IE 5.0 liegt wohl nach webhits.de bei rund 4 %, Netscape 4 bei 3 % und IE 4 bei 0,5.
Dafür soll AOL wohl eine eigene IE Variante bekommen, mal schauen ob die sich dann wieder etwas anders verhält :-)

Grüsse

Cyx23

[MudGuard]

Hi,

Das gefällt mir schon besser ...
Werd mal rumexperimentieren.

Das hat auch funktioniert.

Der IE 5.0 liegt wohl nach webhits.de bei rund 4 %, Netscape 4 bei 3 % und IE 4 bei 0,5.

Riesen-Aufwäand betreibe ich für die nicht - aber wenn es mit kleinem Aufwand geht, die IE 5.0 mitzuversorgen, wollt ich das doch machen.
Vor allem weil alles andere im IE 5.0 zumindest funktioniert (nur ein bißchen anders ausguckt, aber da ich kein Pixelpfriemler bin, ist mir das egal, wenn irgendwelche Abstände mal ein paar Pixel größer sind im IE 5.0 als in anderen Browsern...)

cu,
Andreas

[Axel Richter]

Hallo,

Ich habe Links, die Bilder enthalten - außerdem haben die Links auch noch padding (hab ich hier für Testzwecke auf 50px erhöht).
In anderen Browsern ist das auch kein Problem - aber im IE 5.0 funktionieren die Links nicht richtig.
Nur der Padding-Bereich ist als Link aktiv (Mauszeiger ist die Hand mit ausgestrecktem Zeigefinger, Link läßt sich durch Klick ins Padding aufrufen).

Hast Du es schon mit Außenrändern für das Bild, statt padding für das A-Element probiert? Etwa so:

<ul style="list-style-type:none; margin:0; padding:0;">
<li><a href="#" style="display:block; width:60px; padding:50px; border:1px solid black; background-color:#00AEAD;"><img src="bilder/home.gif" alt="Hauptseite" style="height:77px; width:60px; border:0 none;"></a></li>

<li>vs.</li>

<li><a href="#" style="display:block; width:160px; border:1px solid black; background-color:#00AEAD;"><img src="bilder/home.gif" alt="Hauptseite" style="margin:50px; height:77px; width:60px; border:0 none;"></a></li>
</ul>

Ich habe in Moment keinen IE5 zum Testen hier, deshalb: ohne Gewähr ;-))

viele Grüße

Axel