28173 sujets

CSS et mise en forme, CSS3

Alignement vertical avec IE6[Resolu]

bonjour à tous,

j'essaie d'aligner un lien(avec une image) dans une div, avec line-height.
Sur Firefox ça marche bien mais pas sur IE.

Voici mon code, si quelqu'un a une idée, ...


<html>
  <head>  
  <style>
    div#participantsTableTitle{
            margin: 0; 
            padding: 0;
            width:210px;
            padding-left:10px;
            margin-left:10px;
            float:left;
            height:100px;
            line-height: 100px ;
            margin-top:10px;
            font-weight:bold;
            display:inline;
            background-color:red;
    }
    div#openMicros{
            margin: 0; 
            padding: 0;
            width:300px;
            float:left;
            height:100px;
            line-height: 100px ;
            margin-top:10px;
            display:inline;
            background-color:red;
    }
    div#openMicros a{
            color:#000000;
            text-decoration:underline;
    }
    div#openMicros a:hover{
            color:#000000;
            text-decoration:underline;
    }
  </style>
</head>
<html>
<body>
  <div id="participantsTableTitle">participants</div>
    <div id="openMicros">
      <a href="javascript:;">
        <img id="openAllMicroIcone" style="border:none;" src="http://www.google.com/images/newspaper.gif" alt=""/>ouvrir tous les micros
      </a>
    </div>
</body>
</html>


merci d'avance
Modifié par cocoLeNain (17 Oct 2007 - 10:13)
Bonjour,

Pour corriger ton problème sous IE, je pense qu'il faut déclarer :
div#openMicros a img {vertical-align:middle}

Apparemment, cette image n'apporte rien en terme d'informations, elle est plutôt de l'ordre du décoratif. Ainsi pour séparer au mieux la structure du contenu, il serait préférable de l'utiliser en tant que background.
Ce qui donne quelque chose du genre :
div#openMicros a {
   background:url(http://www.google.com/images/newspaper.gif) no-repeat left;
   padding:0 0 0 20px
}

Modifié par mecho (16 Oct 2007 - 15:22)
j'ai donc essayé avec le vertical-align et ça n'a pas marché du fait que display = inline.

Mais j'ai réussi à trouver la solution, il suffit de taper :
div#openMicros a img{margin:15px 0px}


Autrement pour la 2ème solution :
div#openMicros a {
   background:url(http://www.google.com/images/newspaper.gif) no-repeat left;
   padding:0 0 0 20px
}

pour mon cas, j'ai des liens où il y a que l'image (pas de texte) et en plus, j'aurai beaucoup de modifications dans mon code.

En tout cas, merci de m'avoir aider.
Sujet clos
Aller à