✔ IE9 Problem mit float + vertical-align in table

D

DarkfrOnt

Mitglied
Hallo,
das Problem ist folgendes: Ich habe eine Tabelle die die Eigenschaft float=left besitzt, die Texte in der table sollen mittig ausgerichtet werden in vertikaler Richtung, wobei float allerdings den vertical-algin verhindert? Gibt es ein Workaround?

Ist wieder mal nur ein Bugfix für den IE, in allen anderen Browsern ist zwischen den tables kein Zwischenraum, mit float=left hatte ich diesen im IE entfernt.

Hier ein Codeausschnitt:

Code: 
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr ><td><a href="#" class="mainlevel" >CE</a></td></tr>
<tr ><td><a href="#" class="mainlevel" >Berechnung</a></td></tr>
<tr ><td><a href="#" class="mainlevel" >Erstellung</a></td></tr>
 </table>

Code: 
#menu-content td {
    vertical-align: middle;
    height: 32px;
    background: url(../images/menu-back.PNG) repeat-x;
}

#menu-content td:hover, #menu-content td:active {
    background: url(../images/menu-hover.PNG) repeat-x;
}
  
#menu-content td a {  
    float: left;
    clear: left;
    /*position: relative;
    top: 50%;*/
    background: none;
}  

#menu-content .mainlevel {
    background: none;
}

#menu-content a:hover, #menu-content a:active, #active_menu {
    background: none;
}

Wenn ich /*position: relative; top: 50%;*/ einkommentiere ist es schon fast mittig. Problem dabei ist, wenn die a-tags über 2 Zeilen gehen, es nicht mehr ganz in der Mitte ist. Den hover habe ich in der normalen css auch in den a-tags untergebracht, hier in den td's, damit diese nicht mit verschoben werden im IE9.

Ohne float wird alles super zertriert, nur dann haben die Zellen der Tabelle ein margin-bottom von ein paar Pixel.

Vielen Dank für eure Hilfe!

Grüße,
ska3k
 
1. Im Joomla-Quelltext steht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. Bei F12 im IE9 steht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
Mein Alternativvorschlag, um hier ohne float:left auszukommen, und außerdem das Navigationsmenü im Markup zu einem praxisüblichen und sogenannten "Listenmenü" auszuzeichnen:

HTML: 
<div id="menu-content">
    <ul>
        <li><a ...>einzeiliger Link</a></li>
        <li><a ...>zweizeiliger<br />Link</a></li>
    </ul>
</div>
CSS: 
#menu-content ul 
{
    margin:0;
    padding:0;
    list-style:none;
    display:table;
    width:100%;
}

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

#menu-content li:hover, #menu-content li:active 
{
    background:url(../images/menu-hover.PNG) repeat-x;
}
 
Zuletzt bearbeitet:
Habs jetzt auf ul-li umgestellt, ist auf jeden Fall besser. Aber ich bekomme ich das noch hin, dass eine Zeile 1024px breit ist und die ganzen Menüeinträge untereinander stehen? Alles was ich gerade versucht hatte ging schief.
Zur Zeit sind alle 9 Einträge nebeneinander, jede Zelle mit gleicher Breite, wie bei inline.

Code: 
#menu-content ul 
{
    margin:0;
    padding:0;
    list-style:none;
    display:table;
    width:100%;
}
 
#menu-content ul li 
{
    display:table-cell;
    vertical-align:middle;
	width:1024px;
    height:32px;
    background:url(../images/menu-back.PNG) repeat-x;
}
 
#menu-content li:hover, #menu-content li:active,#menu-content #current
{
    background:url(../images/menu-hover.PNG) repeat-x;
}
 
Zuletzt bearbeitet:
Sorry für meinen Fehler, dass die <li>-Elemente ("Tabellenzellen") nebeneinander, und nicht untereinander erscheinen.

HTML: 
<div id="menu-content">
    <ul>
        <li>
            <ul>
                <li><a ...>einzeiliger Link</a></li>
            </ul>
        </li>
        <li>
            <ul>
                <li><a ...>zweizeiliger<br />Link</a></li>
            </ul>
        </li>
    </ul>
</div>
CSS: 
#menu-content ul 
{
    margin:0;
    padding:0;
    list-style:none;
    display:table;
    width:100%; /* oder 1024px */
}

#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;
}
 
Zuletzt bearbeitet:
Ok, jetzt passt das. Jetzt wird die Breite und Höhe (1024x32) einer Menuzelle noch missachtet und der Hintergund wird auch nur genau da dargestellt, wo Text ist.
 
Zuletzt bearbeitet:
DarkfrOnt hat gesagt.:
Ok, jetzt passt das. Jetzt wird die Breite und Höhe (1024x32) einer Menuzelle noch missachtet und der Hintergund wird auch nur genau da dargestellt, wo Text ist.
Zum Vergrößern anklicken....
Kann ich mit meinem aktuell gezeigten XHTML- u. CSS-Code nicht reproduzieren.

Lediglich die Regelerweiterung display:block für das <a>-Element ist hier noch zusätzlich für zweizeilige Linkbeschreibungen dienlich, was ihre (korrekte) vertikale Zentrierung betrifft.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück