Classes non appliquées à l'affichage sous IE6

Hello,

j'ai un problème totalement intriguant donc je ne vois pas du tout comment y remédier. J'ai un div avec une forte structure donc j'applique des styles par classes puisque cet élément se retrouve plusieurs fois sur une même page.

Structure HTMLvalidée :

<div id="widget_id" class="widget">
	<div class="widget_gripper"/>
	<div class="widgetAllContainer">
		<div class="widget_all">
			<div class="widget_frame">
				<div class="widgetHeaderContainer">
					<img class="widget_icon" src="icon.gif"/>
					<div class="widget_title_container">
						<span class="widget_title">caption</span>
					</div>
				</div>
				<img class="widget_delete_icon" src="clos.gif"/>
				<div class="widget_content_container">
					<div class="widget_content">Content</div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS validé:

.widget {
	width: auto;
	height: auto;
	float: left;
	position: relative;
}

.widgetAllContainer { 
	margin: 0 0 0 10px;
	border-right: 1px solid #E6E6E6;
	border-bottom: 1px solid #E6E6E6;
}

.widget_all {
	border: 1px solid #B5B5B5;
	margin: 0;
	background: white;
}

.widget_frame {
	border: none;
	margin: 0;
}

.widgetHeaderContainer {
	background: #DFDFDF url(../images/widget/widget_header_bg.gif) repeat-x left top;
	height: 22px; 
	border-bottom: 1px solid #DFDFDF;
	margin: 0;
	padding: 0;
	cursor: move;
}

.widget_header {
	border: none;
	padding: 1px 4px 0 0;
	margin: 0;
}

.widget_delete_icon {
	cursor: pointer; cursor: hand;
	position: absolute;
	right: 5px;
	top: 5px;
}

.widget_title_container {
	margin: 0;
	padding: 0 0 0 4px;
	height: 12px;
}

.widget_title {
	padding: 0px 20px 0px 5px;
	position: relative;
	top: 4px;
}

.emptyCaption { padding: 0; }

.widget_content_container {
	padding: 5px;
}

.widget_content {
	position: relative;
}

.widget_waiting_icon {
	position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px; /* half of width */
	margin-top: -20px;  /* half of height */
}

.widget_waiting_overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	background: white;
	opacity: 0.7; /* for Firefox */
	filter:alpha(opacity=70); /* for IE */
}

.widget_waiting_panel {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 500;
}

.widget_gripper {
	float: left;
	cursor: hand; cursor: col-resize;
	width: 3px;
	height: 50px;
	padding: 0 4px;
}

.widget_gripper {
	background: transparent url(../images/gripper.png) no-repeat center top;
}

.widget_icon {
	float: left;
	padding: 3px 0px 2px 4px;
}

voila, sous ie6 (tout va bien pour tout le reste, firefox, ie7, safari ...), mon premier élément est correct et les suivants perdent des propriétés (seulement les border et le background apparement). Le plus étrange c'est que le style semble appliqué au DOM, on fouillant la structure avec IE Developper Toolbar (de la bonne daube mais on fait avec se qu'on peut).

un preview est joint


si quelqu'un a une idée, je sais pas du tout quoi faire

merci
Modifié par MrHankey (04 Jun 2008 - 15:10)

Bonjour, que sommes nous sensé voir sur ces images floutées ? http://andreloconte.com/portfolio/smiley-09.png
Modifié par Akhilleus (04 Jun 2008 - 21:11)

que ce sont les mêmes éléments mais que le 2ème et 3ème perdent le fond blanc et des bordures

Au pif, un problème de HasLayout?

(Voir la FAQ et la littérature à ce sujet.)