Internet Explorer interpretiert CSS-Code falsch

mrx52001

Hallo,
ich wollte bei einer HTML-Seite mit folgendem CSS-Code Links formatieren:

Code

<style type="text/css">
#buttons a:hover img {
 background-color:#C1D2EE;
 border:1px solid #316AC5;
 padding: 0px;
}
#buutons img {
	padding: 1px;
	border: none;
}
</style>

Alles anzeigen

Dieser Code soll einen Mouse-Over-Effekt realisieren. Die Bilder die als Link dienen sind in meinem Fall Gifs mit transparentem Hintergrund. Wenn man mit der Maus über diese Bilder fährt soll sich ihre Hintergrundfarbe ändern und sie sollen mit einem Rahmen dargestellt werden. Ich habe dies in Firefox und Netscape ausprobiert. Dort funktioniert es wunderbar. Der Internet Explorer Version 6.0 stellt den Mouse-Over-Effekt jedoch überhaupt nicht da. Erst, wenn man die Verschachtelung (#buttons a:hover img) aufhebt, funktioniert es. Aber das will ich ja eigentlich nicht.

Daher lautet meine Frage, ob ich einen Fehler gemacht habe oder ob dies ein Bug des IE ist. Und viel wichtiger: Gibt des eine browserunabhängige und W3C-konforme Lösung, die funktioniert?

Danke im vorraus,
Daniel

Ronald

Moin!

Ich weiß nicht, ob du dich jetzt nur hier im Forum verschrieben hast, oder ob es wirklich einmal "buutons" heißen soll?

Auch verstehe ich den Sinn der transparenten Gifs nicht so ganz, wenn du ohnehin Gifs einsetzen willst, dann mach die doch gleich in der richtigen Farbe.

Hovereffekt mit Gifs und CSS:

Code

<style type="text/css">
<!--
.button a:link {background-image:url(../images/normal.gif);background-repeat:no-repeat;}


.button a:hover {background-image:url(../images/hover.gif)};
-->
</style>

Da kämen dann noch Styles für die Schriftfarbe zu und natürlich ggf. Styles für a:visited, a:active und a:focus.
Du kannst aber statt Text auch transparente Gifs benutzen, auf denen dann der Text draufgepinselt ist, ganz wie du magst.
Am Besten geht das, wenn du für die Navigation eine blinde Tabelle benutzt, da reicht es dann aus, wenn du der Tabelle generell die Klasse 'button' zuweist, du brauchst es nicht bei jeder zelle wiederholen. Allerdings solltest du dann die Styles für "a:link" noch erweiteren mit den Angaben "height, width, display:block" sowie je nach Geschmak Rahmenfarben und -effekte für die Button.

Wenn du besser ohne Grafiken auskommen willst, dann läßt die die Definition für eine Hintergrundgrafik weg und setz dafür ein 'background-color' ein.

G.a.d.M.

Ronald

Was das "buutons" angeht, habe ich mich verschrieben.

Das Problem bei deiner Lösung ist, dass in diesem Fall soweit ich weiß, die Grafiken erst geladen werden, wenn der User auch tatsächlich mit der Maus darüber geht. Dies verursacht eine Verzögerung beim MO-Effekt, die ich vermeiden möchte. Außerdem erhöht es natürlich auch das Gesamt-Ladevolumen der Webseite. Daher also die transparenten Gifs. Da die entsprächenden Grafiken im übrigen nicht Teil einer Navigation sind, sonder eines Texteditors für Foren und ähnliches, halte ich auch die Background-Image Lösung für ungeeignet. Zum besseren Verständnis hier der Code:

Code

...
<td style="text-align:left;" id="buttons">
[url='javascript:insert('[b]','[/b]')'][img]b.gif[/img][/url]
[url='javascript:insert('[i]','[/i]')'][img]i.gif[/img][/url]
[url='javascript:insert('[u]','[/u]')'][img]u.gif[/img][/url]
[img]strich.gif[/img]
[url='javascript:insert('[left]','[/left]')'][img]left.gif[/img][/url]
[url='javascript:insert('[center]','[/center]')'][img]center.gif[/img][/url]
[url='javascript:insert('[right]','[/right]')'][img]right.gif[/img][/url]
[img]strich.gif[/img]
[url='javascript:insert('[listnum]','[/listnum]')'][img]listnum.gif[/img][/url]
[url='javascript:insert('[list]','[/list]')'][img]list.gif[/img][/url]
[url='javascript:insert('[indent]','[/indent]')'][img]indent.gif[/img][/url]
[img]strich.gif[/img]
[url='javascript:insert('[link]','[/link]')'][img]link.gif[/img][/url]
[url='javascript:insert('[quote]','[/quote]')'][img]quote.gif[/img][/url]
</td>
...

Alles anzeigen

So wie die Webseite in Firefox und Netscape angezeigt wird, gefällt sie mir eigentlich sehr gut. Deswegen möchte ich eigentlich keine Maßnahmen ergreifen, die das Layout verändern würden. Außerdem kann ich auf Hintergrundbilder keinen Link setzen.

Ronald

Ohje - was machst du da denn ?

Bei abgeschalteten Javascript geht auf deiner HP ja gar nichts mehr.
Dann mach doch auch gleich die Hover-Effekte in Javascript - was
nützen dir sonst Hover, wenn die Links dafür nicht anklickbar sind ?

Ich würde das gerne mal komplett sehn = URL

Zu deinem letzten posting: Du wirfst da eine ganze Menge Dinge durcheinander, die zusammengfaßt völlig unlogisch sind.

Zitat von Anonymous

Das Problem bei deiner Lösung ist, dass in diesem Fall soweit ich weiß, die Grafiken erst geladen werden, wenn der User auch tatsächlich mit der Maus darüber geht. Dies verursacht eine Verzögerung beim MO-Effekt, die ich vermeiden möchte.

Wenn du für jeden Link eine andere Grafik benutzt, dann ist diese Aussage richtig und man sollte die Grafiken schon vorladen, sonst kommt es beim ersten hover zu einer kurzen Verzögerung. Bei anschließenden Hover sind die Grafiken jedoch bereits im Cache und du siehst keine Verzögerung mehr.

Zitat von Anonymous

Außerdem erhöht es natürlich auch das Gesamt-Ladevolumen der Webseite. Daher also die transparenten Gifs.

Auch deine transparenten Gifs müssen ja alle geladen werden, da ist kein wirklichen Unterschied ob farbig oder transparent.

Zitat von Anonymous

Da die entsprächenden Grafiken im übrigen nicht Teil einer Navigation sind, sonder eines Texteditors für Foren und ähnliches, halte ich auch die Background-Image Lösung für ungeeignet.

Häh?
Es geht hier doch einzig und allein um den Hovereffekt - was du damit steuerst, ist dem Effekt doch egal.

Zitat von Anonymous

Außerdem kann ich auf Hintergrundbilder keinen Link setzen

Mag sein, daß du es nicht kannst - generell geht es aber (mit einem kleinen Trick und ohne JS).

G.a.d.M.

Ronald

mrx52001

Ich habe das ganze unter http://www.jugendarbeit-online.de/test/texteditor.php online.

Danke, dass du dir die Mühe damit machst, aber ich habe echt keinen Plan, warum das im IE nicht geht.

Ronald

So, ich hab das alles mal etwas nach meinem System geordnet und nun klappt es auch im IE: http://web306.server3.webplus24.de/testseiten/jug…texteditor.html

Wenndu es haben willst, dann kanst du es unter http://web306.server3.webplus24.de/testseiten/jug…/texteditor.rar herunterladen (33kb) - da sind dann zwar die Grafiken noch einmal dabei, aber ich habe sie teilweise in einen zusätzlichen Unterordner gelegt. Das dient zwar nicht der Funktion, aber der Übersicht.

Schau es dir an und dann gib feedback

G.a.d.M.

Ronald

pro-Stofftier.de

Der Download Link geht net, nur so als Info

edit: geht doch

Tags