Margin top bug entre IE et Firefox

Margin top bug entre IE et Firefox - HTML/CSS - Programmation

Marsh Posté le 26-08-2009 à 10:36:57    

Bonjour à tous !
 
J'ai un petit problème d'affichage de contenu entre Firefox et IE.
Je m'explique, voici le code pour afficher les deux tableaux :
 

Code :
  1. .CV1
  2. {
  3. margin-top:-215px;
  4. margin-left:550px;
  5. font-size:11px;
  6. }
  8. .CV2
  9. {
  10. margin-top: -94px;
  11. margin-left:550px;
  12. font-size:11px;
  13. }


 

Code :
  1. <table class="CV1" height=100>
  2. <tr>
  3. <td align=center width=260>
  4.  <span style="font-size: 14px;">rolk24 (F 25 ans)</span>
  5. </td>
  6. </tr>
  7. <tr height=88 valign=middle>
  8. <td>
  9.  Bonjour, originaire de dordogne, je me<br/>
  10.  suis évadée quelques années pour mes<br/>
  11.  études! Je viens de revenir dans la<br/>
  12.  région et je cherche à faire des<br/>
  13.  rencontres amicales en premier lieu et<br/>
  14.  plus si affinité...
  15. </td>
  16. </tr>
  17. </table>
  19. <table class="CV2" height=100>
  20. <tr>
  21. <td align=center width=260>
  22.  <span style="font-size: 14px;">zac360 (H 25 ans)</span>
  23. </td>
  24. </tr>
  25. <tr height=88 valign=middle>
  26. <td>
  27.  cool et sympatique je cherche à faire des<br/>
  28.  rencontres amicales et peut êtres une<br/>
  29.  rencontre amoureuse si affinité. à<br/>
  30.  bientôt j'espère avoir des contacts!.
  31. </td>
  32. </tr>
  33. </table>


 
Et enfin voici deux imprim' écran de ce que j'obtiens pour chaque navigateurs :
 
Firefox :
http://i81.servimg.com/u/f81/11/31/25/01/bug-af10.jpg
 
IE :  
http://i81.servimg.com/u/f81/11/31/25/01/bug-af11.jpg
 
 
le fond (le cadre violet, etc.) c'est un background-image sur lequel j'ai fait pas mal de positionnement d'autre éléments (avec aussi des margin-top et margin-left).
 
Merci d'avance !

Reply

Marsh Posté le 26-08-2009 à 10:36:57   

Reply

Marsh Posté le 26-08-2009 à 12:57:48    

salut,  
 
il n'y a aucune raison d'utiliser des tableaux pour ce type de comportement... si tu as une image fixe derrière, je te conseille d'utiliser des div en position:absolute par exemple...

Reply

Marsh Posté le 26-08-2009 à 13:48:29    

Tiens c'est marrant, Firefox empêche le chevauchement des tableau (ce qui serait normal remarque)...
Sinon, utiliser des tableaux pour ton utilisation n'a rien de bon... Donc, +1 pour les DIV...(mais en position relative vue qu'il s'agit d'un élément en desous l'autre), et d'integrer les bg-image au bon élement...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 26-08-2009 à 14:15:33    

En fait j'avais utiliser des tableau pour centrer le titre des deux petits encarts au milieu
ET pour centrer verticalement le contenu des deux cadre, ça serait trop compliqué (mais faisable) de centrer le contenu avec des div non ?

Reply

Marsh Posté le 26-08-2009 à 14:29:43    

C'est beaucoup plus adéquat de le faire en div... ça sera peut-etre plus compliqué dans le sens ou tu t'es habitué au table, mais tu veras que le principe des div est plus "logique"... je vais te faire un exemple quand j'aurais 10 sec...
Sinon, pour centrer le texte DANS une div (horizontalement) c'est le CSS "text-align : center;"... pour centrer une div horizontalement dans son conteneur, c'est "margin : auto;"
Pour le centrage verticale, c'est un autre problèmes, les solution sont diverses, mais je ne te montrerais pas.. je te ferais un exemple ou le cadre du texte sera extensible et s'adaptera verticalement au contenu...


Message édité par abais le 26-08-2009 à 14:33:21

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 26-08-2009 à 14:36:17    

Ouais, t'as raison, en fait j'ai utilisé un tableau parce que j'ai repris le code d'un collègue qui ne jure que par les <table>, du coup j'ai continué dans la lancé. Mais pour tout le reste de mon code, je n'utilise que des div ou des span avec des  margin: auto; ou des margin-top et margin-left...
Mais je crois que je vais re-taper mon code en div et span c'est bien plus efficaces et compatible avec tous les différents types de navigateurs !

Reply

Marsh Posté le 26-08-2009 à 16:02:47    

Tiens : regarde ça : (je n'ai pas verifier sur tous les browser) :  
 
>>> Lien <<<
 
Les images :


La source :  
 
HTML :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Test div Ozone24</title>
  6.  
  7. </head>
  8.  
  9. <body>
  10. <div class="message">
  11.     
  12.   <div class="auteur">
  13.             rolk24 (F 25 ans)
  14.   </div>
  15.         
  16.         <div class="texte">
  17.             Ceci est un message de plusieurs ligne, ce qui devrait agrandir verticalement son conteneur...
  18.         </div>
  19.         
  20.     </div>
  21.     
  22.     <div class="message">
  23.     
  24.         <div class="auteur">
  25.             zac360 (H 25 ans)
  26.         </div>
  27.         
  28.         <div class="texte">
  29.             blablab blabla blababla bla blabla bla blab blabla blablabla bla blabla blablab blabla bla blabla bla ab blabla blablabla bla blabla blablab blabla bla blabla bla ab blabla blablabla bla blabla blablab blabla bla blabla bla blabla blablab blabla blablabla bla blabla blablab blab la blabl abla bla blab blabla blablabla bla blabla blablab blabla bla blabl
  30.         </div>
  31.         
  32.     </div>
  33.     
  34.     <div class="message">
  35.     
  36.         <div class="auteur">
  37.             rolk24 (F 25 ans)
  38.         </div>
  39.         
  40.         <div class="texte">
  41.             cool et sympatique je cherche à faire des rencontres amicales et peut êtres une rencontre amoureuse si affinité. à bientôt j'espère avoir des contacts!.
  42.         </div>
  43.         
  44.     </div>
  45.  
  46. </body>
  47. </html>


 
CSS:

Code :
  1. body {
  2. margin:0;
  3. font-family:Verdana, Arial, Helvetica, sans-serif;
  4. }
  5. .message{
  6. position:relative;
  7. background:url(images/testDiv_bg.png);
  8. width:250px;
  9. margin:15px auto 15px auto;
  10. }
  11. .auteur{
  12. position:relative;
  13. padding-top:3px;
  14. width:250px;
  15. height:58px;
  16. text-align:center;
  17. font-size:14px;
  18. background:url(images/testDiv_haut.png);
  19. }
  20. .texte{
  21. position:relative;
  22. margin-top:-25px;
  23. padding:5px 20px 10px 20px;
  24. text-indent:20px;
  25. min-height:36px;
  26. font-size:10px;
  27. text-align:justify;
  28. background:url(images/testDiv_bas.png) no-repeat bottom;
  29. }


Message édité par abais le 26-08-2009 à 16:10:04

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 26-08-2009 à 17:38:13    

Merci beaucoup abais !!
Je me demandais comment faisait les webmasters, en fait c'est simple ! :D
 
J'aurais une autre question aussi, en fait je voudrais rajouter des photos dans mes cadres en haut de la page :
 
http://i81.servimg.com/u/f81/11/31/25/01/cadrag10.jpg
 
Mais vu que j'ai placé tout mes éléments avec des margin et que les photos ne sont pas entre eux de la même hauteur et longueur, il y'a un problème quand je veux les placer dans les cadres, ça chamboule tout.
J'ai essayé avec les position absolute, mais si on zoome avec le navigateur (ctrl+"+" ou ctrl+"molette de la souris" ) ça bug complètement, ça me met les images un peu partout hors des cadres, un peu n'importe comment.
 
Il y'aurait pas une solution pour placer correctement les images dans des cadres ?

Message cité 1 fois
Reply

Marsh Posté le 26-08-2009 à 18:31:29    

ozone--24 a écrit :

Merci beaucoup abais !!
Je me demandais comment faisait les webmasters, en fait c'est simple ! :D
 
J'aurais une autre question aussi, en fait je voudrais rajouter des photos dans mes cadres en haut de la page :
 
http://i81.servimg.com/u/f81/11/31/25/01/cadrag10.jpg
 
Mais vu que j'ai placé tout mes éléments avec des margin et que les photos ne sont pas entre eux de la même hauteur et longueur, il y'a un problème quand je veux les placer dans les cadres, ça chamboule tout.
J'ai essayé avec les position absolute, mais si on zoome avec le navigateur (ctrl+"+" ou ctrl+"molette de la souris" ) ça bug complètement, ça me met les images un peu partout hors des cadres, un peu n'importe comment.
 
Il y'aurait pas une solution pour placer correctement les images dans des cadres ?


dis toi juste dans ta tête que à partir du moment ou tu es obligé de bricolé et donc te taper des margin-top négatifs et devoir recaler des trucs aussi mochement (margins negatifs, position relatifs et absolute avec des tops dans tous les sens) ça signifie que c'est mal codé et que tu dois repartir proprement


---------------
Blablaté par Harko
Reply

Marsh Posté le 26-08-2009 à 18:33:44    

Tu te lance dans l'entreprise d'un site de rencontre avec de très faible notion en prog web ou n'ai-je rien compris ???
 
Il faut une solidarité logique entre les photos et leurs cadre...
Le Webdesign, ce n'est pas une image et une synchronisation de position des éléments dynamique par une superposition + que bordélique...
 
Je te conseil d'apprendre les bases du web avant d'entreprendre ce projet...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 26-08-2009 à 18:33:44   

Reply

Marsh Posté le 26-08-2009 à 19:51:24    

T'es bien méchant avec moi ^^
Le projet est quasiment fini, c'est une petite boîte, t'inquiètes pas pour ça ;-)
 
Je voudrais juste de l'aide pour cette partie là, après j'aurais fini :)
 
Tu n'aurais pas une idée Abais ?

Reply

Marsh Posté le 26-08-2009 à 20:10:36    

bas, une div avec limage du cadre en background...
Tu met ta photo <img> dans cette div (qui contien un padding de manière à caler le contenu à l'image de fond).
Sinon, je ne suis pas méchant, je t'ai même consacré 15 min aujourd'hui, j'ai juste peur que ça ne serve pas autant que je le pensais, parceque mon altruisme a ses limites... Je ne pensais pas que tu n'avais pas ces notions...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Sujets relatifs:

Leave a Replay

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