Mise en forme d'un bouton de lien à l'aide de CSS sur les navigateurs

MISE À JOUR # 2: J'ai résolu presque tous mes problèmes. Avec la même structure et CSS IE7/6 affiche chacun avec 100% de largeur de son conteneur. J'ai besoin que cela n'arrive pas. D'ailleurs tout le reste est bien. Quelqu'un peut-il m'éclairer?Mise en forme d'un bouton de lien à l'aide de CSS sur les navigateurs

MISE À JOUR: devrait ressembler à ceci

alt text http://i39.tinypic.com/n12h49.png

J'ai la page html suivante (voir les détails ci-dessous). Il rend simplement 2 boutons de style des liens. Mon problème est IE6 & 7 rend différemment que Firefox, Safari, IE8 et Chrome qui le rendent correctement.

Je me suis cogné la tête contre le mur pendant un jour maintenant essayant de le faire fonctionner dans IE6/7. Quelqu'un peut-il offrir des conseils sur ce que je fais mal?

Merci

<html> 
    <head> 
    <style> 

     .niw-button { 
      background:  #1f81c0 url(niw-btn-gradient-normal.png) repeat-x; 
      border:   none; 
      color:   #fff; 
      display:   inline-block; 
      font-weight:  bold; 
      margin-right: 6px; 
      min-width:  95px; 
      padding:   2px; 
      text-decoration: none; 
     } 

     .niw-button:hover { 
      background: #5e698f url(niw-btn-gradient-hover.png) repeat-x; 
     } 

     .niw-button > .niw-button-contents { 
      border: 1px solid #73b1da; 
     } 

     .niw-button > .niw-button-contents:hover { 
      border: 1px solid #99a1bc; 
     } 

     .niw-button .niw-button-icon { 
      background-position: center; 
      background-repeat: no-repeat; 
      float:    right; 
      height:    25px; 
      width:    27px; 
     } 

     .niw-button .niw-button-text { 
      height:   25px; 
      line-height: 1.5em; 
      padding-left: 5px; 
      padding-right: 27px; 
      text-align:  center; 
      text-transform: uppercase; 
     } 

     .right-align { 
     float:right; 
     } 

     .niw-icon-cancel { 
      background-image: url(niwater_cancelIcon.png); 
     } 
    </style> 
    </head> 
    <body> 
    <a class="niw-button right-align" href="#"> 
     <div class="niw-button-contents"> 
      <div class="niw-button-icon niw-icon-cancel"></div> 
      <div class="niw-button-text">Cancel</div> 
     </div> 
    </a> 
    <a class="niw-button" href="#"> 
     <div class="niw-button-contents"> 
      <div class="niw-button-icon niw-icon-cancel"></div> 
      <div class="niw-button-text">Cancel</div> 
     </div> 
    </a> 
    </body> 
</html>

Source

2009-03-25 James Hughes

EDIT: Maintenant que je comprends votre image:

Faites votre <a> éléments bloc éléments avec display: block et mettre une sorte de portée de l'intérieur pour tenir l'icône. Ou vous pourriez faire le tout une image ...

Source

2009-03-25 12:54:15 Perchik

En fait, je ne peux pas le faire. Le conteneur principal (en ym le cas a) a un fond dégradé). Le contenu doit ensuite définir une icône en arrière-plan - elle ne peut pas être une avec un ensemble à bloquer. –

Oui, c'est possible. Construire le a avec l'arrière-plan de gradient. Mettez une envergure à l'intérieur avec l'icône comme arrière-plan. C'est tout. – Perchik

Ensuite, vous perdez la bordure intérieure qui est une exigence. J'ai en quelque sorte résolu cela en fixant la largeur de tous les boutons ... devrait être acceptable pour le client. (doigt croisé) –

IE6/7 ne supporte pas display: inline-block, IE6 ne supporte pas l'enfant (parent > child) sélecteur. Donc, vous devriez probablement se pencher sur ces points dans votre ... css

Source

2009-03-25 12:39:33 kkyy

Le problème parent> enfant a résolu quelques problèmes. Totalement oublié à ce sujet merci. Mais le problème principal existe toujours. –

Edit: En fait, je ne suis pas rendu correct dans IE8, qui est ce que j'adresse ci-dessous:

Pour commencer, vous devez mettre la <a> éléments à l'intérieur des éléments plutôt que l'inverse. Les éléments de niveau bloc ne doivent pas vraiment exister dans les éléments en ligne. par exemple.

<div class="niw-button-contents"> 
     <div class="niw-button-icon niw-icon-cancel"></div> 
     <div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div> 
    </div> 


    <div class="niw-button-contents"> 
     <div class="niw-button-icon niw-icon-cancel"></div> 
     <div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div> 
    </div>

Cela corrige le positionnement pour moi, mais il y a une perte subséquente de style. Je n'ai pas encore modifié le CSS pour le corriger mais cela devrait être simple. Deuxièmement, vous avez énormément de cours pour traiter un problème simple. Vous devriez probablement avoir besoin d'une seule classe dans le div externe pour identifier ce qui se passe à l'intérieur, et votre CSS peut alors descendre de là.

Source

2009-03-25 12:39:51

Ensuite, le bouton entier ne peut pas être cliqué. Ce qui brise légèrement la solution. –

Il peut être si stylé correctement - le div interne pour l'icône affichée est inutile car ce style peut être appliqué au lien lui-même, avec un remplissage approprié tout autour et aucune marge sur l'élément. Pour la bordure intérieure, un intervalle pourrait être utilisé sur le texte du lien. –

J'ai essayé cette approche, mais il semble causer le même nombre de problèmes dans IE6/7 –

Juste une astuce pour une ressource au problème bouton/lien en général:

http://mezzoblue.com/archives/2008/09/17/anchor_butto/

Source

2009-03-25 12:42:56 floplus

Je suis en fait moi-même confus. Comment sont-ils censés regarder? Si vous ne nous laissez pas savoir ce que vous avez l'intention de faire, il est très difficile de résoudre le problème.

Source

2009-03-25 12:42:58 shady

Question mise à jour avec l'image –

Mise en forme d'un bouton de lien à l'aide de CSS sur les navigateurs

Répondre

Questions connexes