IE9 Problem mit float + vertical-align in table @ tutorials.de: Tutorials, Forum & Hilfe

DarkfrOnt · 17.08.11 19:46

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

spicelab · 17.08.11 19:51

Welchen Doctype hast du für das Dokument angegeben?
(Stichwort: Der »DOCTYPE-Switch« und seine Auswirkungen)
In welchem Browser- und Dokumentmodus befindet sich IE9 jeweils?
(Kontrolle über "F12" -> Entwicklertools)

DarkfrOnt · 17.08.11 20:04

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">

spicelab · 17.08.11 20:16

... und wie sieht's hiermit aus?

Zitat von spicelab

erledigt
In welchem Browser- und Dokumentmodus befindet sich IE9 jeweils?
(Kontrolle über "F12" -> Entwicklertools)

Ich frag' dich das alles, weil ich momentan keinen Zugriff auf IE9 besitze, um deinen Code zu prüfen.

DarkfrOnt · 17.08.11 21:23

Sorry, ganz überlesen.

Browser Mode: IE9
Doucument Mode: IE9 standards

spicelab · 17.08.11 22:02

Mein Alternativvorschlag, um hier ohne float:left auszukommen, und außerdem das Navigationsmenü im Markup zu einem praxisüblichen und sogenannten "Listenmenü" auszuzeichnen:

Code xhtml:

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

Code 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;
}

DarkfrOnt · 17.08.11 23:33

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;
}

spicelab · 18.08.11 06:04

Sorry für meinen Fehler, dass die <li>-Elemente ("Tabellenzellen") nebeneinander, und nicht untereinander erscheinen.

Code xhtml:

<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>

Code 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;
}

DarkfrOnt · 18.08.11 08:15

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.

spicelab · 18.08.11 08:31

Zitat von DarkfrOnt

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.

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.

DarkfrOnt · 18.08.11 08:45

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?

Code :

#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 · 18.08.11 08:52

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

Code 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 · 18.08.11 08:58

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 · 18.08.11 09:29

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:

Code css:

#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 · 18.08.11 09:38

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.

IE9 Problem mit float + vertical-align in table-ie9.png

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

vertical-align und der IE

IE und vertical-align

Vertical-Align im DIV?

vertical-align im Firefox Problem

div & vertical-align

E-Mail:

Abonnieren Abbestellen