Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1592 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  [long message] IE6, Firefox et CSS - mes problemes et votre aide

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[long message] IE6, Firefox et CSS - mes problemes et votre aide

n°789028
marcolas
Posté le 01-03-2006 à 16:39:27  profilanswer
 

Bonjour à tous
Je suis en train de remonter un site web et le passer de full HTML à full CSS. J'ai des problemes de compatibilité entre IE6 et Firefox et je m'arrache les cheveux.  
 
Si quelqu'un peut jeter un oeil, mon seul probleme est une colonne à droite qui est bien positionnée sous IE et mal sous FF. En fait, soit j'utilise margin-left: soit j'utilise left: et ca fonctionne alors sous l'un des deux navigateurs et pas l'autre. J'ai tout essayé et je ne trouve pas de solution.  
 
Si quelqu'un peut jeter un oeil deux minutes, ce sera sympa :)
 
Voici le code CSS
 

html, body{
 margin: 0 0 0 5px;
 margin-top:-5px;
padding: 0;
 background: #000;
}
 
body{
 background: #000;
 color: #fff;
 font-size: 80%;
 line-height: 1.4;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 
}
 
h1, h2, h3, h4, h5, h6{
 font-family: "Verdana", sans-serif;
}
 
h1{font-size: 1.5em;}
h2{font-size: 1.4em;}
h3{font-size: 1.3em;}
h4{font-size: 1.2em;}
h5{font-size: 1.1em;}
h6{font-size: 1em;}
 
pre, code{
 font-size: 1.2em;
}
 
pre{
 width: 100%;
 overflow: auto;
 border: 1px solid #CCC;
}
 
fieldset{
 border: none;
}
 
label{
 cursor: pointer;
 
}
 
.field label{
 display: block;
}
 
img {border:0;}
 
input,textarea{
 border: 1px solid #999;
}
 
textarea{
 width: 90%;
 font-size: 1em;
 font-family: "Verdana", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
}
 
a{
 color: gray;
 text-decoration: underline;
}
 
a:visited{
 color: gray;
 text-decoration: underline;
}
 
a:hover{
 color: gray;
 text-decoration: none;
}
 
 
a.rouge{
 color: #CC0000;
 text-decoration: underline;
}
 
a.rouge:hover {
 color: #CC0000;
 text-decoration: none;
}
 
a.rouge:active {
 color: #CC0000;
 text-decoration: underline;
}
 
a.rouge:visited {
 color: #CC0000;
 text-decoration: underline;
}
 
 
 
.left{
 float: left;
 margin-right: 1em;
}
 
.right{
 float: right;
 margin-left: 1em;
}
 
/* La page
-------------------------------------------------------- */
 
 
#page {position:relative; display:block; background:#000; color: inherit;border-left:200px solid #000;border-right:200px solid #000;}
#main {display:block; margin-left:-210px; margin-right:-200px; margin-top:0; padding:5px 0 0 0; }
#sidebar {float:left; position:relative; width:200px; left:0px;top: 50px; padding-left: 5px; }
/*#sidebar2 {float:right; position:relative; width:190px; top:50px; margin:0;}*/
#sidebar2 {float:right; position:absolute; width:190px; top:50px; margin-top:150px; left:600px;}
#content {margin-left:200px; margin-top:60px; margin-right:210px; position:relative; display:block; height:1%; text-align: left;padding: 0 5px;}
 
.clear {clear:both;}
 
/* L'ent괥
-------------------------------------------------------- */
#top{
 height: 124px;
        width: 1000px;
        background: 000;
        position:relative;
        margin-bottom: -2px;
        padding: 0;
 /*padding-top: 20px;*/
 
}
 
#fond-top{
 height: 25px;
       
        background: #000 url(http://www.cloneweb.net/images/2004_2/degrade_haut.jpg) repeat-y left top;
        position:relative;
        margin-bottom: -2px;
        margin-top: -5px;
        padding-left: 5px;
        vertical-align: middle;
 
}
 
#top h1{
 height: 80px;
 line-height: 80px;
 margin: 0 0 0 50px;
 padding-top: 20px;
 color: #AB2121;
 text-align: left;
 font-size: 2em;
}
 
#top h1 a{
 text-decoration: none;
 color: #AB2121;
}
 
/* Le pr鬵de
-------------------------------------------------------- */  
#prelude{
 background: transparent;
 color: #DFDFDF;
 text-align: center;
 position: absolute;
 margin: 0;  
 padding: 0 1ex;
}
 
#prelude a{
 color: #DFDFDF;
 background: transparent;
}
 
#prelude a:hover{
 color: #666;
 background: transparent;
}
 
/* Le contenu
-------------------------------------------------------- */
.day-date{
 padding-left: 20px;
 margin-left: -25px;
 color: #888;
 background: transparent ;
 font-style: italic;
}
.post{
 margin-bottom: 4em;
 padding: 0;
 
}
 
.post-title{
 color: #FFFFFF;
        font-family: Arial;
        width: 565px;
 margin-bottom: 0;
        font-size: 1.3em;
        height:22px;
        background: #000 url(http://www.cloneweb.net/images/bandeau_news3.gif) repeat-y left top;
}
 
.post-title a{
 color: #fff;
 text-decoration: none;
}
 
 
.post-title a:hover{
 color: #fff;
 text-decoration: none;
}
 
 
.post-title a:visited{
 color: #fff;
 text-decoration: none;
}
 
 
.post-info{
 margin-top: 0;
 color : #CCCCCC;
 text-align:left;
 font-size:smaller;
 border-top: 1px solid #CC0000;
        width: 565px;
 }
 
.post-content{
 text-align: left;
        width: 565px;
        margin-top: -10px;
 }
 
.post-content-cat a{
 color: #ccc;
        width: 565px;
        text-decoration: underline;
 }
 
.auteur{
 color : gray;
 font-weight: bold;
 text-align:right;
 font-size:smaller;
width: 565px;
 
 }
 
.billet{
 text-align:right;
 font-size:smaller;
 }
 
.post-content blockquote{
 font-family: Georgia, serif;
 font-style: italic;
}
 
 
.post-info-co{
 color: #aaa;
 text-align: right;
 padding-left: 20px;
 font-size: smaller;
 font-weight: bold;
}
 
 
 
#trackbacks h3, #comments h3{
 color: #AB2121;
 border-bottom: 1px solid #D2D2D2;
 }
 
#trackbacks blockquote, #comments blockquote{
 border: 1px solid #D2D2D2;
 margin: 0;
 padding: 0 1em;
}
 
/* La barre de navigation
-------------------------------------------------------- */
 
#sidebar , #sidebar2 {
 color : gray;
 font-size: 0.9 em;
 line-height: 1.3em;
 }
 
 
 
#sidebar div, #sidebar2 div{
 margin: 10px 30px 0 0;
 padding-bottom: 10px;
background-color : #333;
 
 
}
#sidebar a, #sidebar2 a{
 color : gray;
 font-size: 0.9 em;
 line-height: 1.3em;  
 text-decoration: none;
 }
 
#sidebar a:hover, #sidebar2 a:hover{
 color : gray;
 text-decoration: underline;
 }
 
#sidebar a:active, #sidebar2 a:active{
 color : gray;
 text-decoration: none;
 }
 
#sidebar a:visited, #sidebar2 a:visited{
 color : gray;
 text-decoration: none;
 }
 
#sidebar div, #sidebar2 div{
 border-bottom: 0px solid #FFFFFF;
 color: inherit;
}
 
#sidebar div ul,  #sidebar2 div ul{
 margin: 0;
 padding: 0;
 list-style: none;
}
 
#sidebar h2,  #sidebar2  h2, #sidebar h3, #sidebar2  h3{
 color: #CC0000;
 margin: 0 0 1ex 0;
 text-align: left;
 margin-left: 15px;
}
 
 
 
#sidebar h3, #sidebar2  h3{
 border-top: 1px solid #D2D2D2;
 padding-top: 10px;
 font-size: 1.4em;
 text-align: left;
 margin-left: 15px;
}
 
#sidebar2  div#search{
 background: #333;
 color: inherit;
text-align : center;
 line-height: 2.3em;
}
 
#search fieldset, #search p{
 margin: 0;
 padding: 0;
}
 
#statistiques {
 padding-top: 10px;
 }
 
#q{
 padding-left: 18px;
 background: #fff url(img/q.png) no-repeat left;
}
 
#sidebar div#calendar{
 /*border-top: 1px solid #F0F0F0;*/
}
 
#sidebar div#calendar table{
 font-size: 0.8em;
 text-align: left;
 margin: 0 auto;
 border-collapse: collapse;
}
 
#sidebar div#calendar table caption{
 margin: 0 auto;
}
 
#sidebar div#calendar table th{
 color: #AB2121;
 background: transparent;
}
 
#sidebar div#calendar table td{
 /*width: 14%;*/
 line-height: 1.5em;
 border: 1px solid #D2D2D2;
}
 
 
#sidebar2 #lastComments {
 font-size: 0.8em;
 list-style-type: none;
 margin: 0;
 padding: 0;
 }
 
 
 
 
 
/* Le pied de page
-------------------------------------------------------- */
#footer{
 font-size: 0.8em;
        margin: 0;
 width: 565px;
 padding: 0 1em ;
 border-top: 1px solid #333;
 color: #fff;
 
 text-align: center;
}
 
#footer a{
 color: #999;
}


 
et le code PHP (en partie du moins)
 

<body>
 
<div id="page">
 
 
<div id="main">
<div id="top">
 
<a href="<?php dcInfo('url'); ?>"><img src="http://www.cloneweb.info/dotclear/images/bandeau2006.jpg" width="1000" border="0"></a>
 
 
<div id="fond-top">
<font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>&nbsp;</font>
</div>
</div>
 
 
 
 
 
 
  <div id="sidebar">
   
   
   
 
   
   
       
   <?php /* Affichage du blog "selection uniquement si des billets sont
    pr鳥nts */ ?>
   
   
   <?php dcLangList('<div id="languages"><h2>Langues</h2><ul>%s</ul></div>'); ?>
   
   
   
          <div id="categories">
    <img src="http://www.cloneweb.info/dotclear/images/t_rubriques.jpg">
    <?php dcCatList(); ?>
   </div>
 
 
                                <div id="archives">
    <img src="http://www.cloneweb.info/dotclear/images/t_archives.jpg">
    <?php dcMonthsList(); ?>
                                <a href="#">Archives antérieures</a>  
           </div>
 
<div id="contacts">
<img src="http://www.cloneweb.info/dotclear/images/t_contacts.jpg">
<a href="mailto:cloneweb@cloneweb.net">Ecrire au webmaster</a>
<br><a href="#">Proposer une actu</a><br>
Newsletter<br>
L'actu sur votre site
</div>
 
<div id="links">
            <img src="http://www.cloneweb.info/dotclear/images/t_partenaires.jpg">
    <?php dcBlogroll::linkList(); ?>
Bannières<br>
Votre site ici
   </div>
 
   
  </div>
 
  <div id="sidebar2">
   
   
   
   <div id="search">
    <form action="<?php dcInfo('search'); ?>" method="get">
     
     <img src="http://www.cloneweb.info/dotclear/images/t_recherche.jpg">     <p class="field"><input name="q" id="q" type="text" size="10"
     value="<?php dcSearchString(); ?>" accesskey="4" />
     <input type="submit" class="submit" value="ok" /></p>
     
    </form>
   </div>
   
   <?php dcSelection('<div id="selection"><h2>&Agrave; retenir</h2><ul>%s</ul></div>'); ?>
   
   
   
   <div id="tribune">
                        <img src="http://www.cloneweb.info/dotclear/images/t_blablabox.jpg">
                 <IFRAME src="http://www.cloneweb.net/tribune2.php" frameBorder=0 width=160 scrolling=yes height=375 align="center"></IFRAME>
                <IFRAME src="http://www.cloneweb.net/tribune_txt.php" frameBorder=0 width=160 scrolling=no height=100 align="center"></IFRAME>
                 </div>
 
 
                        <div id="sondage">
                        <img src="http://www.cloneweb.info/dotclear/images/t_decomptes.jpg">
                 <IFRAME src="http://www.cloneweb.net/compteur_swdvd.htm" frameBorder=0 width=150 scrolling=no height=90 align="center"></IFRAME><br><br><IFRAME src="http://www.cloneweb.net/compteur_spiderman2.htm" frameBorder=0 width=150 scrolling=no height=90 align="center"></IFRAME><br><br><IFRAME src="http://www.cloneweb.net/compteur_xmen3.htm" frameBorder=0 width=150 scrolling=no height=90 align="center"></IFRAME>
                 </div>
 
   
   
   
  </div>
   
  <div id="content">
   <?php if ($err_msg != '') : /* Si on a une quelconque erreur, on l'affiche */?>
    <div class="error"><strong>Erreur : </strong>
    <?php echo $err_msg; ?></div>
   
   <?php elseif ($preview) : /* Si on demande la pr鶩sualisation d'un commentaire */?>
    <h3>Commentaire pour <?php dcPostTitle(); ?></h3>
    <div id="comment-preview">
     <blockquote>
     <?php dcCommentPreview(); ?>
     </blockquote>
    </div>
     
    <h3>Changer le commentaire</h3>
    <?php include dirname(__FILE__).'/form.php'; ?>
     
   <?php elseif ($mode != 'post') : /* Si aucune erreur et mode != post on affiche une liste de billets */?>
    <?php # Phrase affich頥n cas de recherche (%s est le mot cherch驍
    dcSearchString('<p>R&eacute;sultats de votre recherche de <em>%s</em>.</p>');
    ?>
     
    <?php include dirname(__FILE__).'/list.php'; ?>
     
   <?php else : /* Sinon, mode = post, donc billet unique (avec commentaires et tout le reste)*/?>
    <?php include dirname(__FILE__).'/post.php'; ?>
   <?php endif; ?>
   
  </div>
 
 
 
   
<div class="clear"></div>
</div>


 
Il s'agit d'un thème dotclear modifié
http://blog.accessoweb.info/?2006/ [...] -red-fluid
et donc d'un site tournant sous dotclear
 
La page est consultable à l'adresse http://www.cloneweb.info/dotclear/
(ne pas prêter attention aux tests idiots qui ont pu etre fait, c'est uniquement un site de travail)
 
Merci à tous ceux qui voudront bien jeter un coup d'oeil.


Message édité par marcolas le 01-03-2006 à 16:40:22
mood
Publicité
Posté le 01-03-2006 à 16:39:27  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  [long message] IE6, Firefox et CSS - mes problemes et votre aide

 

Sujets relatifs
aide svp[html] firefox problème d'affichage d'image ?
Aide pour une réalisation de BDBesoin d'aide pour un header
[AIDE] creation de book sur CD/web[Flash]intégration swf dans un fichier html -> pb dim. sous firefox
[Blender] Aide à la modélisation (Jante Voiture)[blender] débutant qui demande de l'aide
Des problèmes pour générer et/ou imprimer un PDF ? 
Plus de sujets relatifs à : [long message] IE6, Firefox et CSS - mes problemes et votre aide


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR