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

Li (ou image) affiché differement sous IE et FF - HTML/CSS - Programmation

Marsh Posté le 28-07-2006 à 11:33:34    

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
Reply

Marsh Posté le 28-07-2006 à 11:33:34   

Reply

Marsh Posté le 28-07-2006 à 14:45:10    

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
Reply

Marsh Posté le 28-07-2006 à 15:41:40    

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

Reply

Marsh Posté le 28-07-2006 à 15:58:51    

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
Reply

Marsh Posté le 28-07-2006 à 16:05:13    

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
Reply

Marsh Posté le 28-07-2006 à 16:13:23    

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.

Reply

Marsh Posté le 28-07-2006 à 16:23:38    

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

Reply

Marsh Posté le 28-07-2006 à 16:25:56    

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
Reply

Marsh Posté le 28-07-2006 à 16:29:45    

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
Reply

Marsh Posté le 28-07-2006 à 16:31:30    

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

Reply

Marsh Posté le 28-07-2006 à 16:31:30   

Reply

Marsh Posté le 28-07-2006 à 16:34:39    

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
Reply

Marsh Posté le 28-07-2006 à 17:08:02    

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)

Reply

Marsh Posté le 28-07-2006 à 18:35:02    

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
Reply

Marsh Posté le 30-07-2006 à 09:26:16    

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
Reply

Marsh Posté le 30-07-2006 à 13:31:48    

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

Reply

Marsh Posté le 31-07-2006 à 10:40:28    

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
Reply

Marsh Posté le 01-08-2006 à 09:09:56    

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
Reply

Marsh Posté le 01-08-2006 à 13:37:01    

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

Reply

Marsh Posté le 01-08-2006 à 13:59:48    

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
Reply

Marsh Posté le 01-08-2006 à 16:12:03    

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

Reply

Marsh Posté le 02-08-2006 à 09:39:31    

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
Reply

Marsh Posté le 11-08-2006 à 12:03:58    

up :bounce:


---------------
D3
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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