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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par cedric_g, 14 Mai 2007.

  1. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    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:
    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:
    /* 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 !
     
  2. narayana
    narayana WRInaute impliqué
    Inscrit:
    28 Janvier 2005
    Messages:
    727
    J'aime reçus:
    0
    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
     
  3. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    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 !
     
  4. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    Pffff en fait lorsque je mets (logiquement) un margin-right à mon rightbar, IE semble DOUBLER systématiquement cette valeur !!!

    Je pige que dalle... :evil:
     
  5. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 677
    J'aime reçus:
    0
  6. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    Merci, mais j'ai des soucis sous IE 6.x :roll: 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:
     #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 :evil:
     
  7. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 677
    J'aime reçus:
    0
    Est ce une blague? pas de bug sur ie? :lol:
    même dans la version 7 il y'en a alors.. :twisted:
     
  8. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    Non, je voulais dire : "pas LE bug de la CSS box" puisque j'ai justement des soucis sur tous les navigateurs :lol:

    Bon je me rapproche de la "vérité" en jouant sur des marges négatives, mais bordel c'est vraiment du bricolage !!!
     
  9. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 677
    J'aime reçus:
    0
    Xcuz, autant pour moi :D bon courage alors...
     
  10. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    P... ça me gave...

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

    Arg, 65% de mes visiteurs sont pénalisés 8O 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...
     
  11. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    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...)
     
Chargement...
Similar Threads - [CSS] Problème alignement Forum Date
[CSS] Problème d'alignement sous Firefox (OK avec IE) Développement d'un site Web ou d'une appli mobile 18 Octobre 2006
[CSS] : problème de mise en page FF3 Développement d'un site Web ou d'une appli mobile 31 Août 2008
[CSS] petit problème DIV sous Firefox Développement d'un site Web ou d'une appli mobile 24 Janvier 2008
[CSS] Problème avec IE6... Développement d'un site Web ou d'une appli mobile 17 Janvier 2007
[Réglé] [CSS] Problème de largeur de "div" Développement d'un site Web ou d'une appli mobile 31 Août 2006
[résolu] [CSS] Problème de transparence Développement d'un site Web ou d'une appli mobile 30 Novembre 2005
[CSS] problème de marge dans liste Développement d'un site Web ou d'une appli mobile 28 Octobre 2005
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
[CSS] Overflow, float:right, et internet explorer Développement d'un site Web ou d'une appli mobile 10 Août 2009
[css] <li> image en vertical-align:bottom Développement d'un site Web ou d'une appli mobile 18 Juillet 2009
[CSS] bouton non cliquable Développement d'un site Web ou d'une appli mobile 16 Juillet 2009
[CSS] IE8 Développement d'un site Web ou d'une appli mobile 15 Juillet 2009
[CSS] decalage image et texte Développement d'un site Web ou d'une appli mobile 18 Juin 2009
[CSS] : scroller overflow et ie6 :-( Développement d'un site Web ou d'une appli mobile 12 Mai 2009