Se connecter avec
S'enregistrer | Connectez-vous

probleme css

Dernière réponse : dans Programmation

salut, j'ai un probleme avec mozilla, je refai le disign de mon site et j'ai commencé avec internet explorer (pour verifié ce que ca donnait a chaque fois, puis avec mozilla,où j'ai eu quelques problemes que j'ai pu reglé sauf un, le voici:
j'ai des image avec des liens, je leur ai mi des bordure qui change de couleur quand l'on passe dessus:
.bordure a { border: 2px solid #000000;}
.bordure a:hover { border: 2px solid #ffffff;}
avec internet explorer aucun probleme mais avec mozilla la bordure n'entour pas l'image, elle se met derriere et elle depasse en bas :
http://img136.imageshack.us/my.php?image=testyp4.png
http://img237.imageshack.us/my.php?image=test2br2.png

en passant j'ai le petit prbleme ac le menu ...

Autres pages sur : probleme css

Lassé par la pub ? Créez un compte

ColdForce a dit :
FireFox interprète au contraire très bien le CSS ;) 
C'est les autres navaigateurs et en particulier cette ^£¨ù$¨£^¨£ de IE qui ¨£ù$*¨£....

C'est vrai. Mozilla, lui, interprête très bien le CSS et en particulier CSS2.

Maintenant pour ton problème.
Pour moi, le plus simple, et je pense que cela fonctionne sous Mozilla, c'est de faire comme ça:

  1. <head>
    

  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    

  3. <title>lol</title>
    

  4. <style type="text/css">
    

  5. <!--
    

  6.  
  7.  
  8. #bordure{
    

  9. 	border: none;
    

  10. 	width: 199px;
    

  11. 	height: 264px;
    

  12. }
    

  13.  
  14. a {
    

  15. 	border: 2xp solid;
    

  16. 	color: #000000;
    

  17. }
    

  18. a:hover {
    

  19. 	border: 2xp solid;
    

  20. 	color: #FFFFFF;
    

  21. }
    

  22. -->
    

  23. </style>
    

  24. </head>
    

  25.  
  26.  
  27. <body style="background-color:#FF9900;">
    

  28.  
  29. <a href="lien">
    

  30.  
  31.  
  32. <div id="bordure">
    

  33. <img src="../Mes documents/Mes images/Divers/Derrick !.JPG" name="bordure" width="199" height="264"/>
    

  34. </div>
    

  35.  
  36.  
  37. </a>
    

  38. </body>
    

  39. </html>

lexdc a dit :

j'ai des image avec des liens, je leur ai mi des bordure qui change de couleur quand l'on passe dessus:
.bordure a { border: 2px solid #000000;}
.bordure a:hover { border: 2px solid #ffffff;}
avec internet explorer aucun probleme mais avec mozilla la bordure n'entour pas l'image, elle se met derriere et elle depasse en bas


Un lien est de type inline. La bordure s'adapte donc au contour du line-height, c'est ce que tu vois sur FF. Tu as, par exemple, ces 2 options pour contourner ce problème:
  • soit tu transformes ton lien en type bloc aux dimensions de ton image (ce qui risque de te poser des soucis de mise en page)
  • soit tu donnes le bordure à l'image elle-même (ce qui va poser un petit souci à IE).

    Avec la deuxième solution ton css deviendrait ça:

    1. .bordure a img {border: 2px solid #000000;}
      

    2. .bordure a:hover img {border: 2px solid #ffffff;}


    Là, tu devrais constater que ça fonctionne sur FF mais que le :hover ne fonctionne pas sur IE. Pour le faire fonctionner il suffit d'attribuer une propriété bidon à a:hover, par exemple:

    1. .bordure a:hover {border:0;}


    Edit: j'avais pas vu le message précédent ;) 

    En fait le px n'est pas nécessaire du moment que c'est 0 et l'idée c'est de mettre n'importe quoi de valide. La propriété border couvrant le border-width, on peut mettre 0 dedans ;)  c'est juste que border:0; c'est le plus court à écrire :ange: 

    Enfin redis-moi si je me trompe :) 
    Lassé par la pub ? Créez un compte

    Créer un nouveau sujet

    Tom's guide dans le monde