Bug Ie6 float
Bug Ie6 float • le Dim 7 Mar 2010 00:51
Bonsoir à tous,
Fan de chateaux forts et de maquettes
Bonsoir à tous,
j'aimerais vous demander ce que vous pensez de mon référencement mais c'est un tout autre problème de bug qui me pourrit la vie, sous IE6 naturellement.
Le bug est à voir sur cette page temporaire 
Chateaux en France
Vous remarquerez que le contenu du site est partagé en 3 colonnes, structurées avec des div/float,
le problème est que sous IE6, le contenu de la colonne de droite se retrouve à la fin du contenu de la colonne du milieu.
J'ai essayé toutes les combinaisons possibles de clear, ttes les astuces à base de position:relative ou de display:inline trouvées un peu partout sur Google, et d'autres choses encore avec des commentaires conditionnels
mais rien y fait, et pourtant ça marche très bien sur tout les autres navigateurs.
Un petit coup de main ne serait vraiment pas de refus.
Merci d'avance
Dernière édition par flanders le Dim 14 Mar 2010 21:38, édité 2 fois.
Fan de chateaux forts et de maquettes
tu as essayé un <br />?
avec ça dans la feuille de style?
hr {
clear: both;
visibility : hidden;
}
Cours Chant °oO°Oo°Linguistique Phonétique pour les nuls
-
Webdécimètre - Régulier
- Messages : 557
- Inscription : Mer 21 Mai 2008 07:14
Et non, toujours pas, ni avec le <br/> ni avec le <hr/>
Mais qu'est-ce qui cloche ?
- Code: Tout sélectionner
#left_column_container
{
position:relative;
top:0px;
float:left;
width:165px;
margin:-2px;
padding:0px;
text-align:center;
}
#middle_column_container
{
width:525px;
position:relative;
top:0px;
float:left;
padding:0;
left:30px;
}
#right_column_container
{
position:relative;
top:0px;
float:right;
width:170px;
margin:0px;
padding:0px;
text-align:center;
}
hr {
clear: both;
visibility : hidden;
}
#left_column_container
{
position:relative;
top:0px;
float:left;
width:165px;
margin:-2px;
padding:0px;
text-align:center;
}
#middle_column_container
{
width:525px;
position:relative;
top:0px;
float:left;
padding:0;
left:30px;
}
#right_column_container
{
position:relative;
top:0px;
float:right;
width:170px;
margin:0px;
padding:0px;
text-align:center;
}
hr {
clear: both;
visibility : hidden;
}
Fan de chateaux forts et de maquettes
Bonjour,
à tous
Etant nouvellement inscrit j'espère que mon 1er post sera prolifique.
Avant tout merci à nifrou et son logiciel SEO, trés utile.
Revenons à ton souci, déjà tu peux enlever dans ta feuille de style les propriétés "position", il ne servent à rien dans ce cas, les "float" suffisent.
Ensuite essai la propriété "min-height" pour ta colonne gauche et droite qui équivaut à la hauteur de la colonne du centre ainsi que "height:auto" pour colonne gauche et droite.
Pour finir cesse de te tracasser pour les compatibilitées avec ie6, Billy a annoncer le fin de cette distribution en forçant les utilisateurs à utiliser la dernière ... enfin info ou intox , à vérifier quand même 
Voili voila
a plus
RE 
aprés un bref test essaye ce code , j'ai scindé la partie du corps simplement et rajouté ds couleurs pour que tu différencies les divs. (fonctionne sur tout sauf opéra, je n'ai pas testé 
/////////////// CODE ////////////////
<html>
<head>
<style>
body {
text-align:center;
}
#main_container {
width:860px;
margin:0px auto;
background-color:red;
}
#left_column_container {
float:left;
width:165px;
margin:-2px;
padding:0px;
text-align:center;
background-color:blue;
}
#middle_column_container {
width:525px;
float:left;
padding:0;
background-color:yellow;
}
#right_column_container {
float:left;
width:170px;
margin:0px auto;
padding:0px;
text-align:center;
background-color:purple;
}
hr {
clear: both;
visibility : hidden;
}
</style>
</head>
<body>
<div id="main_container">
<div id="left_column_container">
<!-- InstanceBeginEditable name="pub" -->
<strong>Colonne de Droite</strong>
BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />
<!-- InstanceEndEditable -->
</div>
<div id="middle_column_container">
<div id="content_container" align="center">
<!-- InstanceBeginEditable name="corps" -->
<strong>Colonne du milieu</strong>
<img src="photos/fougeres/chateau_fougeres.jpg" width="520" height="390" alt="chateau de Fougères" title="chateau de Fougères" />
<br/>
<hr/>
<!-- InstanceEndEditable -->
</div>
</div>
<div id="right_column_container">
<!-- InstanceBeginEditable name="right" -->
<strong>Colonne de droite</strong>
<!-- InstanceEndEditable -->
BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />
BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />
BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />BLABLABLA<br />
</div>
</div>
</body>
</html>
/////////////////////// FIN ///////////////////
tiens nous au courant
Salut,
Validé. J'avais aussi un souci, et malgrè plusieurs bug fix, ça ne donner toujours pas le bon truc.
Testé avec Multi Ie pour IE6, et IE8, FF2. Nickel.
Hélas, moi j'ai un souci avec float:right...Putin d'IE 
Bonjour et merci à tous,
dans l'urgence j'ai répondu à l'age de pierre par l'age de pierre, un bon vieux tableau...
Mais j'en ai quand même profiter pour virer les quelques trucs qui ne servaient à rien dans ma css et je me repencherai sur le problème un peu plus tard.
Après je ne pense pas qu'on puisse faire sans IE6, même si ses jours sont comptés, il est encore utilisé par 10% des internautes...
A bientôt pour de nouvelles aventures !
Fan de chateaux forts et de maquettes
En mettant un display:inline dans les attributs du "main_container", ça devait fonctionnait en théorie puis en définissant les positions des blocks comme
#middle_column_container avec left:166px et top:0px et supprimer le 2° float:left
#right_column_container avec left:691px et top:0px ou un float:right
Je n'ai pas essayer mais ça devrait être bon
Conseils gratuits en referencement pour les entrepreneurs - Scooter - Déménageur - DJ- Dépannage informatique
-
referenceur - Impliqué
- Messages : 1736
- Inscription : Sam 31 Oct 2009 18:21
- Localisation : Lyon
8 messages • Page 1 sur 1
Retourner vers Demande de conseils ou parler de son site