IE7, position:absolute et largeur auto

Bonsoir,

J'ai créé un menu horizontal aux coins arrondis en CSS seulement (en suivant une méthode "classique" et - non sémantique - comme décrite sur cette page par exemple : http://blog.benogle.com/2009/04/29/css-round-corners/). Cela fonctionne très bien sous Firefox/Chrome/IE8 mais nettement moins bien sous IE7...

Voici le balisage que j'ai utilisé :

<div id="header">
	<h1><a class="fr" href="/" title="Accueil"></a></h1>
	<div id="main-bar">
		<div id="menu-bar">
			<div class="menu-bar-rounder1"></div>
                        <div class="menu-bar-rounder2"></div>
                        <div class="menu-bar-rounder3"></div>
                        <div class="menu-bar-rounder4"></div>
			<ul>
				<li><a href="#">Section_menu_1</a></li>
				<li><a href="#">Section_menu_2</a></li>
				<li><a href="#">Section_menu_3</a></li>
			</ul>
			<div class="menu-bar-rounder4"></div>
                        <div class="menu-bar-rounder3"></div>
                        <div class="menu-bar-rounder2"></div>
                        <div class="menu-bar-rounder1"></div>
		</div>
		<div id="user-bar">
			<div id="user-information">
				<ul>
					<li><a href="#">Lien</a></a></li>
					<li><a href="#">Lien</a></li>
					<li><a href="#">Lien</a></li>
				</ul>
			</div>
			<div class="user-bar-rounder4"></div>
			<div class="user-bar-rounder3"></div>
			<div class="user-bar-rounder2"></div>
			<div class="user-bar-rounder1"></div>
		</div>
	</div>
</div>

Et la portion de CSS associée :

.menu-bar-rounder1,.menu-bar-rounder2,.menu-bar-rounder3,.menu-bar-rounder4 {clear:both; background:#5A6884; font-size:1px; overflow:hidden;}
.menu-bar-rounder1 {height:1px; margin:0 5px;}
.menu-bar-rounder2 {height:1px; margin:0 3px;}
.menu-bar-rounder3 {height:1px; margin:0 2px;}
.menu-bar-rounder4 {height:2px; margin:0 1px;}

/* Idem pour .user-bar-rounderX */

#main-bar {position:absolute; top:93px; left:325px;}

#menu-bar ul {background:#5A6884;}
#menu-bar ul li {display:inline;}
#menu-bar ul li a {float:left; padding:.5em .8em; background:#5A6884; border-right:1px solid #4A566D; color:#E9EDF4; font:bold 1em Arial,Sans-Serif; text-decoration:none;}

#user-bar {clear:both;margin:0 10px;}

#user-information {padding:5px 5px 0 5px; background:#A6B7DA; font-size:.75em;}
#user-information ul li {display:inline;}
#user-information ul li a {margin-right:10px; color:#333; }

Le problème c'est que lorsque je positionne le conteneur #main-bar en absolu, les "rounders" ne s'étirent pas sur toute la largeur du conteneur, ils ont une taille nulle. En fixant la taille du conteneur explicitement ou en forçant la largeur des "rounders" à 100%, ils apparaissent mais le rendu n'est pas celui que je souhaite...

Cela ressemble fort à un bug d'IE7... Et je pense avoir tout essayé...

Dois-je me résigner ou avez-vous des suggestions ?

Merci d'avance.

EDIT : je précise que le positionnement flottant produit le même phénomène lorsqu'il est appliqué sur le contenur #main-bar...
Modifié par kalipka (30 Nov 2009 - 23:09)

Peut être une histoire du hasLayout d'IE. Ne me demande pas ce que c'est je ne saurais pas te répondre à part te dire que ça peut faire buggé. Regarde comme enlever ou mettre le hasLayout sur un élément.

Merci pour cette suggestion, je ne connaissais pas ce hasLayout... J'ai fait quelques essais, ça n'a pas l'air de fonctionner... Si quelqu'un peut m'aiguiller sur cette piste ou sur une autre...

Le problème vient du fait que les liens du menu sont en positionnement flottant... Mais je ne vois pas comment obtenir un même rendu sans les positionner de la sorte... Un peu d'aide pour résoudre mon problème serait la bienvenue