problème float et lien hypertexte IE6

problème float et lien hypertexte IE6 - HTML/CSS - Programmation

Marsh Posté le 21-07-2008 à 17:49:52    

Bonjour,
 
J'ai placé mes boutons avec des float afin qu'ils ne bougent pas au redimensionnement du navigateur sous IE6 (ouverture des favoris par exemple). Sous FF et IE7 il n'y a aucun soucis.
 
 voici mon css :

Code :
  1. #patrimoine {
  2. width: 262px;
  3. height: 206px;
  4. background-repeat:no-repeat;
  5. background-image: url(../images-css/encart-patrimoine.jpg);
  6. margin-left: 674px;
  7. margin-top: -219px;
  8. }
  10. #bouton-impots {
  11. width: 92px;
  12. height: 24px;
  13. background-image:url(no-image);
  14. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='./images-css/impots.png');
  15. margin-left: -92px;
  16. margin-top: 80px;
  17. float: left;
  19. }
  21. #bouton-transmettre {
  22. width: 92px;
  23. height: 24px;
  24. background-image:url(no-image);
  25. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='./images-css/transmettre.png');
  26. margin-left: -92px;
  27. margin-top: 109px;
  28. float: left;
  29. }
  31. #bouton-argent {
  32. width: 92px;
  33. height: 24px;
  34. background-image:url(no-image);
  35. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='./images-css/argent.png');
  36. margin-left: -92px;
  37. margin-top: 138px;
  38. float: left;
  39. }
  41. #bouton-simulation {
  42. width: 92px;
  43. height: 24px;
  44. background-image:url(no-image);
  45. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='./images-css/simulation.png');
  46. margin-left: -92px;
  47. margin-top: 167px;
  48. float: left;
  49. }


 
et la page html correspondante :

Code :
  1. <div id="patrimoine">  
  2.  
  3.   <a href="http://www.google.fr"><div id="bouton-emprunt"></div></a>
  4.   <a href="http://www.google.fr"><div id="bouton-impots"></div></a>
  5.   <a href="http://www.google.fr"><div id="bouton-transmettre"></div></a>
  6.   <a href="http://www.google.fr"><div id="bouton-argent"></div></a>
  7.   <a href="http://www.google.fr"><div id="bouton-simulation"></div></a>
  8.      
  9.       </div>


J'ai remarqué qu'en mettant "position:absolute" au <div id="patrimoine"> les liens de boutons redevenaient actifs mais que c'était au tour de l'encart patrimoine lui-même de bouger au redimensionnement de la fenêtre !  :(  
 
Merci de pouvoir m'éclairer sur ce point.

Reply

Marsh Posté le 21-07-2008 à 17:49:52   

Reply

Marsh Posté le 22-07-2008 à 23:26:53    

Déjà, tu ne peux pas placer une balise <div> dans une balise <a> (un élément de type en-ligne ne peut pas avoir pour descendant autre chose qu'un élément de type en-ligne, donc pas un bloc).
Ensuite, ta balise <div>, elle ne te sert à rien.
Contente-toi de balises <a> pour faire des boutons, à mettre dans une liste (ul, li) pour en faire un menu sémantique et accessible.
Pour utiliser float et avoir l'effet escompté, il te suffira d'ajouter une propriété display:block pour tes <a>.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed