28173 sujets

CSS et mise en forme, CSS3

Centrage des images de mon menu sous IE

Bonsoir,

j'essaie de faire le plus proche de FF ou OP, mais IE est compliqué Smiley rolleyes

voici sous FF:

http://img410.imageshack.us/img410/2199/20070228235753vg1.th.jpg

ça va c'est aligné.

Voici sous IE:

http://img410.imageshack.us/img410/3886/20070228235919kk3.th.jpg

Méchant garçon Smiley fache

voici mon style:


 <style type="text/css">
/*<![CDATA[*/
    /* CSS issu des tutoriels css.alsacreations.com */
    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 0.8em;
        /*overflow: hidden;
    */
        margin: 0;
        padding: 0;
    }
    p {
        margin: 0px;
        padding: 0px;
    }
    #header {
        height: 234px;
        background: url("dossiers_isis.jpg") no-repeat;
    }
    #haut {
        height: 50px;
        border-bottom: solid 1px #FFE100;
        background-color: #E6E9FF;
    }
    #conteneur {
        position: absolute;
        width: 1024px;
        background-color: #E6E9FF;
    }
    #centre {
        border-left: solid 1px #FFE100; border-right: solid 1px #FFE100;
        background-color: #E6E9FF;
        margin-left: 230px;margin-top:1em;
        margin-right: 150px;
    }
    #gauche {
        float: left;
        background: url("a-blue.png") repeat-y center;
        width: 230px;
        background-color: #E6E9FF;
    }
    #droite {

        text-align: center;
        float: right;
        width: 150px;
    }
    #pied {
        clear: both;
        text-align: center;
        margin-top: 25px;
        padding-bottom: 15px;
        background-color: #E6E9FF;
        background: url("trame2.png") repeat-x center;
    }
    #menuhaut {
        background-color: #E6E9FF;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #menuhaut li {
        display: inline;
    }
    #menuhaut a {
        margin: 0 2px;
        color: #000000;
        text-decoration: underline;
    }
    #menuhaut a:hover {
        text-decoration: none;
        color: rgb(0,102,0);
        font-weight: bold;
    }
    #menugauche {

        list-style-type: none;
        padding: 0px;margin-left:1.2em;

    }

    #menugauche a {
        display: block;
        color: #000000;
        background: url("trame.png") no-repeat center;
        text-decoration: none;
        width: 200px;
        height: 35px;
        line-height: 35px;
        padding: 0px;
    }
    #menugauche li {
        margin: 0px;    text-align: center;
        padding: 0px;
        margin-top: 20px;

    }
    #menugauche li a:hover {
        background: url("trame2.png") no-repeat center;
        text-decoration: underline;
        color: red;
        font-weight: bold;
        padding: 0px;
    }


    /*]]>*/

    </style>
		<!--[if IE]>
      <style type="text/css">
    #menugauche { margin-left:1em;  }
                  </style>
<![endif]-->


J'ai bien évidemment rajouté une condition pour IE, mais cela ne fait rien du tout !

Merci pour votre aide.
Modifié par Diana (01 Mar 2007 - 00:07)
Bonsoir,

La condition Ie fonctionne enfin Smiley cligne

<!--[if IE]>
<style type="text/css">
#menugauche { margin-left:0em; }
</style>
<![endif]-->

En faite ma référence est IE 7 seulement. Donc le em marche très bien.
Mais il a fallu que je le mette à zero ! Je pense que c'est dû aux marges que IE rajoutent systématiquement.
voilà merci c résolu

Ps: Je voulais savoir si la condition IE je pouvais la glissée dans la CSS ?

Smiley cligne
Modifié par Diana (02 Mar 2007 - 22:19)
Diana a écrit :
En faite ma référence est IE 7 seulement.

Il serait utile de tester avec IE6 également, tout de même.
Et pour les commentaires conditionnels : on a souvent besoin des les adresser à certaines versions d'IE plutôt qu'à d'autres (typiquement : des règles CSS que l'on applique pour IE 6 et inférieurs, mais pas pour IE 7). Là encore la FAQ donne tous les détails qui vont bien.

Diana a écrit :
Donc le em marche très bien.

Utiliser une marge latérale en EM est une mauvaise idée, surtout si l'on veut obtenir un positionnement au pixel près des éléments ! Rendu au pixel près (ou approchant) = marge en pixels. Il n'y a pas à aller chercher plus loin.

Diana a écrit :
Mais il a fallu que je le mette à zero !

Ce qui revient à supprimer la marge en question, ça n'a rien à voir avec le fait qu'elle soit notée en EM ou en choux-fleurs. Smiley cligne
Les notations suivantes sont équivalentes :
margin-left: 0;
margin-left: 0px;
margin-left: 0em;


Diana a écrit :
Ps: Je voulais savoir si la condition IE je pouvais la glissée dans la CSS ?

Non. C'est une syntaxe « arrangée » de commentaire HTML, et ça va donc dans le code HTML et pas ailleurs.
Modifié par Florent V. (03 Mar 2007 - 00:28)
Sujet clos
Aller à