XHtml Strict, Float: Center ?

Question

Hi everyone. I'm having hard time with Xhtml Strict 1.0 and Css. And I'm almost out of solutions.

My Site Url: http://www.pro-turk.net/beta/

I made a jquery multilevel dropdown menu for my site.

It looks like OK, but I have used inline-block property of css display attribute on navigation menu which is a part of css 2.1 and isn't supported by some browsers (including ie6 and ie7).

I want to make #nav > li elements block level elements, but to do this and having all of them in same line, the only way is using float in #nav > li. But I want to center them in their parent (the menu bar). So I need something like float:center (I know it's pretty stupid and doesn't exist). But is there a way to include block level elements as children elements without linebreaks (I mean without making a block level element).

Regards.

Answer 1

You can make li float left or right and make the menu itself centered. Make the menu the width of the sum of its elements.

#nav
{
    width: 500px;

    /* This will center the block within its container */
    margin-left: auto;
    margin-right: auto;
}

EDIT: Since you don't know the width of the menu (it's dynamic) we're coming to the very case when there is no alternative to tables.

<table border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
    <tr>
        <td>Menu item 1</td>
        <td>Menu item 2</td>
        <td>Menu item 3</td>
    <tr>
<table>

P.S. There is some substitution for tables with newer CSS3 extensions like display:table | table-cell etc., but it doesn't have a wide-spread support yet.

Answer 2

I think there is no solution for it in css2 without using tables.

Answer 3

display:inline-block isn't supported in IE6 or IE7, but you can get the same effect in those browsers by using display:inline and ensuring that hasLayout is set on those element by, say, using zoom:1. Use conditional comments to direct the different css to those browsers only.