Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1184 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] Display: block pour le lien sous IE

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU] Display: block pour le lien sous IE

n°1174093
Beral2
Posté le 10-08-2005 à 17:16:28  profilanswer
 

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
mood
Publicité
Posté le 10-08-2005 à 17:16:28  profilanswer
 

n°1174096
gatsusat
Posté le 10-08-2005 à 17:19:12  profilanswer
 

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

n°1174110
masklinn
í dag viðrar vel til loftárása
Posté le 10-08-2005 à 17:25:06  profilanswer
 

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
n°1174131
Beral2
Posté le 10-08-2005 à 17:47:51  profilanswer
 

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
n°1174143
Beral2
Posté le 10-08-2005 à 18:02:49  profilanswer
 

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.

n°1174149
Beral2
Posté le 10-08-2005 à 18:06:48  profilanswer
 

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.

n°1174154
masklinn
í dag viðrar vel til loftárása
Posté le 10-08-2005 à 18:12:24  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] Display: block pour le lien sous IE

 

Sujets relatifs
[RESOLU] -> [FMX/MySQL] GET ou POST??[Résolu] récupérer un objet au format "time"
[SVG] comment mettre à jour Mysql avec un fichier SVG ? [RESOLU]Cloner un objet Document [résolu : pas possible]
[Résolu] Pb avec les égalités de chaines[résolu]fenetre dos
PArametres optionnels [Resolu][resolu]resulat msgbox
lien hypertext et image[html] [RESOLU] largeur liste déroulante
Plus de sujets relatifs à : [RESOLU] Display: block pour le lien sous IE


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR