CSS-Problem mit IE8

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

Ich habe Links als verschiedenfarbige Buttons dargestellt, indem ich den Pseudoklassen Hintergrundbilder und eine passende Größe zugeordnet habe:

a.gray:link { background-image: url(images\gray.gif) ; width:32px ; height:20px ; }
a.gray:visited { background-image: url(images\gray.gif) ; width:32px ; height:20px ; }
a.gray:hover { background-image: url(images\gray_h.gif) ; width:32px ; height:20px ; }

Im HTML-Code wurde das dann so verwendet:

Bisher lief das auch problemlos, aber seit dem ich IE8 installiert habe, ist da überhaupt nichts mehr zu sehen. Selbst wenn ich in den Link irgend etwas hineinschreibe, werden die Hinterundbilder und Größenangaben völlig ignoriert. Der Kompatibilitätsmodus bringt leider auch keien Besserung.

Mit

a.gray:link { background-color:#808080 ; }
a.gray:visited { background-color:#808080 ; }
a.gray:hover { background-color:#c0c0c0 ; }

wird bei

Link

zumindest die entsprechende Hintergrundfarbe angezeigt. Der Fehler scheint also bei den Eigenschaften „background-image“, „width“ und „height“ zu liegen.

Möglicherweise habe ich das Ganze ja von vorn herein falsch angefasst und es hat bisher nur funktioniert, weil frühere Versionen des IE es mit dem Standard nicht so ganz genau genommen haben. Aber wie müsste es dann richtig aussehen?

Ich bin für jede Hilfe dankbar.

#2

Hi!

Das ist deines:
a.gray:link { background-image: url(images\gray.gif) ; width:32px ; height:20px ; }

Versuche mal das:
a.gray:link {
background-image: url(images/gray.gif);width:32px;height:20px;
}

Sieht ein wenig „sauberer“ aus und eventuell klappt das schon.
Achja, die anderen Zeilen natürlich auch anpassen, war nur eine Beispielzeile.

Viele Grüße
André

#3

Einen Fehler habe ich schon gefunden: Der Backslash wird nicht mehr akzeptiert. Anstelle von url(images\gray.gif) muss jetzt url(images/gray.gif) stehen.

Leere Links bleiben allerdings noch immer unsichtbar. Ich habe das Problem umgehen können, indem ich ein durchsichtiges GIF hineinlege:

Aber das kann doch nicht die Lösung sein!?

#4

Versuche mal das:
a.gray:link {
background-image: url(images/gray.gif);width:32px;height:20px;
}

Vielen Dank schon mal. Der Slash bringt jetzt zumindest das Hintergrundbild zum Laufen, aber die Größe wird noch immer ignoriert. Haben Links diese Eigenschaft möglicherweise gar nicht?

#5

Gute Frage, ich habe soetwas jedenfalls noch nicht gemacht.
Ich wäre wahrscheinlich zu faul zum suchen und würde die Grafik per Hand auf die Pixelgröße verkleinern und es dann aufrufen :wink:

#6

Gute Frage, ich habe soetwas jedenfalls noch nicht gemacht.
Ich wäre wahrscheinlich zu faul zum suchen und würde die
Grafik per Hand auf die Pixelgröße verkleinern und es dann
aufrufen :wink:

Die Grafik hat ja bereits die richtige Größe. Aber da es sich um ein Hintergrundbild handelt, hat das keinen Einfluss auf die Größe des dazugehörigen Objektes. Die muss man unabhängig davon festlegen. Wenn das bei Links nicht mit Style-Sheets gehen sollte (was ich mir eigentlich nicht vorstellen kann), dann ginge das nur über die Größe des Inhaltes. Das ist aber nicht nur umständlich, sondern scheint obendrein auch nicht ganz so einfach zu sein.

#7

display:inline-block ;

macht die Links sichtbar

#8

Moin,

die Antwort ist ganz einfach. width/height sind für Inline-Elemente ungültig. Das war schon immer so. Mit inline-block holst Du Dir dafür jetzt Probleme mit älteren IEs ins Haus. display:block dürfte hier helfen.

Und Backslashes waren auch noch nie der Verzeichnistrenner in URLs, das war schon immer nur der /. Wie bei allen Betriebssystemen außer Windows eben :wink:

Grüße,
-Efchen