[HTML/CSS] Problem mit Reihe von <span> in einer Zeile im FF

[pilic]

Hi,

ich arbeite gerade an einem Rollover-Effekt für die Navigation in CSS. Ich möchte, dass die <span> in einer Zelle ohne Zwischenraum dargestellt werden, also steht in meiner CSS-Datei im relevanten Bereich

Code:

display: table;

Dw meint bei der Kompatibilitätsprüfung, dass der IE 5/6 für Windows und für Mac diese Property nicht kennen würde. Ebenso wie das Attribut "table-row".
Jedoch wird die Navigation nur im IE richtig angezeigt. Der FF zeigt gar nichts davon an - weder als inline-objekt noch so wie ich es möchte. Zumindest die Version, die ich verwende (2.0.0.4). Die müsste doch die aktuellste sein, oder?

Hier wird z.B. auch behauptet, dass der FF mein Voraben am ehesten unterstützen würde, obwohl ich so langsam glaube, dass es doch an etwas anderem liegt.

Ich habe es auch schon ohne "display" im CSS probiert, doch der Bereich wird dann auch nicht dargestellt.

Hier der relevante html-Code:

Code:

<td colspan="11">[url="index.php"]<span class="alt">Home</span>[/url][url="team.php"]<span class="alt">Das Team</span>[/url][url="events.php"]<span class="alt">Events</span>[/url][url="galerie.php"]<span class="alt">Galerie</span>[/url][url="impressum.php"]<span class="alt">Impressum</span>[/url]</td>
</tr>

Und noch der CSS (von hier abgeändert):

Code:

a#button1a {
    width: 106px;
    height: 57px;
    background-image: url(../images/button1_dbl.png);
    background-position: 0 0;
    margin: 0 auto;
}
a#button1a:hover {
    background-position: 0 -57px;
}
a .alt { display: none; }
a#button2a {
    display: table-row;
    width: 106px;
    height: 57px;
    background-image: url(../images/button2_dbl.png);
    background-position: 0 0;
    margin: 0 auto;
}
a#button2a:hover {
    background-position: 0 -57px;
}
a#button3a {
    display: table-row;
    width: 106px;
    height: 57px;
    background-image: url(../images/button3_dbl.png);
    background-position: 0 0;
    margin: 0 auto;
}
a#button3a:hover {
    background-position: 0 -57px;
}
a#button4a {
    display: table-row;
    width: 106px;
    height: 57px;
    background-image: url(../images/button4_dbl.png);
    background-position: 0 0;
    margin: 0 auto;
}
a#button4a:hover {
    background-position: 0 -57px;
}
a#button5a {
    display: table-row;
    width: 104px;
    height: 57px;
    background-image: url(../images/button5_dbl.png);
    background-position: 0 0;
    margin: 0 auto;
}
a#button5a:hover {
    background-position: 0 -57px;
}

Aber seht euch die Site am besten selbst an

[edit]Im Opera sieht es noch schlimmer aus. Opera interpretiert es anscheinend als:

Code:

display: block;

[/edit]

Cheerio