[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. :gruebel:

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

[Matze]

Hi,

mal anders gefragt: Wieso nutzt du dafür nicht das Listenelement [*] mit float: left? Das ist dafür wie geschaffen. ;) Ich mach das bei meiner Webseite auch so und hatte damit noch keinerlei Probleme.

[pilic]

Okay danke. Das hat das Problem zwar nicht gelöst, aber dafür bin ich mir jetzt sicher, dass es am Laden der Bilder in "<a>" hängt. Ich habe es auch schon mit einer gif probiert, aber das macht auch keinen Unterschied, zumal das Logo ja auch eine png ist.

[pilic]

So. Ich hab jetzt eine Antwort :) ganz zufrieden bin ich zwar nicht, aber mehr ist halt nicht drin. :?

Zitat:

Kleiner Hinweis
Für den Firefox sollte man die CSS-Eigenschaft von „rollovermenu a“ um die Zeile “display: block” ergänzen, da Firefox die Grafik sonst nur für den kleinstmöglichen Bereich anzeigt, den der Link einnimmt (es würde also nichts angezeigt werden, wenn der Link <a> </a> hieße).
Die Eigenschaft “display” sagt dem Browser aber, dass er den Bereich ausfüllen soll.

Quelle

Cheerio