[résolu]Position absolute sour IE7 avec un code que je ne maitrise pas

Question

djey

25 Nov 2009 à 16:13

bonjour tout le monde !!!

j'ai un petit problème vis vis de IE7 et de la position absolute.

tout de suite le code:


<div class="tableau_droit">
		  <div class="droit_left">
		<table class="tableau">
  <tbody>
    <tr class="head_tableau">
      <td width="235">Menu</td>

      <td width="324">Sous-Menu</td>

      <td width="61">Lecture</td>
      <td width="55">Ecriture</td>
    </tr>
    <tr class="ligne1">
      <td class="ligne2"><span class="marge">Panier</span></td>

      <td class="ligne2">Commande</td>
      <td class="ligne2"><div align="center"></div></td>
      <td class="ligne2"><div align="center"></div></td>
    </tr>
    <tr class="ligne2">
      <td rowspan="3" class="ligne1"><span class="marge">Produits</span></td>

      <td class="ligne1">Articles</td>

      <td class="ligne1"><div align="center"></div></td>
      <td class="ligne1"><div align="center"></div></td>
    </tr>

    <tr class="ligne2">
      <td class="ligne2">Besoins</td>
      <td class="ligne2"><div align="center"></div></td>
      <td class="ligne2"><div align="center"></div></td>
    </tr>

    <tr class="ligne2">
      <td class="ligne1">Familles d&acute;articles</td>
      <td class="ligne1"><div align="center"></div></td>
      <td class="ligne1"><div align="center"></div></td>
    </tr>
    <tr class="ligne2">
      <td rowspan="2" ><span class="marge">Stocks</span></td>

      <td>Entr&eacute;es / sorties du stock</td>
      <td><div align="center"></div></td>

      <td><div align="center"></div></td>
    </tr>
    <tr class="ligne2">
      <td class="ligne1">R&eacute;ception d&acute;une livraison </td>

      <td class="ligne1"><div align="center"></div></td>
      <td class="ligne1"><div align="center"></div></td>
    </tr>
    <tr class="ligne2">
      <td rowspan="5" class="ligne1"><span class="marge">Tableau de bord</span></td>
      <td><span class="ligne2">Suivi des livraisons</span></td>

      <td><div align="center"></div></td>

      <td><div align="center"></div></td>
    </tr>
    <tr class="ligne2">
      <td class="ligne1">Suivi du budget</td>

      <td class="ligne1"><div align="center"></div></td>
      <td class="ligne1"><div align="center"></div></td>
    </tr>
    <tr class="ligne2">

      <td><span class="marge">Suivi de commande</span></td>

      <td><div align="center"></div></td>
      <td><div align="center"></div></td>
    </tr>
    <tr class="ligne1">
      <td>Suivi des entr&eacute;es /sorties</td>

      <td><div align="center"></div></td>
      <td><div align="center"></div></td>
    </tr>
    <tr class="ligne2">
      <td>Bilan de fin de saison</td>

      <td><div align="center"></div></td>
      <td><div align="center"></div></td>
    </tr>

    <tr class="ligne2">
      <td rowspan="4"><span class="marge">Administration</span></td>

      <td class="ligne1">Administration des comptes clients</td>
      <td rowspan="4" class="ligne1"><div align="center"></div></td>
      <td rowspan="4" class="ligne1"><div align="center"></div></td>
    </tr>

    <tr class="ligne2">

      <td><p class="ligne2">Administration du r&eacute;f&eacute;rentiel produit </p></td>
      </tr>
    <tr class="ligne2">
      <td class="ligne1"><p>Administration du budget </p></td>
      </tr>
    <tr class="ligne2">
      <td><p class="ligne2">Administration    des &eacute;v&egrave;nements </p></td>

      </tr>
  </tbody>
</table>
		  </div>
		  <div></div>
		  <div class="droit_right"><ul class="checkbox_list"><li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="66" id="sf_guard_group_permissions_list_66" />&nbsp;<label for="sf_guard_group_permissions_list_66">Besoins/ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="67" id="sf_guard_group_permissions_list_67" />&nbsp;<label for="sf_guard_group_permissions_list_67">Besoins/lecture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="68" id="sf_guard_group_permissions_list_68" />&nbsp;<label for="sf_guard_group_permissions_list_68">Commande/ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="69" id="sf_guard_group_permissions_list_69" />&nbsp;<label for="sf_guard_group_permissions_list_69">Commande/lecture</label></li>

<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="70" id="sf_guard_group_permissions_list_70" />&nbsp;<label for="sf_guard_group_permissions_list_70">Articles/ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="71" id="sf_guard_group_permissions_list_71" />&nbsp;<label for="sf_guard_group_permissions_list_71">Articles/lecture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="72" id="sf_guard_group_permissions_list_72" />&nbsp;<label for="sf_guard_group_permissions_list_72">Reception d une livraison /ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="73" id="sf_guard_group_permissions_list_73" />&nbsp;<label for="sf_guard_group_permissions_list_73">Reception d une livraison /lecture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="74" id="sf_guard_group_permissions_list_74" />&nbsp;<label for="sf_guard_group_permissions_list_74">Entrees / sorties du stock/ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="75" id="sf_guard_group_permissions_list_75" />&nbsp;<label for="sf_guard_group_permissions_list_75">Entrees / sorties du stock/lecture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="76" id="sf_guard_group_permissions_list_76" />&nbsp;<label for="sf_guard_group_permissions_list_76">Suivi de commande/ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="77" id="sf_guard_group_permissions_list_77" />&nbsp;<label for="sf_guard_group_permissions_list_77">Suivi de commande/lecture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="78" id="sf_guard_group_permissions_list_78" />&nbsp;<label for="sf_guard_group_permissions_list_78">Suivi des livraisons/ecriture</label></li>

<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="79" id="sf_guard_group_permissions_list_79" />&nbsp;<label for="sf_guard_group_permissions_list_79">Suivi des livraisons/lecture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="80" id="sf_guard_group_permissions_list_80" />&nbsp;<label for="sf_guard_group_permissions_list_80">Suivi des entrees /sorties/ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="81" id="sf_guard_group_permissions_list_81" />&nbsp;<label for="sf_guard_group_permissions_list_81">Suivi des entrees /sorties/lecture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="82" id="sf_guard_group_permissions_list_82" />&nbsp;<label for="sf_guard_group_permissions_list_82">Suivi du budget/ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="83" id="sf_guard_group_permissions_list_83" />&nbsp;<label for="sf_guard_group_permissions_list_83">Suivi du budget/lecture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="84" id="sf_guard_group_permissions_list_84" />&nbsp;<label for="sf_guard_group_permissions_list_84">Bilan de fin de saison/ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="85" id="sf_guard_group_permissions_list_85" />&nbsp;<label for="sf_guard_group_permissions_list_85">Bilan de fin de saison/lecture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="86" id="sf_guard_group_permissions_list_86" />&nbsp;<label for="sf_guard_group_permissions_list_86">Administration/ecriture</label></li>
<li><input name="sf_guard_group[permissions_list][]" type="checkbox" value="87" id="sf_guard_group_permissions_list_87" />&nbsp;<label for="sf_guard_group_permissions_list_87">Administration/lecture</label></li></ul>

		  		  </div>
		</div>
		
	  </div>

le code CSS

.checkbox_list
{
border:#000000 solid 0px;
width:120px;
display:block;
padding:0px;
margin:0px;
z-index:100;
}

.checkbox_list label
{
display:none;
z-index:100;
}

.checkbox_list input
{
z-index:100;
}

.checkbox_list ul
{
border:#0000FF solid 0px;
width:120px;
padding:0px;
margin:0px;
display: inline;
z-index:100;
}

.checkbox_list li
{
border:#FF0000 solid 0px;
width:10px;
height:30px;
text-decoration:none;
list-style-type:none;
margin:0px;
padding:0px;
padding-left:22px;
padding-right:26px;
display: block;
float:left;
z-index:100;
}

.tableau_droit
{
float:left;
width:100%;
z-index:1;
}

.droit_left
{
float:left;
width:600px;
z-index:1;
position:relative;
}

.droit_right
{
width:120px;
height:456px;
position:absolute;
margin-left:478px;
margin-top:38px;
z-index:100;
float:left;
}

sous firefox pas de probleme les checkbox sont au dessus du tableau alors que sur IE7, elle sont a droite du tableau !!! Smiley bawling

le code html est généré par symfony donc je peux le modifier mais j'ai des limites, aucune contrainte sur le css

avez-vous une idée ??? merci d'avance !!!
Modifié par djey (25 Nov 2009 - 17:13)

Mikachu

25 Nov 2009 à 16:45

Salut,

Une page en ligne ? Ca serait quand même plus simple que du code au kilomètre. Smiley cligne

djey

25 Nov 2009 à 17:06

Mikachu a écrit :
Salut,

Une page en ligne ? Ca serait quand même plus simple que du code au kilomètre.

J'aimerais bien mais c'est en interne ( pas le droit de faire sortir le code ), j'ai même pas le droit de montrer pour qui je travail.

Mais si copie colle le code dans une page html standard le css et le html et que tu regarde entre IE7 et firefox. on voit la différence.

Désolé
Modifié par djey (25 Nov 2009 - 17:09)

Agylus

25 Nov 2009 à 17:08

Salut,

Quand on utilise position:absolute, on doit utiliser aussi les propriétés left ou right et top ou bottom. Dans ton code, aucune n'est renseignée.

djey

25 Nov 2009 à 17:13

Agylus a écrit :
Salut,

Quand on utilise position:absolute, on doit utiliser aussi les propriétés left ou right et top ou bottom. Dans ton code, aucune n'est renseignée.

merci enormement tu as trouver la solution il manquer le

left:0px;

dans la classe .droit_right

merci beaucoup

et encore une victoire pour le forum Alsacreation !!! Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

[résolu]Position absolute sour IE7 avec un code que je ne maitrise pas