Seltsamer 4 Pixel Rand bei CSS Hover

[thunderstick]

Also ich hab folgendes Problem.

Ich hab bei meinem Webseitendesign eine horizontale Navigation die mit einem Hintergrundbild hinterlegt ist.
http://www.maexx-web.de/sweb/index.html

Jetzt habe ich die Links per CSS so formatier, das beim Hover ein anderes Bild im Hintergrund des jeweiligen Links angezeigt wird. Das Problem ist, (zumindest in Firefox1.5 und IE6) ist während man mit der Maus über den Link fährt, ein Rand von 3-4 Pixeln bis zum Border zu sehen, an dem der Hoverhintergrund nicht angezeigt wird. Ich hab das ganze schon versucht zu lösen, indem ich das Padding auf 0 Gesetzt habe.. ohne Erfolg..

Ich hoffe ihr könnt mir weiterhelfen.
Gruß

 

[dkdenz]

Bei 'Anfahrt' scheint das nicht so zu sein...

 

[thunderstick]

also bei mir ist das bei allen Links... wenn ich es richtig gesehen habe beim ersten link 3 pixel und bei den andern 4 pixel

Also, ich weiß ja nicht wie ihr so eine navigation realisiert, aber vllt sollte ichs mal mit ner liste versuchen!

 

[dkdenz]

Eine Liste wäre natürlich ideal.
Versuche aber erstmal, der Sache auf den Grund zu gehen.
Mach mal beim normalen A auch ein padding:0px und schau, was passiert.
Ausserdem brauchst Du das background-position:left top; nicht.
Zudem könntest Du das auch mal andersrum probieren: background-position: top left;

 

[pit-r]

Moin!

Die einfachste Lösung: die Zeilenumbrüche im Quelltext entfernen. Alternative: die Links mit float:left versehen und deren paddings sowie die paddings des divs anpassen...

Ahoi - Pit

 

[thunderstick]

Boah.. die Zeilenumbrüche... So ne Simple Sache, das muss man aber auch erst mal wissen Vielen Dank, Problem gelöst.

Jetzt sag ned, der Browser interpretiert nen Zeilenumbruch als   oder??

Viele Grüße!

 

[pit-r]

Jetzt sag ned, der Browser interpretiert nen Zeilenumbruch als   oder??

Nee, aber auch ein Zeilenumbruch wird als 'white space' (nette Bezeichnung - sie spricht Bände. ) interpretiert.

Ahoi - Pit