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

Marsh Posté le 01-03-2006 à 16:39:27

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> </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>À 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é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

Marsh Posté le 01-03-2006 à 16:39:27

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *