:hover Beim Bildrahmen fehlt der obere Rand

[Kiecker]

Hallo Leute,
ich brauche mal eure Hilfe ich baue gerade eine kleine Site mit Thumbs.
Ich möchte dabeim überfahren mit der Maus ein kleiner Rand um die Bilder gezogen wird. Ich habe folgende Variante die bei firefox und IE funkt, jeden falls fast:

<style type="text/css">
img {border:0px}
a.bild {border:1px solid #000033;}
a.bild:hover {border:1px solid #FFFFFF;}
</style>

#000033 ist die Hintergrundfarbe der Seite.

Aufgerufen wird das ganze so:
<a class="bild" href="1"><img id="bild1_2" src="./images/thumbs/tn_$bereich1" alt="$title1" name="$bereich1" height="70" width="107" border="1">

Das Problem:
Beim IE fehlt dem Border der obere Rand, bei Firefox wird nur das untere drittel des Bildes eingerahmt.

Hat jemand eine Idee?

[Detlef G.]

Hallo Kiecker

<a class="bild" href="1"><img id="bild1_2" src="./images/thumbs/tn_$bereich1" alt="$title1" name="$bereich1" height="70" width="107" border="1">

Bitte poste hier bei Problemen zu CSS oder HTML immer den Code, der beim Browser ankommt!

Beim IE fehlt dem Border der obere Rand, bei Firefox wird nur das untere drittel des Bildes eingerahmt.

Border für Inlineelemente kann immer Probleme bereiten.
Warum gibst du nicht einfach dem Bild selbst den gewünschten Border?
Dabei könntest du auch die Klasse für die Bilderlinks einsparen, indem du den Nachfahrenselektor nutzt.

a img {border:1px solid #003;}  
a:hover img {border-color: #FFF;}  

IE braucht dann allerdings noch einen Wink mit dem Zaunpfahl, wie z.B.:

a {background-color: #003;}  
a:hover {background-color: #000033;}  

Auf Wiederlesen
Detlef