Prolbème compatibilité pour des floats sous ie6

Question

lilileeelooo

18 Sep 2007 à 09:10

Bonjour,
j'ai crée un site avec un style css basé sur des floats.
Tout s'affiche normalement sous firefox et ie7, mais impossible sous ie6, le contenu s'affiche en bas ??!!! Après plusieurs retouches je perds patience...
Si vous avez une idée....Merci d'avance !

CSS

/* Formatage des styles pr?d?finis */
* {
padding: 0;
margin: 0;
font-family: arial;
font-size: 12px;
color: #424242;
border: none;
list-style-type: none;
text-decoration: none;
background-repeat: no-repeat;
}

body {
background-color: #2f93a8;

}

a:hover{text-decoration : underline}

/**********************************************************/
/* Identique pour chaque page */
/**********************************************************/

#all {
width: 1024px;
margin: 0 auto;
position :relative;
}

.ital{
font-weight:bold;

}

/***************************************************************************/
/* struture principale : colonne de gauche + contenu principal
/***************************************************************************/
#toutContenu{
height: 47px;
width:501px;
float: left;

}

#topContenu{
height: 47px;
width:688px;
float: left;
}
#haut{
background-image: url(../images/hautvert.jpg);
height: 81px;
width:988px;
float: left;
margin: 0 auto;
}

#contenu{
width:689px;
float: left;
background-image: url(../images/milieuContenu.jpg);
background-repeat:repeat-y;
height:852px;
margin:0 auto;
text-align:justify;
}
#texte{
margin:20px;
text-align:justify;
float: left;
}
#titrerub{
font-weight:bold;
font-style:italic;
font-size:13px;
margin-bottom:6px;

}

.photo img{
text-decoration:none;
border:black solid 2px;
width:100px;
opacity:0.85;
filter : alpha(opacity=85);
}

.photo img:hover{
text-decoration:none;
border:black solid 2px;
width:100px;
opacity:1;
filter : alpha(opacity=100);
}

.infos{
min-height:133px;
float:left;
margin-left:50px;
width:340px;
text-align:justify;
}
.infosVideos{
width:520px;
min-height:350px;

}
.photo{
height:133px;
width:100px;
float:left;
margin-left:20px;
}

#bas{
background-image: url(../images/basContenu.jpg);
height: 42px;
width:688px;
float: left;
background-color: #A1E2AC;
text-align:left;
}
#logoJardin{
float:left;
width:38px;
padding-left:120px;
margin-bottom:130px;
margin-right:30px;
}
#logoJardin img{
}

form{
width:200px;
float:left;
}

#opti{
font-size:8.5px;
font-style:italic;
}

/***************************************************************************/
/* Colonne de gauche */
/***************************************************************************/

#gauche{
width: 300px;
float: left;
background-color: #A1E2AC;
background-image: url(../images/gauche.jpg);
background-repeat:repeat-y;
height:941px;

}
#recherche{
-moz-border-radius:0.8em;
width:195px;
margin-top:30px;
float:left;
background-color:#E2E9EA;
padding:2px;
margin-bottom:2px;
border:1px solid #bdbcbc;
margin-left:90px;
}

#recherche select{
width:105px;
float:left;
padding:2px;
margin-bottom:2px;
border:1px solid #bdbcbc;
margin:0;
margin-right:10px;
background-color:#E2E9EA;
color:grey;
}

#recherche select:hover{
width:105px;
float:left;
padding:2px;
margin-bottom:2px;
border:1px solid #bdbcbc;
margin:0;
margin-right:10px;
background-color:white;
color:black;
}
#recherche input{
border:1px solid #bdbcbc;
margin:0;
}
#recherche input:hover{
background-color:white;
color:black;
}

#logbox {
-moz-border-radius:0.8em;
width:195px;
margin-top:30px;
margin-left:90px;
float:left;
background-color:#E2E9EA;
padding:2px;
margin-bottom:2px;
border:1px solid #bdbcbc;
}
/********************CLEARER***********************/
clearer{
clear:both;
height:0;
}

/***************************************************************************/
/* footer
/***************************************************************************/

#bottomContenu{
background-image: url("../img/bottomContenu.gif");
height: 4px;
float: left;
width: 100%;
}

#foot{
background-image: url("../img/foot.gif");
clear: both;
font-size: 11px;
text-align: center;
padding-top: 30px;
} #foot a{font-size: 11px;}

/*couleur de fond pair/impair*/
.pair {
background-color: #E2E9EA;
width:515px;
padding:5px;
min-height:180px;
color:black;
}

.impair {
background-color: #ddddff;
width:515px;
padding:5px;
min-height:180px;
}
/********************CLEARER***********************/
clearer{
clear:both;
height:0;
}
/**formulaire**/
input{
background-color:#E2E9EA;
border:solid black 1px;
color:black;
}
p.titre {
background:#DED983;
color:#345071;
padding:.2em .3em;
font-size:1.2em;
border:2px outset #DED983;
position:relative;
margin-bottom:-1em;
width:15em;
margin-left:1em;
margin-top:1em;
}
fieldset {
border:none;
margin-bottom:1em;
width:31em;
padding-top:1.5em;
float:left;
}
select {
margin-left:9em;
margin-bottom:0;
}
/* fieldset coordonnees */
fieldset#coordonnees {
background:#A4D8EE;
border:outset #A4D8EE;

}
#coordonnees label {
position:absolute;
font-size:90%;
color:345071;
}
#coordonnees input {
margin-left:6em;
line-height:1.4em;
margin-bottom:.2em;
}
/* fieldset message */
fieldset#message {
background:#9DF2CE;
border:outset #9DF2CE;
}
/* zone de texte du message */
textarea {
font:.8em "Trebuchet MS", Verdana, sans-serif;
width:29em;
padding:.2em;
background-color:#E2E9EA;
}
/* les boutons submit et reset */
input[type="submit"], input[type="reset"] {
background:#DED983;
font:1.2em "Trebuchet MS", Verdana, sans-serif;
color:#345071;
}
p#buttons {
text-align:center;
}

/*highslides*/

.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border:none;
}
.highslide:hover img {
border:none;
}

.highslide-image {
border:none;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;

border-bottom: 1px solid white;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: silver;
}
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
/*
padding-left: 22px;
background-image: url(highslide/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
*/
}

a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}

HTML

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


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="../ui/skin/structure.css" type="text/css" />
<title><?php echo $barre ?> </title>

<meta name="Description" content="Site officiel du jardinier Bertrand Souchon"/>
<meta name="Keywords" content="Bertrand le jardinier, Bertrand Souchon, france bleu basse-normandie, radio france, jardinier, jardin, jardin secret, le jardin secret de bertrand le jardinier, caen, france bleu, basse-normandie, calvados, astuces, questions, animations, journeaux, vidéos, radio"/>
<meta name="Author" content="Julie Philippe"/>
<meta name="Reply-to" content="julie_philippe_@hotmail.com"/>
<meta name="Identifier-URL" content="http://www.bertrandlejardinier.fr"/>
<meta name="Revisit-after" content="5 days"/>
<meta name="Robots" content="all"/>
<style type="text/css">
<style type="text/css">

</style>
<script language="javascript" type="text/javascript" src="../ui/ajax/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">

tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});

</script>

<script type="text/JavaScript">

</script>
<SCRIPT language="javascript">
function ouvre_popup(page) {
window.open(page,"nom_popup","menubar=no, status=no, scrollbars=yes, menubar=no, resizable=yes, width=500, height=600");
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<script type="text/javascript" src="../ui/ajax/js/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = '../ui/ajax/js/graphics/';
window.onload = function() {
hs.preloadImages(5);
}
</script>
</head>
<body>
<div id="all">
<div id="haut">
 
</div>




<div id="gauche">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="350" hspace="0" vspace="0">
<param name="movie" value="../ui/images/charteverteStatique.swf" />
<param name="quality" value="high" />
<embed src="../ui/images/charteverteStatique.swf" width="300" height="350" hspace="0" vspace="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>


<div id="recherche">
<h3>Recherche</h3>
<?php echo $recherche ?>
</div>
<div class="clearer">
&nbsp
</div>

<div>
<?php include($logBox); ?>
</div>
</div>
<div id="toutContenu">
<div id="topContenu"> <img src="../ui/images/topContenu.jpg" alt="top"> </div>

<div id="contenu">

<div id="texte">
<div id="titrerub"><?php echo $titre ?></div>
<?php echo $contenu ?>
</div>

</div>

<div id="bas">
<div id="logoJardin">
<a href="javascript:void(0)" onclick="ouvre_popup('http://www.jardinage-bio.com/','','scrollbars=yes,resizable=yes,width=600,height=500')"/> <img src="../ui/images/jardinNature.jpg" alt="logo jardin nature" > </a>
</div>
© Bertrand le jardinier 2007 | <a href="../admin/index.php5?partenaires=afficherTout">Partenaires</a> | <a href="../admin/index.php5?credits=afficher">Crédits</a>| <a href="http://www.bertrandlejardinier.fr/admin/index.php5">Admin</a> <br/> <span id="opti">Site optimisé pour Mozilla Firefox & IE7 en 1024x800px</span>
</div>
</div>

</div>
</body>
</html>[code]
Modifié par lilileeelooo (18 Sep 2007 - 09:55)

koala64

Modérateur

18 Sep 2007 à 09:16

Bonjour lilileeelooo et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Si ce n'est déjà fait, il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Sujet clos

Questions générales et questions de débutants

Prolbème compatibilité pour des floats sous ie6