CSS Hover in Tabelle

[BenschM@ster]

Servus,
ich habe ein kleines Problem im Internet Explorer.
Ich habe ein horizontales Menü in einer Tabelle angelegt, beim Überfahren der Links ändert sich die Hintergrundfarbe der Tabellenzelle und es werden links und rechts ein Rahmen angezeigt.

http://beng.be.funpic.de/page/

Das Problem ist, wenn ich über einen Link fahre dann wird links der Rahmen hinzugefügt, dadurch verschiebt sich der Link um 1 Pixel nach rechts. Im Mozilla hab ich das gelöst, indem ich auch im normalen Zustand einen Rahmen mit 1px hinzugefügt hab, allerdings border-style weggelassen habe.
Der IE scheint das zu übergehen und verschiebt den Link weiterhin 1px nach rechts.

Sicherlich ist das kein Weltuntergang, ist aber trotzdem nicht schön.

Gibt es da eine Lösung?

Danke,
Gruß!

 

[redlama]

Warum machst Du den Strich nicht immer und änderst dann nur die Hintergrundfarbe?

redlama

 

[BenschM@ster]

Hab ich auch schon überlegt, aber die Striche sollen ja den überfahrenen "Button" fokusieren.
Ich würde es lieber so machen, wenns irgendwie möglich ist.

 

[Quaese]

Hi,

zeige die Striche einfach immer an - bei Hover mit der Highlight-Farbe sonst mit der Hintergrundfarbe.

Ciao
Quaese

 

[BenschM@ster]

Die Idee hatte ich auch schon, ist bei diesem Hintergrund aber leider nicht möglich, da es ein Verlauf ist.
Kann man die Striche nicht irgendwie transparent machen?
Mensch, nur Probleme mit dem Internet Explorer.

 

[saschaf]

Ich hab mal deinen Quelltext angesehen. Mach doch bei den Styles für "td a {... }" und "td a:visited {...}" zusätzlich ein "padding-left:3px;" rein. Dann zappelt es nicht mehr hin und her.

Ist vieleicht nicht die sauberste Möglichkeit das Problem zu lösen, aber die einfachste.

 

[BenschM@ster]

DANKE!
Genau so hatte ich es auch schon probiert, allerdings hatte ich da vergessen im td a:hover {}
padding-left:0px; anzugeben! Jetzt wo Du mir den Tipp gegeben hast ist es mir aufgefallen.
Muss aber padding:1px statt 3px sein, ich denke mal das weißt Du ja auch, und hast mir nur nen Schätzwert gegeben, wollts nur nochmal für die anderen sagen, falls jemand das gleiche Problem hat.

Sehr schön, jetzt ist es so wie ich es mir vorstelle, danke!

Gruß

 

[saschaf]

Nein nein das war schon der richtige Wert, schliesslich hast du ja bei Hover padding:2px drinstehen. Daraus folgt 3-2=1 px Verschiebung.

 

[BenschM@ster]

Ne, ich hab bei Hover gar kein Padding drin, sondern nur einen 1px Rahmen.
D.h. es gab beim überfahren eine Verschiebung nach links um 1px. Wenn ich also diese Verschiebung mit padding-left:1px auch schon im Normalzustand herbeiführe ist der Effekt weg. (-:

 

[saschaf]

Ne, ich hab bei Hover gar kein Padding drin, sondern nur einen 1px Rahmen.

In dem alten Quellcode war ein padding drin.Siehe hier:

<style type="text/css">
<!--
body {
background-image: url(./top.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
margin-left: 0px;
margin-top: 12px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

td a {
display:block;
text-decoration:none;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:black;
padding:2px;
width:139px;
}

td a:visited {
display:block;
text-decoration:none;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:black;
padding:2px;
width:139px;
border-width: 1px;
}

td a:hover {
display:block;
text-decoration:none;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFFFCC;
padding:2px;
color:#000099;
border-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-color:#000000;
width:139px;
}
-->
</style>

Deshalb kam ich beim Hover auf padding-left:3px. Aber wenns jetzt funktioniert ist es eh egal.