Border um Bild bei a:hover - Problem im Mozilla

[bendis]

Hallo, ich möchte eine border um ein Bild legen, dass als Link funktionieren soll, d.h. bei a:hover soll sich die Link-Definition so ändern, dass ein eine unsichtbare (weisse) border in eine solid border ändert.

Das fumtioniert im IE auch schon ganz gut, aber im Mozilla und Opera ist die border nicht vollständig sichbar...

Hier ein kleines Beispiel:

http://citizen-k.de/testarea/mouseover.htm

Weiß jemand Rat?

Danke im vorraus!

Hier meine stylesheet:

<style type='text/css'>
<!--

A.Pic:link, A:active
{
	border: solid 1px #ffffff;
	margin: 5px;
	padding: 5px;
	width: 96px;
	height: 72px;
}

A.Pic:visited
{
	border: solid 1px #ffffff;
	margin: 5px;
	padding: 5px;
	width: 96px;
	height: 72px;
}


A.Pic:hover
{
	border: solid 1px #666666;
	margin: 5px;
	padding: 5px;
	width: 96px;
	height: 72px;
}

-->
</style>

 

[Helge]

2 tips die evtl. nicht ganz was mit dem problem zu tun haben:
1. padding: 5 pix ( mit i )
2. mozilla mag allgemein den dashed border stil ned so
probiers mal mit solid, wenn das hinhaut dann kannste das mit dem dashed knicken

 

[Coranor]

Ich weiss nicht, aber mir sind an Deinem css-code zwei Sachen aufgefallen:

A.Pic:link, A:active {
	border:dashed 1px #ffffff;
	margin: 5px;
	padding: 5pix;
	width: 96px;
	height: 72p;
}

Sollte es nicht so sein:

A.Pic:link, A:active {
	border:dashed 1px #ffffff;
	margin: 5px;
	padding: 5px;
	width: 96px;
	height: 72px;
}

Das zieht sich durch Deinen ganzen code durch, könnte ja daran liegen.

 

[bendis]

Original geschrieben von Coranor
Ich weiss nicht, aber mir sind an Deinem css-code zwei Sachen aufgefallen:

A.Pic:link, A:active {
	border:dashed 1px #ffffff;
	margin: 5px;
	padding: 5pix;
	width: 96px;
	height: 72p;
}

Sollte es nicht so sein:

A.Pic:link, A:active {
	border:dashed 1px #ffffff;
	margin: 5px;
	padding: 5px;
	width: 96px;
	height: 72px;
}

Das zieht sich durch Deinen ganzen code durch, könnte ja daran liegen.

Danke, da hast du natürlich recht! Das war schlammpig, habe es gefixt, und die border jetzt auch solid gemacht, aber es ändert sich nichts grundlegendes...

Danke für den Hinweis!

 

[bendis]

@Helge:

Ich hab's mit 'pix' probiert und auch mit solid - ändert nichts.

Allerdings habe ich festgestellt, das der sichtbare bereich der border im Mozilla zunimmt, wenn ich z.B. padding-top: 40px; schreibe. Das macht sich aber leider auch im IE bemerkbar, und da ist es dann zu viel.

 

[bendis]

Ich habe inzwischen eine Lösung gefunden!

Und zwar habe in hinzugefügt:

padding: 1px;
display: block;

Jetzt funktioniert es in IE, Mozilla und Opera!



Danke trotzdem!