Boutons arrondis pauses en chrome et safari

Pour créer des boutons arrondis, j'utilise trois images: une image de gauche, une image de droite et une bande d'image. Chaque fois que ça marche bien, mais en safari et en chrome, la bonne image arrive en ligne suivante, et je ne suis pas capable de comprendre pourquoi cela se produit. Alors quelqu'un m'aider s'il vous plaît, Voici le balisage html et son css.Boutons arrondis pauses en chrome et safari

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style type="text/css"> 
     body{width: 980px;margin: 0 auto} 
     .light_button a {background:url("images/center.png") repeat-x scroll 0 0 transparent;color:#000000;display:inline-block;font-size:16px;font-weight:bold;height:34px;line-height:29px;position:relative;text-align:center;text-decoration:none;} 
      .light_button .lout {background:url("images/left.png") no-repeat scroll 0 0 transparent;float:left;height:31px;left:-8px;position:absolute;width:8px;} 
      .light_button .rout {background:url("images/right.png") no-repeat scroll 0 0 transparent;float:right;height:31px;position:absolute;width:26px;} 


      .light_button a.light_right_nav_first {background:url("images/center.png") repeat-x scroll 0 0 transparent;color:#000;display:inline-block;font-size:16px;font-weight:bold;height:31px;line-height:29px;position:relative;text-align:center;text-decoration:none;} 
      .light_button a.light_right_nav_first .lout {background:url("images/p_left.png") no-repeat scroll 0 0 transparent;float:left;height:31px;left:-24px;position:absolute;width:24px;} 
      .light_button a.light_right_nav_first .rout {background:url("images/r_right.png") no-repeat scroll 0 0 transparent;float:right;height:31px;position:absolute;width:26px;} 




    </style> 
    </head> 
    <body> 

     <div class="light_button"> 
      <div class="left"> 
       <a class="nav_first" href="#"> 
        <span class="lout"></span> 
        home 
        <span class="rout"></span> 
       </a> 


      </div> 


      <div class="right"> 
       <a class="light_right_nav_first" href="#"> 
        <span class="lout"></span> 
        home 
        <span class="rout"></span> 
       </a> 


      </div> 
     </div> 



    </body> 
</html>

Source

2010-08-14 Soarabh

Si vous avez besoin de boutons arrondis, pourquoi ne pas essayer la propriété CSS3 'border-radius'? C'est plus facile et beaucoup moins hackish que la méthode avec laquelle vous travaillez ici. –

oui je sais mais la bonne image a la combinaison de deux image – Soarabh

Ne pas combiner float et le positionnement absolu. Dans votre cas, vous voulez probablement supprimer le float et conserver position:absolute. Vous avez déjàpour .lout, vous pouvez faire quelque chose de similaire pour .rout en utilisant la propriété right: right:-26px;width:26px. De plus, comme vos images gauche et droite seront en dehors du lien réel, vous devriez envisager d'ajouter des marges au lien afin que les images ne se chevauchent pas.

Source

2010-08-14 05:35:04 casablanca

Toujours son ne fonctionne pas :( – Soarabh

Hey je me suis trompé, j'ai fait une erreur dans mon balisage d'autre ce que vous avez dit est correct. – Soarabh

Boutons arrondis pauses en chrome et safari

Répondre

Questions connexes