[CSS] Problème d'alignement sous IE...

[cedric_g]

Bonsoir

Voulant modifier mon blog (Dotclear), je rencontre comme un léger problème d'alignement sous IE (fonctionne avec FF...)

Ici => http://blog.aube-nature.com

En fait j'ai voulu rajouter une sidebar à droite, mais je pige pas pourquoi ça décale


Le code du layout.css :

Code: Tout sélectionner

body{
   text-align: center;
}

#page{
   position: relative;
   width: 900px;
   margin: 0 auto;
   background: #FFF;
   color: inherit;
   
   text-align: left;
}

#top{
   position: relative;
   height: 150px;
}

#top h1{
   position: absolute;
   top: 120px;
   left: 35px;
   height: 20px;
   width: 180px;
}

#prelude{
   position: absolute;
   width: 900px;
   top: 0;
   left: 0;
}

#main{
   width: 510px;
   float:right;
}

#content{
   margin: 0 10px 0 10px;
}

#sidebar{
   width: 200px;
   margin-left: 25px;
}

#rightbar{
   width: 145px;
   margin-right: 24px;
   float:right;
   height: 600px;
}

(je pense que ça vient de là...)


et du style.css (partiel évidemment !)

Code: Tout sélectionner

/* Sidebar
********************************************/

...

#sidebar div{
   /* aurait du etre #sidebar > div */
   margin: 0 10px 2em 10px;
}

...


/* rightbar
********************************************/

...

#rightbar div{
   /* aurait du etre #rightbar > div */
   margin: 0 10px 2em 10px;
}

...


Pfff j'ai tout essayé dans tous les sens mais je n'arrive pas à "décaler" mon rightbar sur la droite !

[narayana]

Salut cedric_g
Je pense que ton soucis provient de l'ordre d'apparition de tes div dans le code source
A première vue j'aurai mis le slide bar avant le main
le slide en position float:left;
et le main avec un margin-left de la largeur de ton slide + 2 px histoire que cela ne se chevauche pas.
A voir et à tester

[cedric_g]

Bonsoir

Non, ça ne fonctionne pas...

En fait tout vient de cette p... de margin-right sur ma rightbar ! Si je l'enlève, FF me colle ma rightbar contre la marge, ce que je ne veux pas.

Je l'ai enlevée, vous pouvez voir que les deux affichages coïncident... Donc le soucis vient à priori de là : l'espace à droite !

[cedric_g]

Pffff en fait lorsque je mets (logiquement) un margin-right à mon rightbar, IE semble DOUBLER systématiquement cette valeur !!!

Je pige que dalle...

[bproductiv]

http://tantek.com/CSS/Examples/boxmodelhack.html
et
http://css-discuss.incutio.com/?page=BoxModelHack
le fameux hack box model pour IE

[cedric_g]

Merci, mais j'ai des soucis sous IE 6.x aussi (donc à priori pas de bug)

J'ai essayé de créer un nouveau div pour encapsuler mon div "main" (celui du milieu) et mon div "rightbar", en prenant en compte les largeurs absolues de chaque élément, moins les marges (en fait il correspond à anciennement mon "main", + la largeur de la rightbar)

Voilà mon "nouveau" layout :

Code: Tout sélectionner

#wrapper{
   width: 655px;
   float:right;
}

#main{
   width:500px;
}

#content{
   margin: 0 10px 0 10px;
}

#sidebar{
   width: 200px;
   margin-left: 25px;
}

#rightbar{
   width: 145px;
   height: 600px;
   float:right;
}

Mais ça ne résoud pas le problème

[bproductiv]

Merci, mais j'ai des soucis sous IE 6.x aussi (donc à priori pas de bug)

Est ce une blague? pas de bug sur ie?
même dans la version 7 il y'en a alors..

[cedric_g]

Non, je voulais dire : "pas LE bug de la CSS box" puisque j'ai justement des soucis sur tous les navigateurs

Bon je me rapproche de la "vérité" en jouant sur des marges négatives, mais bordel c'est vraiment du bricolage !!!

[bproductiv]

Xcuz, autant pour moi bon courage alors...

[cedric_g]

P... ça me gave...

Bon j'ai "remis" les bonnes valeurs pour Firefox.

Arg, 65% de mes visiteurs sont pénalisés et voient l'affichage en vrac !

Je ne comprends pas pourquoi IE double ma marge à droite, bordel !!! J'ai TOUT vérifié, avec Firefox ça colle nickel à ce que j'avais en tête.

Quelle galère...

[cedric_g]

BON

J'ai feinté : j'ai aligné la div main à gauche, et mis une marge gauche correspondant à sa largeur pour la rightbar : c'est "à peu près" bon dans IE et FF !

(par contre j'ai viré le dégradé de ma banner car il est décalé de quelques pixels dans IE...)