Probleme décallage tableau FF/Safari [Résolu]

Signaler
Messages postés
6
Date d'inscription
jeudi 2 novembre 2006
Statut
Membre
Dernière intervention
16 septembre 2008
-
Messages postés
6
Date d'inscription
jeudi 2 novembre 2006
Statut
Membre
Dernière intervention
16 septembre 2008
-
Bonjour,

Après moult recherches je n'ai pas trouvé de solution à mon problème c'est pourquoi je me tourne vers vous.

J'ai une page contenant un tableau. Je n'ai pas d'autre tableau à part celui là.
Le problème ? voyez par vous même :

Le tableau se décale complètement sur certaines lignes. Le pire c'est que ce problème est aléatoire, il ne se produit pas à chaque fois.

J'ai validé mon HTML(XHTML 1.0 et fait des tests en HTML 4.01) et mon CSS (valider en 2.0 avec problèmes sur les normes de CSS 3).

Je travail en ASP.NET 2.0 avec C# sous visual studio 2008.

Le CSS fait près de 4000 lignes de long, c'est pourquoi je ne vous met que le CSS du tableau.

Le HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
    
    Liste des Utilisateurs

</title>
    <script type="text/javascript" language="javascript" src="../_scripts/effects.js" ></script>
<script type="text/javascript" language="javascript" src="../_scripts/popID.js" ></script>
    <script language="javascript" type="text/javascript">
    function changeBody()
    {
        document.getElementById('jsBody').className = 'changeBody';
    }    
    </script>
<link href="../App_Themes/White/default.css" type="text/css" rel="stylesheet" /></head>

    <form method="post" action="users.aspx" id="aspnetForm">

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

         
        

             
            
                
<!-- Début Header -->
[javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$logoImg','') ]

    <!--Bouton de Login Client-->    
    [../Disconnect.aspx 
         
    ]
    
    <!--La Toolbox qui affiche le numéro de téléphone et permet de choisir la langue-->
    

        M. Test Test 
    

<!--La Barre de Navigation principale-->

    
        <li>
    

[javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$menu0','') Accueil]

</li>
<li id="menu_onglet_actif" >
    

[javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$menu1','') Evalués]

</li>
<li>

    

[javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$menu2','') Groupes]

</li>
<li>
    

[javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$menu3','') 360°]

</li>
<li>
    

[javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$menu4','') Modules +]

</li>

<li>
    

[javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$menu5','') Mon compte]

</li>

    

    

        

            

        

    

    
     
        
     
            

                
                    <li class="ss_tab_actif"  id="ss_tab_evalues" >
    [javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$sub0','') Evalués]
</li>
<li id="ss_user_creation" >

    [javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$sub1','') Créer un nouvel évalué]
</li>
<li id="ss_user_import" >
    [javascript:__doPostBack('ctl00$CPHeaderMain$ucNavBar$sub2','') Importer un fichier Excel]
</li>

                
            

        
  
    

    

        

            

        

    

<!-- Fin du Header -->

            
                
               
            <!-- Début du Contenu de la page -->
            

                    

                        

                            

                        

                    

                    
     
                        
     
                            

                                
    

        

            <li>Identifiant

</li>
            <li>Mot de passe

</li>
            <li>Email

</li>
        
    

    <!-- Title -->
    Mes évalués

    <!-- Message d'info -->
    Accédez instantanément à votre Talent Pool !

    

    
    Cet espace vous permet de créer vos évalués et de leur associer des évaluations à compléter. C'est également à partir de cet espace que vous pouvez accéder à leurs profils.
    

    Le module de recherche ci-dessous vous permet  d'effectuer des recherches sur l'ensemble de votre base d'évalués en combinant une multitude de critères de recherche (voir notamment la recherche avancée).
    

    <!--

-->

    
    

    

        
            <li class='selected'>

[javascript:__doPostBack('ctl00$CPForm$ucSearch$ctl00','') Recherche simple]

</li><li>

[javascript:__doPostBack('ctl00$CPForm$ucSearch$ctl01','') Recherche avancée]

</li>
        
    

    

        

            <li class='first'>Prénom

</li><li>Nom

</li><li><label for="ctl00_CPForm_ucSearch_ctl04">Ne montrer que mes évalués</label></li>
        
        

    

    

        
        

    

    
            ----

            ,
            Nom,
            Création,
            Evaluateur,

            ,
            ,
       
    
----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
        ----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
       ----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
        ----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
       ----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
        ----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
        ----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
        ----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
        ----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
        ----

            ,
            Mme Test test,
            08/09/2008 10:49:57,
            Test test,

            <li class="feu_rouge" ></li><li class="feu_gris" /><li class="feu_gris" />,
            ,
       
    
        ----

            &amp;lt;&amp;lt;&amp;lt;12345678910&amp;gt;&amp;gt;&amp;gt;,

       
       

    

                            

                        
  
                    

                
                

                    

                        

                    

                

                <!--Le powered by  -->
                

                    v2.0.0.29938&amp;nbsp;

                    

                        Thème

                        <select name="ctl00$ddlTheming" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ddlTheming\',\'\')', 0)" id="ctl00_ddlTheming">
    <option value="Black">Black</option>

    <option selected="selected" value="White">White</option>

</select>

                        

                    

                    

                

                
            

        

    

    

<script language="javascript">hideID();</script></form>

</html>


CSS :
/* -------------------------------------------------------------*/
/* ----------------->>> Tableau des évalués <<<-----------------*/
/* -------------------------------------------------------------*/

.tab_evalues {
clear: both;
color:#555;
padding-bottom: 10px;
margin-bottom:5px;
margin:auto;
width:740px;
}
.tab_evalues td{
border:0px;
}
.tab_evalues .aucunResultat{
text-align:center;
width:100%;
}
.tab_evalues tr.ligne_evalue{
clear:both;
margin:0;
height:25px;
background:#F2F2F2;
padding:0px;
color:#555;
}
.tab_evalues tr.ligne_evalue:hover{
background-color:#DDDDDD;
}
.tab_evalues tr.ligne_evalue a{
color:#555;
}
.tab_evalues tr.ligne_evalue:hover a:hover{
color:#4CABDB;
}
.tab_evalues .tab_evalues_entete{
color: #555;
background-color: #ccc;
border-bottom:2px solid #ccc;
border-top:2px solid #ccc;
}
.tab_evalues .tab_evalues_entete a{
color: #555;
}
.tab_evalues .tab_evalues_entete:hover a{
color: #555;
}
.tab_evalues .tab_evalues_entete:hover a:hover{
color: #555;
}
/*La liste des pages */
.pages_list{
padding: 0 0 15px 0;
}
.pages_list a{
color: gray;
}
.pages_list .PageLink{
padding: 5px;
}
.pages_list a:hover{
color: #4CABDB;
}
/* Cellules génériques */
.tab_evalues tr td{
float:left;
height:25px;
line-height:25px;
width:145px;
margin:0px;
text-align:left;
}
.tab_evalues tr.ligne_evalue td{
border:0px solid #999;
border-top:1px solid #999;
}
.tab_evalues tr.pages_list td{
border:0px solid #999;
border-top:1px solid #999;
width:740px;
}
.tab_evalues tr td.csDate{
width:130px;
}
.tab_evalues tr td.csDateUser{
width:150px;
}
.tab_evalues tr td.csIcones{
width:50px;
text-align:right;
padding:0;
padding-right:10px;
vertical-align:text-top;
}
.tab_evalues tr td.csIconeEdit{
width:37px;
text-align:right;
vertical-align:text-top;
padding-right:10px;
}
.tab_evalues tr td.csIconeInfo{
width:16px;
text-align:right;
vertical-align:text-top;
padding-right:10px;
}
.tab_evalues tr td.csIconesDouble{
width:60px;
text-align:center;
padding:0;
}
.tab_evalues tr td.csFeux{
text-align:center;
width:80px;
vertical-align:text-top;
padding:0;
}
.tab_evalues tr td.csFeux img{
margin:0 1px 0 1px;
}
/* Tableau évalué */
.tab_evalues tr td.csNom{
width:250px;
}
.tab_evalues tr td.csPrenom{
width:120px;
}
.tab_evalues tr td.csRE{
width:139px;
}
.tab_evalues tr td.csREUser{
width:163px;
}
.InfoIcone{
width:16px;
height:16px;
border:0px;
background: url("images/info.png") no-repeat;
cursor:pointer;
margin-top:4.5px;
}
.EmailIcone{
width:22px;
height:22px;
border:0px;
background: url("images/mail.png") no-repeat;
cursor:pointer;
margin-top:1.5px;
}
.tab_evalues tr td.csDebut{
padding-left:10px;
}
.tab_evalues tr.tab_evalues_entete td.csDebut{
background-position:left bottom;
}
.tab_evalues tr td.csMilieu{
background-position:center center;
}
.tab_evalues tr.tab_evalues_entete td.csMilieu{
background-position:center bottom;
}
.tab_evalues tr td.csFin{
background-position:right center;
}
.tab_evalues tr.tab_evalues_entete td.csFin{
background-position:right bottom;
}
/*Les feux */
.csFeux ul li{ 
padding: 0;
margin: 5.5px 1px 0 1px;
float : left;
width: 12px;
height: 14px;
}
.feu_vert{
background:url("images/feu_vert.png") 0% 50% no-repeat;
}
.feu_orange{
background:url("images/feu_orange.png") 0% 50% no-repeat;
}
.feu_rouge{
background:url("images/feu_rouge.png") 0% 50% no-repeat;
}
.feu_gris{
background:url("images/feu_gris.png") 0% 50% no-repeat;
}


Ce problème ne se produit que sur FireFox et de temps en temps sur Google Chrome(moteur de safari). Il se produit sur d'autres pages de la même configuration.

Merci par avance de votre aide.

3 réponses

Messages postés
6
Date d'inscription
jeudi 2 novembre 2006
Statut
Membre
Dernière intervention
16 septembre 2008

un float left qui trainait!
Messages postés
6
Date d'inscription
jeudi 2 novembre 2006
Statut
Membre
Dernière intervention
16 septembre 2008

Arf désolé pour le code et le CSS avec les mauvaises balises...
je n'arrive pas a éditer mon premier message
Messages postés
6
Date d'inscription
jeudi 2 novembre 2006
Statut
Membre
Dernière intervention
16 septembre 2008

En page HTML fixe, avec le CSS complet, les images et le code HTML d'une page "normal" le bug n'apparait pas.

Cela pourrait-il venir d'un problème à la génération du code par le C# sachant que le code entre 2 rafraichissements de page est exactement le même ?