Gibts noch mehr die IE verfluchen?

Hab ein Spezialproblem.
IE und CSS. zwei Welten.
Ich hab hier grade eine Tabelle zur Titelauswahl erstellt, die per CSS gestyled ist.
Siehe hier.
Im Fuchs sind die Buchstaben centered, und das ganze Feld wird bei hover gelb geschalted.
Genauso, wie ich es codiert habe.
Im IE natürlich nicht.
Dort sind die Buchstaben etwas nach links versetzt und gehovert wird nur ein kleiner Bereich um den Buchstaben rum.
? Irgendwann werd ich mal noch bekloppt.
Hier der relevante Code aus der .css: (die .htm habt ihr ja oben)
Zelle:
<pre>.alpha {
background-color:#2a2a2a;
font-size:10px;
height:20px;
width:25px;
text-align:center;
}
</pre>
Link:
<pre>a.alpha_link {
margin:0px;
display:block;
text-align:center;
padding:2px;
color:#ffdd66;
background-color:#2a2a2a;
text-decoration:none;
font-weight:bold;
}
a.alpha_link:hover {
color:#2a2a2a;
background-color:#ffdd66;
text-decoration:underline;
}
</pre>
Hat einer ne Idee warum der da rumzickt?
Habs auch schon mit div's, margin:auto (links und rechts), oder align:center der Zelle versucht.
Hilft alles nix.

hatte das problem auch schon! leider auch nie gelöst! wird mir wohl auch immer ein rätsel bleiben. es waren einfach keine fehler im quelltext und in anderen browsern (fuchs, netscape, opera) gings auch..!

dann weißt du immerhin dass der fehler nicht bei dir liegt *g*

Danke daex, aber der Hover Effekt ist ja da.
Aber eben nur partiell. s.o.

Also, hatte das .alpha bei mir vergessen, da gings mitm IE 6.
Das Problem ist:
Du verwendest 100% breite in der Tabelle aber setzt die Zellen auf 25px fest. Dadurch entsteht einfach mehr Abstand in den Zellen und der Hover geht nicht über alles weg.
Ich würd Versuchen nur % oder nur px Angaben zu nutzen, macht die Fehlersuche einfacher.
Das hier ging bei mir (mit der Einschränkung, das der Hover erst einsetzt sobald man über dem Link ist, also dem Buchstaben. Genau genommen ist es kein Fehler vom IE nur ne genauere Interpretation)
Meine Änderungen sind rot
a.alpha_link {
margin:0px;
display:block;
text-align:center;
[color=red]padding:5px;</font color=red>
color:#ffdd66;
background-color:#2a2a2a;
text-decoration:none;
font-weight:bold;
}
a.alpha_link:hover {
color:#2a2a2a;
background-color:#ffdd66;
text-decoration:underline;
}
.alpha {
background-color:#2a2a2a;
font-size:10px;
[color=red]width:11%;</font color=red>
text-align:center;
}
Die Zellenhöhe kannst Du durch das Padding des a.alpha_link bestimmen (so komisch es klingt (-: )
Ich würde Dir auch empfehlen mal in PHP reinzuschauen, das würde Deine ganze Seite einfacher, kompakter und besser zu verwalten machen. Auch wenns mehr kostet.

Also die ganze TD als Hover erreichst Du entweder über das was ich oben geschrieben habe (onMouseOver/Out events) oder (aber sehr unsauber) du setzt den td-Tag IN den a-Tag, also das die Zelle im Link ist. Ist aber afaik nicht W3 Konform.
PHP ist extrem nützlich, grade bei solchen Seite. 130+ einzelnen HTML Seiten hast Du? Ich würd verrückt werden wenn ich da immer was ändern müsste.
Was Du vor hast ist in PHP glaub ich eine der ersten Sachen die man lernt
Du baust Deine Seite wie sie sein soll, und in einem bestimmten Bereich werden die einzelnen Seiten nur per "include" eingebunden.
Welche Seite eingebunden wird bestimmst Du über eine Variable, die Du beim Seitenaufruf übergibts (zB sieht dann ein Link so aus: a href="index.php?content=start" ).
Über eine kleine Funktion wird dann entschieden, welche Datei "included" werden soll wenn in der Variablen "content" dann "start" steht.
Das genauer zu erklären würde den Rahmen sprengen, schau einfach mal bei SELFHTML vorbei in der PHP Sektion, da sind 2-3 Links zu Tutorials und Anleitungen.

Hey Saty,

Funktioniert mit className, damit kannst du die CSS-Klasse des Elements setzen/ändern. Um beim Betreten der TD eine andere Stylesheet-Klasse zu setzen, brauchst du also folgenden Code:
&lt;td . onMouseOver="this.className='alpha';" onMouseOut="this.className='';" onClick='self.location.href='dein Link';"&gt;
.
&lt;/td&gt;
(hier gleich noch mit Click-Event, damit man auch ans Ziel kommt, wenn man nicht den Link getroffen hat, aber trotzdem in die TD geklickt hat)

Hey ihr beiden,
dank meiner gestrigen Aktion , kann ich ja jetzt auch kucken wie die HP im Safari aussieht. (aus MacOSX 10.4)
Tja, und dreimal dürft ihr raten, wie der hovert.
Jupp, genau wie der Fox.
Auch der Konqueror hovert so.
Opera hab ich noch nicht getestet, denke aber gleiches Ergebnis.
IE? Warum? Warum warum warum? heul

Danke Scheff.
Hat noch einer ne Idee zu obigem?

Hey Saty,
schön, wenn's funktioniert. Wundern tut's mich aber trotzdem, da ich einen derartigen Effekt schon in zig Seiten verbaut habe, ohne fixe Maße vorzugeben, und das hat der IE bisher eigentlich immer gefressen. Vielleicht liegt's am DocumentType, wer weiss. Ist auf jeden Fall gut zu wissen :-)