Sujet Précédent Sujet Suivant

Probleme décallage tableau FF/Safari

Résolu
HolyNoodle Messages postés 6 Date d'inscription jeudi 2 novembre 2006 Statut Membre Dernière intervention 16 septembre 2008 - 16 sept. 2008 à 10:00
HolyNoodle Messages postés 6 Date d'inscription jeudi 2 novembre 2006 Statut Membre Dernière intervention 16 septembre 2008 - 16 sept. 2008 à 11:32
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

Réponse 1 / 3
HolyNoodle Messages postés 6 Date d'inscription jeudi 2 novembre 2006 Statut Membre Dernière intervention 16 septembre 2008
16 sept. 2008 à 11:32
un float left qui trainait!
3
Réponse 2 / 3
HolyNoodle Messages postés 6 Date d'inscription jeudi 2 novembre 2006 Statut Membre Dernière intervention 16 septembre 2008
16 sept. 2008 à 10:04
Arf désolé pour le code et le CSS avec les mauvaises balises...
je n'arrive pas a éditer mon premier message
0
Réponse 3 / 3
HolyNoodle Messages postés 6 Date d'inscription jeudi 2 novembre 2006 Statut Membre Dernière intervention 16 septembre 2008
16 sept. 2008 à 10:23
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 ?
0

Discussions similaires

Turbo C++
cs_jrod -
cmarsc -

1 réponse
tableau de nombre décimal vers tableau de nomber binaire
mkhadi -
mkhadi -

2 réponses
Etablir toutes les combinaisons possibles du Lotto
KBNchapal -
Mikaels35 -

6 réponses
TURBO C++ et blocks que choisir
norman bates -
Vale Erian -

1 réponse
afficher un tableau en php
Larose_1921 -
s -

1 réponse
Rejoignez-nous