[RESOLU] Display: block pour le lien sous IE

Display: block pour le lien sous IE [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 10-08-2005 à 17:16:28    

Bonjour tout le monde,
 
je mets un display: block avec une couleur de background pour certains liens, comme ça, ça prend toute la ligne et c'est, je trouve, plus joli.
 
Alors, la couleur de background (sur le a:hover) ET le display: block (sur le a) marchent impeccable sous Firefox mais sous IE, il n'y a que la couleur qui "marche", le lien ne prend pas toute la ligne.
 
Le code HTML:

Code :
  1. <ul class="bloc_de_liens">
  2. <li><h5><a href="/comm/enterprise/chemicals/competiv/risc/db_en.htm">Chemicals</a></h5></li>
  3. <li><h5><a href="http://pharmacos.eudra.org/F2/eudralex/index.htm" target="_blank">EudraLex - Pharmaceuticals legislation</a></h5></li>
  4. <li><h5><a href="http://www.newapproach.org" target="_blank">New Approach</a></h5></li>
  5. <li><h5><a href="/comm/enterprise/nando-is/cpd/home/index.cfm" target="_blank">NANDO-CPD - Construction products</a></h5></li>
  6. <li><h5><a href="/comm/enterprise/tris/index_en.htm">TRIS - National technical regulations</a></h5></li>
  7. <li><h5><a href="/comm/enterprise/tbt/index.cfm?fuseaction=Search.viewMenu&dspLang=EN" target="_blank">TBT - Technical barriers to trade</a></h5></li>
  8. </ul>


 
La CSS :
 

Code :
  1. h5
  2. {
  3. font-size: 0.7em;
  4. font-weight: normal;
  5. background: url(../images/fond_sable.png);
  6. }
  7. h5 a
  8. {
  9. color: #9D749E;
  10. text-decoration: none;
  11. display: block;
  12. padding: 3px;
  13. }
  14. h5 a:hover
  15. {
  16. color: #009090;
  17. background-color: #DFECFE;
  18. }


 
Une idée svp ?


Message édité par Beral2 le 12-08-2005 à 12:22:46
Reply

Marsh Posté le 10-08-2005 à 17:16:28   

Reply

Marsh Posté le 10-08-2005 à 17:19:12    

tu peux me dire l'interet d'entourer le A d'un H5 alors que le A est dans un #menu LI A
déjà vire moi ton H5
et normalement un élément block prend toute la largeur de son parent
jvais voir

Reply

Marsh Posté le 10-08-2005 à 17:25:06    

Beral2 a écrit :

Bonjour tout le monde,
 
je mets un display: block avec une couleur de background pour certains liens, comme ça, ça prend toute la ligne et c'est, je trouve, plus joli.
 
Alors, la couleur de background (sur le a:hover) ET le display: block (sur le a) marchent impeccable sous Firefox mais sous IE, il n'y a que la couleur qui "marche", le lien ne prend pas toute la ligne.


1- le <h5> est redondant
2- ajoutes "_height: 0.0000001%;" au style de tes "a"


Message édité par masklinn le 10-08-2005 à 17:39:22

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 10-08-2005 à 17:47:51    

Bon, j'ai enlevé les <h5> :
 
HTML:

Code :
  1. <ul class="bloc_de_liens">
  2.                 <li><a href="/comm/enterprise/chemicals/competiv/risc/db_en.htm">Chemicals</a></li>
  3.                 <li><a href="http://pharmacos.eudra.org/F2/eudralex/index.htm" target="_blank">EudraLex - Pharmaceuticals legislation</a></li>
  4.                 <li><a href="http://www.newapproach.org" target="_blank">New Approach</a></li>
  5.                 <li><a href="/comm/enterprise/nando-is/cpd/home/index.cfm" target="_blank">NANDO-CPD - Construction products</a></li>
  6.                 <li><a href="/comm/enterprise/tris/index_en.htm">TRIS - National technical regulations</a></li>
  7.                 <li><a href="/comm/enterprise/tbt/index.cfm?fuseaction=Search.viewMenu&dspLang=EN" target="_blank">TBT - Technical barriers to trade</a></li>
  8. </ul>


 
Et la CSS est devenue :

Code :
  1. .bloc_de_liens
  2. {
  3. list-style-type: none;
  4. border: 1px solid #DBE9FF;
  5. margin-bottom: 8px;
  6. }
  7. .bloc_de_liens a
  8. {
  9. font-size: 0.7em;
  10. font-weight: normal;
  11. background: url(../images/fond_sable.png);
  12. color: #9D749E;
  13. text-decoration: none;
  14. display: block;
  15. padding: 3px;
  16. }
  17. .bloc_de_liens a:hover
  18. {
  19. color: #009090;
  20. background-color: #DFECFE;
  21. }


 
Mais sous Firefox, cela ne marche plus (le hover, pas le block). Sous IE, ça déconne encore plus... mais on verra plus tard.
Masklinn : le _height: 0.0000001%; si c'était pour IE, on verra plus tard aussi, le temps que cela fonctionne sous Firefox.
 
Sinks


Message édité par Beral2 le 10-08-2005 à 17:53:28
Reply

Marsh Posté le 10-08-2005 à 18:02:49    

Bon pour Firefox, ça remarche, c'était mon "background: url(../images/fond_sable.png);" dans le a qui faisait planter, l'ai mis seulement dans l'ul, tout marche.

Reply

Marsh Posté le 10-08-2005 à 18:06:48    

Et avec ton "_height: 0.0000001%;" Masklinn, nickel sous IE aussi.
 
P'tit résumé pour le HTML:

Code :
  1. <ul class="bloc_de_liens">
  2.                 <li><a href="/comm/enterprise/chemicals/competiv/risc/db_en.htm">Chemicals</a></li>
  3.                 <li><a href="http://pharmacos.eudra.org/F2/eudralex/index.htm" target="_blank">EudraLex - Pharmaceuticals legislation</a></li>
  4.                 <li><a href="http://www.newapproach.org" target="_blank">New Approach</a></li>
  5.                 <li><a href="/comm/enterprise/nando-is/cpd/home/index.cfm" target="_blank">NANDO-CPD - Construction products</a></li>
  6.                 <li><a href="/comm/enterprise/tris/index_en.htm">TRIS - National technical regulations</a></li>
  7.                 <li><a href="/comm/enterprise/tbt/index.cfm?fuseaction=Search.viewMenu&dspLang=EN" target="_blank">TBT - Technical barriers to trade</a></li>
  8. </ul>


 
Et CSS:

Code :
  1. .bloc_de_liens
  2. {
  3. list-style-type: none;
  4. border: 1px solid #DBE9FF;
  5. margin-bottom: 8px;
  6. background: url(../images/fond_sable.png);
  7. }
  8. .bloc_de_liens a
  9. {
  10. _height: 0.0000001%;
  11. font-size: 0.7em;
  12. font-weight: normal;
  13. color: #9D749E;
  14. text-decoration: none;
  15. display: block;
  16. padding: 3px;
  17. }
  18. .bloc_de_liens a:hover
  19. {
  20. color: #009090;
  21. background-color: #DFECFE;
  22. }


 
J'essaie de comprendre ce "_height: 0.0000001%;".
 
Merci à tous les 2.

Reply

Marsh Posté le 10-08-2005 à 18:12:24    

Beral2 a écrit :

J'essaie de comprendre ce "_height: 0.0000001%;".


Impossible à comprendre "comme ça", les "top tier dev" (l'élite du dev web quoi) ont réellement commencé à comprendre la cause fondamentale de ce comportement (et de pas mal d'autres) il y a seulement quelques mois, alors que le bug en lui même est connu depuis des années.
 
Pour l'explication et les informations sur ce bug et les autres "dimensional bugs", ils ont créé un document que je recommande de lire: On Having Layout


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Sujets relatifs:

Leave a Replay

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