28172 sujets

CSS et mise en forme, CSS3

Problème de rendu selon le navigateur

Bonjour,
j'ai un petit problème niveau de l'affichage de mon site en fonction du navigateur le rendu n'est pas le meme .

Comment si possible résoudre ce problème?

Voici les différents rendus respectivement firefox , chrome , ie , opera .

upload/38301-renduFF.png firefox ,rendu OK
upload/38301-renduChrom.png chrome OK
upload/38301-renduIE.png IE , Probleme
upload/38301-renduOP.png Opera , probleme

Quelqu'un as une idée, svp?

voici mon css :
/* 
    Document   : style
    Created on : 11 mai 2011, 14:42:02
    Author     : LIT
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation  http://www.w3.org/TR/REC-CSS2/
 
*/

body{
    background-color: #E6E8E7;
    
}
/*Propriétés du centre*/
.global{
    float:none;
    background-color: #A3A4A4;
    border-radius:10px;
    border: solid #CECECE 4px;
    width:1024px;
    height: 600px;
    margin-left: 120px;
    margin-top:25px;
    position: fixed;

}



/*Propriétés du header*/
.header{
    float:none;
    background-color:#BEBFBE;
    width: 1024px;
    height: 150px;
    margin-left:120px;
    border-radius:10px;
    border: solid #CECECE 4px;
}
.header h1{
    font-family: verdana;
    font-size:  24px;
    text-align: center;
}
/*Propriétés de la colonne de gauche*/
.col_gauche{
    float:left;
    background-color: #DBDEDD;
    width: 180px;
    border-radius:10px;
    margin: 5px;
}
/*Propriétés de la colonne de droite*/
.col_droite{
    float:right ;
    background-color: #DBDEDD;
    border-radius:10px;
    width: 180px;
    height: auto;
    margin: 5px;

}
.centre{
    background-color: #DBDEDD;
    border-radius:10px;
    width: 650px;
    min-height: 200px;
    height: auto;
    margin-left: 187px;
    margin-bottom: 15px;
    margin-top: 5px;

}

ul,li{
    list-style-type:none;

}
#titre{
    margin-left: 20px;
    color: blue;
}
#titre:hover{
    text-align: center;
    color: yellow;
}


.footer{
    float:right;
    background-color:#DBDEDD;
    width: 1015px;
    height: 50px;
    margin-top: auto;
    margin-right: 5px;
/*    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;*/
    border-radius: 10px;
/*    behavior: url('PIE.htc');*/
}

.footer h1{
    font-family: verdana;
    font-size:12px;
    text-align: center;
}


voici mon code HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
        <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
        <!--[if lte IE 8]>
        <script type="text/javascript" src="oundies.js">
        </script><![endif]-->
        <title>TEST</title>
    </head>
    <body>
        <div class="header">
                <h1>TEXTE DE L EN-TETE</h1>
        </div>
        <div class="global">
            <div class="col_gauche">
                <b id="titre">Text de Gauche</b>
                <ul>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </div>
            <div class="col_droite">
                <b id="titre">Text de Droite</b>
                <ul class="toto">
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </div>
            <div class="centre">
                <?php
                if (isset ($_SESSION['auth'])&&($_SESSION['auth']=="ok")){
                    echo 'WELCOME TO THE THIRD DIMENSION';
                   echo '<a href="logout.php">Logout</a>';
                }
               else{
                    echo'<form class="form" action="auth.php" method="post">
                        <fieldset><legend>Login to test !!! </legend>
                       <b>Name: </b><input class="input" type="text" name="login" value=""/>
                        <b>Password: </b><input class="input" type="password" name="pass" value=""/>
                      <input type="submit" value="go"/>
                       </fieldset>
                   </form>';
               }
              ?>
                    
            </div>
            
            <div class="footer">
                <h1>TEXTE DE PIED DE PAGE</h1>
        </div>
    </div>
        
    </body>
</html>



Par avance , MERCI
Modifié par outstore (16 Jun 2011 - 09:47)
Laurie-Anne a écrit :
Euh... tu ne te moquerais pas un tout petit peu du monde là ?


Désolé, je ne me moque de personne , je rappelle que je débute en CSS, merci de votre compréhension Smiley rolleyes
J'ai corrigé mon problème de DOCTYPE, mais j'ai toujours le bloc central qui décroche sous IE. Smiley bawling

Quelqu'un as une idée , svp? Smiley confused

merci
Modifié par outstore (16 Jun 2011 - 09:54)
Bonjour à toutes et à tous,

dans une autre discussion que tu as marqué comme résolu, j'ai refais entièrement le code HTML et le code CSS afin de corriger tes bugs !

Tu as répondu que tu as trouvé la solution et j'en ai déduis que tu n'as pas pris le temps d'extraire le code HTML et CSS que je t'avais fourni pour voir comment j'ai fait !

Donc je constate, ainsi que Laurie-Anne l'avait fait avant moi, que tu ne prends pas la peine d'étudier le code et les commentaires que nous te fournissons gentiment ! Et ensuite tu reviens avec une nouvelle discussion similaire comme si nous ne savions pas de quoi il s'agissait !

Je pense que tu nous prends pour des idiots et des imbéciles. Ce n'est pas à nous de faire ton travail. Nous voulons bien t'aider, mais il y a des limites à ne pas dépasser.

Je ne te dis pas @+
Modifié par Artemus24 (16 Jun 2011 - 11:10)
Ton problème est un problème de taille des conteneurs. si tu baisses leur width, le pb disparait. (ex: augmenter la taille du global à 1030px).
Modifié par kayorn (16 Jun 2011 - 12:02)
Sujet clos
Aller à