✔ IE9 Problem mit float + vertical-align in table

[DarkfrOnt]

Display block hat schon geholfen Ich habs jetzt so realisiert, so passt schonmal alles außer der Text in den Zellen wird wieder nicht zentriert und im IE9 wird der hover nicht dargestellt, warum?

#menu-content ul 
{
    margin:0;
    padding:0;
    list-style:none;
    display:table;
    width:100%; /* oder 1024px */
}
 
#menu-content ul li
{
    display:table-row;
	vertical-align:middle;
	background:url(../images/menu-back.PNG) repeat-x;
}
 
#menu-content ul li ul li 
{
    display:table-cell;
    vertical-align:middle;
}
 
#menu-content ul li ul li:hover, #menu-content ul li ul li:active, #menu-content a:active, #menu-content a:hover, #current
{
    background:url(../images/menu-hover.PNG) repeat-x;
}

#menu-content a {
	display:block;
	width:1024px;
	height:50px;
}

 

[SpiceLab]

Vergleich an dieser Stelle nochmal meine funktionstüchtige Vorgabe mit deinem CSS.

#menu-content ul li
{
    display:table-row;
}
 
#menu-content ul li ul li 
{
    display:table-cell;
    vertical-align:middle;
    height:32px;
    background:url(../images/menu-back.PNG) repeat-x;
}

#menu-content ul li ul li:hover, #menu-content ul li ul li:active 
{
    background:url(../images/menu-hover.PNG) repeat-x;
}

 

[SpiceLab]

Desweiteren hab ich in meinem CSS für das <a>-Element neben display:block keine width- u. height-Regel aufgestellt.

Letztere vermasselt dir (browserübergreifend!) alles in Bezug auf Zeilenhöhe und vertikale Zentrierung des Elementinhaltes. Und warum 50px, wenn die Zellenhöhe 32px betragen soll?

 

[DarkfrOnt]

Ich hab festgestellt, dass eine Zeile doch 50px hoch sein muss, deswegen hatte ich das angepasst. Das ist ein width und height in a nehmen soll leutet mir jetzt auch ein.
Hier mein verbesserter Code:

#menu-content ul li
{
    display:table-row;
	height:50px;
	background:url(../images/menu-back.PNG) repeat-x;
}
 
#menu-content ul li ul li 
{
    display:table-cell;
    vertical-align:middle;
	height:100%;
}
 
#menu-content #menu-content ul li ul li :hover, #current
{
    background:url(../images/menu-hover.PNG) repeat-x !important;
}

#menu-content a {
	display:block;
}

Die height habe ich von "ul li ul li " zu "ul li" verschoben, sonst hatte es keinen Effekt, beim background das gleiche. Trotzdem besteht das Problem, dass er sich anscheinend an der Höhe des a-Tags orientiert und somit den hover auch nur so hoch wie den Text darstellt. Das mit dem vertical-algin haut auch noch nicht hin. Ich bin selbst auch verwirrt das dies nicht geht, weil das ganze css logisch klingt.

 

[SpiceLab]

Solange du deine bisherigen CSS-Codes nicht komplett verwirfst, und sie einfach durch mein fehlerfreies CSS 1:1 ersetzt, ist es ehrlich gesagt recht müßig, hier darüber weiter zu diskutieren.

Zur Beweislage anbei der IE9-Schnappschuß mit meiner Stylesheetfassung.



Wenn stattdessen nun 50px erwünscht sind, weißt du, in welcher Zeile ich die Elementhöhe angegeben habe.

 

[SpiceLab]

Nachtrag: Damit keine Mißverständnisse aufkommen, reiche ich abschließend die erwähnte Erweiterung zum Ende meines aktuellen Stylesheets (Stand: 18.08.2011, 06:04h) nach:

#menu-content a 
{ 
    display:block; 
    text-decoration:none; 
}

 

[DarkfrOnt]

Ich wurde den Code ja gerne 1:1 so verwenden, aber es funktioniert nicht:
http://strike-design.net/hannweber (hier ist gerade den CSS aktiv, ohne Änderungen von mir)

 

[SpiceLab]

Dein HTML-Code stimmt mit meinem neuen von heute Morgen ebenso wenig überein

Wozu poste ich dir hier überhaupt die Codeschnippsel?! Aufmerksam lesen kannst du wohl nicht, oder?

Na denn mal vielen Dank für's Gespräch! :suspekt:

 

[DarkfrOnt]

Sorry, dass mit dem doppelten ul-li hatte ich als nicht so wichtig wahrgenommen. Die Struktur kann bei Joomla leider nicht geändert werden, ohne größere php-Kenntnisse.
Kann man das ganze auch ohne das doppelte ul-li realisieren?

 

[SpiceLab]

Kann man auch problemlos, wenn diesmal alles als wichtig wahrgenommen wird! Danke

<div id="menu-content">
    <ul>
        <li><a href="#">einzeiliger Link</a></li>
        <li><a href="#">zweizeiliger<br />Link</a></li>
    </ul>
</div>

#menu-content ul 
{
    margin:0;
    padding:0;
    list-style:none;
    display:table;
    width:100%;
}
 
#menu-content ul li
{
    display:table-row;
}
 
#menu-content ul li a 
{
    display:table-cell;
    vertical-align:middle;
    height:32px;
    background:url(../images/menu-back.PNG) repeat-x;
    text-decoration:none; 
}
 
#menu-content ul li a:hover, 
#menu-content ul li a:active 
{
    background:url(../images/menu-hover.PNG) repeat-x;
}