CSS vertical align IE 6 & 7 problem

Question

Hi there I've got the following code:

...
                    <li><a href="">
                        <span class="nr">2</span>
                        <span class="item">Despre clinic&atilde;</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
                    <li><a href="">
                        <span class="nr">3</span>
                        <span class="item">Servicii</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
                    <li><a href="">
                        <span class="nr">4</span>
                        <span class="item">Echipa medical&atilde;</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
...

and css:

#footer .navi { margin: 0; padding: 0; list-style: none; }
#footer .navi li { width: 207px; height: 85px; background: url(../images/footer_navi.gif) 0 0 no-repeat; float: left; vertical-align: middle; display: table-row; }
#footer .navi a { width: 207px; height: 85px; color: #CC0000; text-decoration: none; }
#footer .navi span.img { height: 85px; vertical-align: middle; display: table-cell; }
#footer .navi span.item { height: 85px; padding: 0 5px; width: 83px; font-size: 16px; vertical-align: middle; display: table-cell; }
#footer .navi span.nr { height: 85px; padding: 0 9px; width: 9px; font-size: 20px; color: #FF9999; vertical-align: middle; display: table-cell; }

As you can see I've got a width set for .item so my text wraps. Since IE doesn't support table-cell and table-row i've done * html #footer .navi li {display: block;} and inline-block for my spans.

Now I've got 2 issues:

1. my text won't wrap unless i set a max-width for IE6&7
2. despite using the star hack IE6&7 still won't render well

Any ideas? Thanks

Answer 1

One of the hardest things to do with tableless css.

My code originally for img elements with div elements around but should work like this as well.

Hierarchy added for explanation.

li {
    width:207px;
    height:85px;
    float:left;
    text-align:center;
    display:table;
    overflow:hidden;
    #position:relative;
    #z-index:1;
}
li a {
     #display:block;
     #position: relative;
     #top: -50%;
     #left: -50%;
     display:table-cell;
     vertical-align:middle;
     margin:0 auto;
}
li a span {
    #display:block;
    #position: absolute;
    #top: 50%;
    #left: 50%;
    display:table-cell;
    vertical-align:middle;
    margin:0 auto;
}