Probleme avec IE

Bonjour,

Voici mon soucis,
Mes pages s'afficgent bien centrer avec firefox, mais avec IE elles sont toutes alignées a gauche....
Comment remedier a ca ??

Merci par avance
Configuration: Windows Vista Internet Explorer 7.0

7 réponses

  • Votes
  • Date
  • Date décroissante
  1. Salut, faut plus utiliser <center> mais plutôt les css : style="text-align: center;".

    Ensuite, ça dépend si tu applique le style à un objet : ici ça centre le texte dans cet élément (le texte dans le <div> par exemple).

    Si tu veux center le div, les styles sont "margin: 0 auto;".

    C'est là que ça peut planter au niveau de IE.
    1. et oui,
      mes pages sont toutes mises en page avec du css.
      Une div #page qui englobe toutes les autres div
      Voici le css de ma page index :
      #page {
      	color: #999;
      	padding: 0px;
      	width: 900px;
      	margin-top: 20px;
      	margin-right: auto;
      	margin-bottom: 5px;
      	margin-left: auto;
      	text-align: center;
      	position: relative;
      }
      #imagecentre {
      	text-align: center;
      }
      #ecriture {
      	padding-top: 20px;
      	padding-bottom: 20px;
      	padding-left: 125px;
      }
      #entrez {
      	text-align: center;
      	margin-top: 10px;
      	margin-right: 0px;
      	margin-bottom: 10px;
      	margin-left: 0px;
      	padding-top: 20px;
      	padding-bottom: 20px;
      }
      #entrez img {
      	margin: 0px;
      	padding: 0px;
      	border-top-style: none;
      	border-right-style: none;
      	border-bottom-style: none;
      	border-left-style: none;
      }
      


      on vient bien dans #page, margin left et right en auto

      edit : la je viens d'essayer en faisant margin left : 0 auto;
      margin left: 0;
      idem pour right mais sans aucun résultat....
      1. faudrais optimiser tout ça :
        pas la peine de définir 4 margins, si un seul peut suffir. Ensuite, le "position: relative" est vraiment indispensable ? Car ça peut venir de là…

        #page {
        	color: #999;
        	padding: 0px;
        	width: 900px;
        	margin: 20px auto 5px;
        	text-align: center;
        	position: relative;
        }
        #imagecentre {
        	text-align: center;
        }
        #ecriture {
        	padding: 20px auto 20px 125px;
        }
        #entrez {
        	text-align: center;
        	margin: 10px 0;
        	padding: 20px auto;
        }
        #entrez img {
        	margin: 0px;
        	padding: 0px;
        	border: none;
        }
        

        voilà. Si par exemple, pour "padding:" tu met 1 valeur, ce sera la même pour les 4 cotés. Si tu en mets 2, le premier sera pour haut/bas et l'autre pour gauche/droite, ainsi :
        padding: 5px 10px; 

        sera pareil que :
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 5px;
        

        tu vois ?

        Si tu mets 3 valeurs, ce sera Haut - gauche/droite - bas
        Si tu mets 4 valeurs, ce sera haut - droite - bas - gauche (dans le sens des aiguilles d'une montre). Ca racourcis le code.
        1. j'ai testé et malheureusement ca ne resoud pas le probleme......
          1. avec firefox tout est nikel,

            y a meme des soucis avec des balises </br> et <p></p> avec IE les effets sont differents....
            1. même en retirant le "position:relative;" ?

              Je vais tester ça et je te tiens au courant demain. (je trouverais comment centrer avec IE).

              PS : les </br> sont des <br /> (une balise auto-fermante).
              1. Oui oui t'inquietes les </br> j'en mets qu'une seule !!

                T'as vu ou ca bloquait ??