CSS Rahmen wird nicht mit IE angezeigt

[emonem]

Hi,
hab mal wieder ein Problem mit dem IExplorer.
Wenn du auf diesen Link gehst http://jaded-season.com/webprojects/dailyreason/medianeu.html siehst du eine Page mit Gallerievorschau bei der um jedes Bild ein roter Rahmen aufleuchten sollte wenn du über die Bilder gehst.
Habe ich mit CSS gemacht.
Mit dem Firefox und Opera klappt natürlich alles wunderbar aber beim IE wird nichts von dem Rahmen angezeigt. Vielleicht weißt du eine lösung hierdrauf wie ich den CSS Code verändern müßte damit es auch mit dem IE funktioniert.
Hätte außerdem gerne gewußt wie ich die Gallerie Popup fenster mittig auf dem Bildschirm zentrieren kann, da sie beim Firefox immer links oben ausgerichtet werden.
Danke.

 

[Maik]

Grundsätzlich gilt:

1. Eine ID kann in einem Dokument / einer Seite nur einmal vergeben werden. Du rufst die ID #icon aber sieben mal auf!
2. Die Pseudoklasse :hover lässt sich im IE nur auf die Links (a:hover), und nicht auf die übrigen HTML-Elemente, wie z.B. div#icon:hover, anwenden.

 

[emonem]

Hi,
hab das einfach mal ausprobiert ob es funktionieren würde wenn ich der Gallerievorschau einfach eine ID bezeichnung gebe und die dann im CSS teil mit einem hover effekt versehe.
Das funktioniert ja auch wie gesagt im Firefox und Opera, nur der IE streikt wie immer.
Vielleicht weiß jemand wie ich es anders machen könnte damit es auch im IE richtig dargestellt wird.

 

[Gumbo]

Da die Grafiken sowieso Inhalt eines a-Elements sind, könntest du die :hover-Pseudoklasse gleich auf das a-Element anwenden.

 

[emonem]

Genau das versuche ich zu verhindern.Wenn ich die Gallerievorschaubilder mit einer anderen Umrandungsfarbe machen will als alle anderen Linkfarben auf der Page würde es doch nicht klappen.
Habe jetzt versucht mit Klassen bei den ersten beiden Bildern zu arbeiten da man ja eine ID nur einmal vergeben sollte.
Aber irgendwie haut das auch nicht so richtig hin.
Irgendwas mache ich da falsch.
Hier der Link:

http://jaded-season.com/webprojects/dailyreason/medianeu2.html

Vielleicht weiß jetzt jemand wie ich die Grüne Borderfarbe um die Bilder bekomme und beim Hover soll diese in Blau dargestellt werden.Dies darf sich aber nur auf die Galleriebilder auswirken.

 

[Gumbo]

Probier mal Folgendes:

a.icon img {
	border:			2px solid #080;
}
a.icon:hover img {
	border-color:		#33f;
}

 

[Dr Dau]

Hallo!

Mit dem gleichem Problem habe ich mich heute auch befassen müssen.

Lösung CSS:

 <style type="text/css">
   img {border: 1px solid #000000;}
   img:hover {border: 1px solid #FFFFFF;}
   a:link {text-decoration: none; color: blue;}
   a:visited {text-decoration: none; color: blue;}
   a:hover {text-decoration: none; color: #FFFFFF;}
   a:active {text-decoration: none; color: blue;}
 </style>
   <!--[if IE]> 
	 <style type="text/css">
	   img {border: 0px;}
	   a.bild {border: 1px solid #000000;}
	   a.bild:visited {border: 1px solid #000000;}
	   a.bild:hover {border: 1px solid #FFFFFF;}
	   a.bild:active {border: 1px solid #000000;}
	 </style>
   <![endif]-->

Textlink:

<td><a href="index_2.html" target="_self">Seite 2</a></td>

Grafiklink:

<td><a href="./02/" class="bild" target="_blank"><img src="./01/images/thumb/08.jpg" alt="" title="&Ouml;ffne Seite 02 im neuen Fenster"></a></td>

Zu beachten ist, dass die Korrektur (if IE) nach den normalen CSS-Anweisungen kommen, da es sonst zu Darstellungsfehlern kommt.

Ach ja, und wie Du sicherlich siehst, wird der obere Rand vom Bildrahmen nicht angezeigt.
Dieses habe ich durch <table cellpadding="1"> gelöst.
Wenn Du den Bildrahmen stärker machst, musst Du cellpadding entsprechend auch erhöhen.
border:5px ----> cellpadding="5"

Gruss Dr Dau