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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Li (ou image) affiché differement sous IE et FF

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Li (ou image) affiché differement sous IE et FF

n°1415080
mechkurt
Posté le 28-07-2006 à 11:33:34  profilanswer
 

Pour un client je convertis un site existant (mise en page en table et autant de pages que de langue) en qq chose d'un peu plus moderne ;), par contre je bute sur un PB que je n'ai jamais eu au niveau des mes menus: je les ai fait en <ul><li><a> comme d'habitude (par contre j'ai laissé le rollover du client qui tenait vraiment a utiliser cette typo) mais j'ai un espace horizontal entre mes elements sous Ie qui ne devrait pas exister...
 
bon c'est un pb de margin je suppose mais je comprend pas pq...
 

Code :
  1. * {
  2. margin:0;
  3. padding:0;
  4. }
  5. img {
  6. border:0;
  7. }
  8. html,body {
  9. font-family: Arial, Helvetica, sans-serif;
  10. font-size: 11px;
  11. font-style: normal;
  12. line-height: 16px;
  13. font-weight: normal;
  14. font-variant: normal;
  15. text-transform: none;
  16. color: #00428B;
  17. background:#FBE2AE;
  18. width:100%;
  19. height:100%;
  20. text-align:center;
  21. }
  22. /* CONTENEUR */
  23. #conteneur {
  24. position:relative;
  25. width:1024px;
  26. margin:0 auto;
  27. text-align:left;
  28. background:url(bande.gif) repeat-y top left;
  29. }
  30. /* HEAD */
  31. #head {
  32. width:1024px;
  33. height:125px;
  34. background:url(head.gif) no-repeat bottom left;
  35. }
  36. /* FLASH */
  37. #flash {
  38. width:1024px;
  39. height:75px;
  40. }
  41. /* MENU */
  42. ul {
  43. list-style-type:none;
  44. }
  45. #menus {
  46. position:absolute;
  47. top:125px;
  48. left:0;
  49. width:264px;
  50. height:280px;
  51. background:url(menu.png) no-repeat bottom left #F6D08B;
  52. }
  53. #menus li {
  54. height:20px;
  55. }
  56. #menus img {
  57. height:20px;
  58. }
  59. #main {
  60. position:absolute;
  61. top:0;
  62. left:0;
  63. height:160px;
  64. width:264px;
  65. }
  66. #main img {
  67. width:264px;
  68. }
  69. #langue {
  70. position:absolute;
  71. bottom:0;
  72. right:0;
  73. height:60px;
  74. width:210px;
  75. }
  76. #langue img {
  77. width:210px;
  78. }
  79. /* CONTENU */
  80. #content {
  81. margin-left:264px;
  82. width:760px;
  83. }
  84. #content p {
  85. margin:20px 30px;
  86. }
  87. #content ul {
  88. margin:5px 50px;
  89. list-style-image:url(croix.gif);
  90. }
  91. #content ul ul {
  92. list-style-image:url(2_point.gif);
  93. }


j'ai pas mis toute la CSS mais seulement ce qui me semblait utile, si vous voulez la voir au complet:
http://mbillonlanfrey.free.fr/phoe [...] hoenix.css
 
je ne colle pas le lien complet car je ne souhaite pas qu'il soit indexé ;)
mbillonlanfrey.free.fr/phoenix/
 
je suit sur que c'est tout con mais la j'ai trops le nez dessus pour prendre le recul necessaire :/


Message édité par mechkurt le 01-08-2006 à 09:06:45

---------------
D3
mood
Publicité
Posté le 28-07-2006 à 11:33:34  profilanswer
 

n°1415288
mechkurt
Posté le 28-07-2006 à 14:45:10  profilanswer
 

personne n'a une idee, moi qui voulait convaincre le client que les mises en page en tableaux c'etait "HasBeen" et que le "tout CSS" permettait de gagner en poids et en temps pour les mises a jours, mais c'etais sans compter les "bugs" d'IE et mon manque de connaissance en CSS :-/


---------------
D3
n°1415356
chani_t
From Dune
Posté le 28-07-2006 à 15:41:40  profilanswer
 

et en lui claquant un margin :0;, padding:0; ?

n°1415370
mechkurt
Posté le 28-07-2006 à 15:58:51  profilanswer
 

premiere ligne de la CSS : * {margin:0; padding:0; }
 
la question c'est plutot pourquoi IE n'en veut pas !?
 
:/
 
merci quand même...

Message cité 1 fois

---------------
D3
n°1415377
dwogsi
Défaillance cérébrale...
Posté le 28-07-2006 à 16:05:13  profilanswer
 

Et la solution c'est peut être de lui dire une nouvelle fois pour un éléments précis. Alors quand on te pose une question prend au moins le temps d'y répondre!


Message édité par dwogsi le 28-07-2006 à 16:05:24
n°1415384
chani_t
From Dune
Posté le 28-07-2006 à 16:13:23  profilanswer
 

mechkurt a écrit :

premiere ligne de la CSS : * {margin:0; padding:0; }
 
la question c'est plutot pourquoi IE n'en veut pas !?
 
:/
 
merci quand même...


 
;) le probléme avec IE c'est que justement il ne réagis pas comme il devrais... donc il faut trouver des parades.

n°1415394
mIRROR
Chevreuillobolchévik
Posté le 28-07-2006 à 16:23:38  profilanswer
 

c ets pas le bete coup du img {display:block} par hasard :sweat:

n°1415399
mechkurt
Posté le 28-07-2006 à 16:25:56  profilanswer
 

desole, je ne voulais agresser personne, j'aurais ete plus constructif en repondant que j'avais deja essayé (mais peut etre au mauvais endroit) de rajouter ces cochonneire de margin:0
ceci dit comme j'ai finit le reste et que ca m'etonnerait pas que je me soit trompé tout a l'heure (comme dit, quand on a le nez dedans ;) ), je vais ressayer de spammer margin:0 padding:0 un peu partout (sur le ul li a img du menu qui pose probleme), si ca resout le pb je vire 1 par 1 tous ce qui n'affecte pas l'affichage...
 
encore pardon :jap:


---------------
D3
n°1415405
mechkurt
Posté le 28-07-2006 à 16:29:45  profilanswer
 

effectivement ce bug me rappelle qq chose, j'essaye de suite...
 
...argh c'est pire qu'avant ;), en tout cas sur IE cette page est coment dire, differente ;-), sous FF chez moi ca ne change rien...
mbillonlanfrey.free.fr/phoenix/horses.php?l=fr
 
pas encore ca, mais d'avoir de l'aide et des conseils ca remotive, je vais y arriver !


---------------
D3
n°1415407
chani_t
From Dune
Posté le 28-07-2006 à 16:31:30  profilanswer
 

lol... perdus dans les bugs d'affichage de IE :D

mood
Publicité
Posté le 28-07-2006 à 16:31:30  profilanswer
 

n°1415410
mechkurt
Posté le 28-07-2006 à 16:34:39  profilanswer
 

j'ai essayé en ajoutant ca:

Code :
  1. #langue ul {
  2. margin:0;
  3. padding:0;
  4. }
  5. #langue ul li {
  6. margin:0;
  7. padding:0;
  8. }
  9. #langue ul li a {
  10. margin:0;
  11. padding:0;
  12. }
  13. #langue ul li a img {
  14. margin:0;
  15. padding:0;
  16. }


a ma CSS, mais le menu langue (celui sur lequel la diff est la plus flagrante a cause de la couleur de fond differente) ne semble pas etre affecte, je m'y prend mal ?


---------------
D3
n°1415456
chani_t
From Dune
Posté le 28-07-2006 à 17:08:02  profilanswer
 

Je n'ais pas de solution par contre j'ais trouvé des liens interessant vers des sites qui parle justement de ces différences de comportement :
 
probléme de compatiblité (Alsacréation)
 
histoire d'arondis (Alsacréation)
 
compatibilité bis (openweb)
un tuto sur les problémes de compatibilité IE FF (Site du zero)

n°1415529
mechkurt
Posté le 28-07-2006 à 18:35:02  profilanswer
 

je connais bien openweb et alsacreation (c'est pourquoi je commence mes CSS par "reseter" les margin et padding a zero...)
 
par contre je ne connaissais pas la partie CSS du site du zero, j'irais jeter un oeil, merci ;-)
 
toute maniere, j'arrete pour aujourd'hui, en esperant que la nuit porte conseil !


Message édité par mechkurt le 30-07-2006 à 09:24:35

---------------
D3
n°1415909
mechkurt
Posté le 30-07-2006 à 09:26:16  profilanswer
 

2 bonne nuits de sommeil et pas mal de (re)lecture ne m'on pas bcps avancé, alors si qq'un à une idée :/


---------------
D3
n°1415945
mIRROR
Chevreuillobolchévik
Posté le 30-07-2006 à 13:31:48  profilanswer
 

ben si faut changer le display
l espace vient du fait que l image est positionnée sur la ligne inferieure du texte ...et il faut donc laisser de l espace pour les caractères du genre ypj et j en passe qui descendent sous cette ligne
si tu mets ton image en block alors ca ne sera plus considéré comme texte et il n y aura plus cette ligne
ca modifie surement l aspect de ta page et il faut corriger ensuite  
mais tu ne trouveras aucune solution qui reglera le probleme sans rien toucher d autre que tes images :/
 
comme le coup du * {margin/padding}
il faut penser a changer des le debut le display de tes images si tu comptes faire un menu en images

n°1416359
mechkurt
Posté le 31-07-2006 à 10:40:28  profilanswer
 

ok, je vais repartir de ca alors, mais ca semble impliquer pas mal de changement au niveau de la CSS, pasque le rendu etait encore plus different sour IE avec le display:block;
 
merci de cette piste, je vais creuser ca, maitenant que je sait quoi chercher, et comme  [:alkatraz] et mon ami, ca devrait rouler ;)


Message édité par mechkurt le 31-07-2006 à 10:40:40

---------------
D3
n°1417185
mechkurt
Posté le 01-08-2006 à 09:09:56  profilanswer
 

en suivant les conseils de [:alkatraz] j'ai fait:

Code :
  1. #langue ul li,
  2. #langue ul li a,
  3. #langue ul li a img {
  4. display:block;
  5. vertical-align:middle;
  6. height:20px;
  7. margin:0;
  8. padding:0;
  9. }


sans plus de resultat...
 
je continue a chercher ;)


---------------
D3
n°1417401
gatsu35
Blablaté par Harko
Posté le 01-08-2006 à 13:37:01  profilanswer
 

et en ajoutant zoom:1 [:dawa] ??

n°1417416
mechkurt
Posté le 01-08-2006 à 13:59:48  profilanswer
 

idem avec:

Code :
  1. #langue ul li,
  2. #langue ul li a,
  3. #langue ul li a img {
  4. display:block;
  5. vertical-align: middle;
  6. zoom:1;
  7. height:20px;
  8. margin:0;
  9. padding:0;
  10. }


ca sort d'ou au fait zoom, c'est du CSS 3 ou un truc proprio propre a IE ?, en tout cas j'arrive pas le trouver sur w3c.org...
 
J'ai aussi verifié qu'il n'y ai pas d'espace dans mon imbrication de <li><a><img /></a></li> mais sans plus de resultat...
 
Je commence a m'arracher les cheveux :-/
 
NB: :hello: Gatsu35, tu supporte tjrs Masklin ? ;)


---------------
D3
n°1417561
mIRROR
Chevreuillobolchévik
Posté le 01-08-2006 à 16:12:03  profilanswer
 

en principe vertical-align ne fonctionne que si tu as defini un line-height avant

n°1417927
mechkurt
Posté le 02-08-2006 à 09:39:31  profilanswer
 

toujours pareil avec:

Code :
  1. #langue ul li,
  2. #langue ul li a,
  3. #langue ul li a img {
  4. display:block;
  5. line-height:20px;
  6. vertical-align: middle;
  7. zoom:1;
  8. height:20px;
  9. margin:0;
  10. padding:0;
  11. }


ca ne change rien, je me suit debrouillé en mettant une couleur de fond identique aux boutons sur l'image de background du menu langue, ca choque moins, mais ma mise en page reste differente sous IE et FF :-/


---------------
D3
n°1424259
mechkurt
Posté le 11-08-2006 à 12:03:58  profilanswer
 

up :bounce:


---------------
D3
mood
Publicité
Posté le   profilanswer
 


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

  Li (ou image) affiché differement sous IE et FF

 

Sujets relatifs
Lien non cliquable mais affiché [:pingouino]Inserer une petite image entre 2 tables.
changer image au sruvol d'une carte-imageOnerror et image
HTML Image AffichageProbléme de chargement d'image avec GD et Formulaire
Modifier en VBA les options d'habillage d'une image[CSS/XHTML] Aligner du texte sous une image au centre
image PNG & GD library (variables images) 
Plus de sujets relatifs à : Li (ou image) affiché differement sous IE et FF

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.067 secondes

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