Centrer horizontal accordéon dans IE (largeurs dynamiques Les)

Question

Je suis en train de comprendre comment centrer un accordéon horizontal sans largeur donnée dans Internet Explorer 6 et 7. Je travaille en XHTML 1.0 Strict. Dans Webkit et Mozilla son écran juste: table. J'ai tout essayé je peux penser et tout ce qu'on pourrait me LMGTFY pour ... mais il est tout simplement pas travailler.

Je l'ai posté l'exemple à: http://ableobject.com/horaccordion.html

Voici le code:

HTML:

<div id="container">
    <div class='menuContainer'>
        <a href="#">Top-level 1</a>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 2</a>
        <div class='menu'>                         
                <a href="#">Bottom Level A1</a>
                <a href="#">Bottom Level A2</a>
                <a href="#">Bottom Level A3</a>
                <a href="#">Bottom Level A4</a>
            </div>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 3</a>
            <div class='menu'>
                <a href="#">Bottom Level B1</a>
                <a href="#">Bottom Level B2</a>
            </div>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 4</a>
    </div>
</div>

CSS:

#container {
    margin: 0 auto 0 auto; 
    text-align: center;
    display: table;
}

.menuContainer {
       margin: 0;
       padding: 0;
       float: left;
       height: 32px; /* For testing */
       font-family: helvetica;
       font-size: 18px;
       clip: auto; overflow: hidden;
}
.menu {
       height: 32px; /* For testing */
       clip: auto; overflow: hidden;
       float: left;
}
a, a:link, a:hover, a:visited, a:active {
       color: black;
       text-decoration: none;
       padding: 12px;
       font-weight: 700;
       float: left;
       color: #222;
}

.menu a, .menu a:link, .menu a:hover, .menu a:visited, .menu a:active {
   color: black;
   text-decoration: none;
   padding: 12px;
   font-weight: normal;
   float: left;
}

JQuery / Javascript:

        if( jQuery.support.opacity == true ) {
            $(".menuContainer a").hover(    
                function(){$(this).animate ({ opacity: 0.7 }, 200 );},
                function(){$(this).animate ({ opacity: 1 }, 600 );}
        );}

            else {
                $('.menuContainer a').hover( 
                    function(){$(this).css('color', '#999');},
                    function(){$(this).css('color', '#000');}
                );}

// Accordion Courtsey of Patrick @ StackOverflow : http://stackoverflow.com/users/113716/patrick 

        var $currentMenuContainer = $('#someFictionalElement');
        var $previousMenuContainer = null;

    // Iterate through each .menu element, setting the full width of each menu to a 'custom'
    //        attribute called 'fullWidth'. Since the full width should never change, this
    //        makes it easy to recall it quickly. You could use global variables instead.
    // After setting 'fullWidth', it then collapses each menu and title.
        $(".menu").each(function() {
            var $theMenu = $(this);
            var $theMenuContainer = $theMenu.parent();
            $theMenu.attr({fullWidth: $theMenu.width()});
            var menuContainerWidth = $theMenuContainer.width() - $theMenu.attr('fullWidth') + 3;  // Add a few pixels for firefix
            $theMenu.css({width: 0});
            $theMenuContainer.css({width: menuContainerWidth});
        });

        $(".menuContainer a").click(
            function() {
    // Set the current and previous elements properly
                $previousMenuContainer = $currentMenuContainer;
                $currentMenuContainer = $(this).parent();
                var $previousMenu = $previousMenuContainer.find('.menu');
                var $currentMenu = $currentMenuContainer.find('.menu');

    // Collapse the previous menu
                $previousMenu.animate({ width: 0 }, {duration: 480, queue: false} );

    // Subtract the width of the previous menuContainer's menu from the menuContainer (only if its menu is displayed)
                if($previousMenu.width() > 0) $previousMenuContainer.animate({width: ('-=' + $previousMenu.attr('fullWidth'))}, 500);

    // Expand the current menu and its menuContainer if it's not showing
                if($currentMenu.width() == 0) {
                    // Increase the menuContainer width by the full width of its menu
                    $currentMenuContainer.animate({width: ('+=' + $currentMenu.attr('fullWidth'))}, 480);
                    // Increase the menuContainer to its full width
                    $currentMenu.animate({ width: $currentMenu.attr('fullWidth') }, 500);
                }
        });
    });

Answer 1

<center>CONTENT</center>

S'il est assez bon pour Google, il est assez bon propably pour vous. (À moins biensur vous êtes obligé de fournir un site conforme aux normes 100%, ce qui est même pas permis de produire des avertissements)