Incompatibilité IE / Firefox

Incompatibilité IE / Firefox - HTML/CSS - Programmation

Marsh Posté le 04-07-2006 à 14:58:22    

Bonjour !
 
Depuis près de 3 ans, je fais toutes les structures de mes site avec des tableaux en html.
Suites à de nombreuses critiques d'amis, je décidé de passer à une mise en page en css.
 
Inutile de dire que c'est beaucoup plus propre et lisible.
Content de mon résultats sous Mozilla, je décide de vérifier sous IE. et forcément bug !
 
La mise en page est simple:
- une image en header
- une zone aussi large que le header pour faire défiler des citations
- une menu à gauche
- et la page a coté du menu
 
Tout s'affiche parfaitement sous Firefox, mais sous IE, la "page" se place sous le menu (met bien décallé comme il faut).
 
Et, je ne sais pas d'où vient le problème.
 
Actuellement, je travail sur deux pages:
 
Index.html:
<html>
<head>
<title>Test de design</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<center>
<div class="all">
 
<div class="header"></div>
 
 
<div class="quotes">
mmmmmmmmmmmmmmmhhhhhhhhhhhhhhhhhhhh
</div>
 
<div class="menu">
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
</div>
 
<div class="page">
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
 
</div>
 
 
</div>
</center>
</body>
 
</html>
 
 
Et le style.css associé:
body {
font-family:Verdana, Arial;
color:white;
background-color:black;
font-size: 12px;
text-decoration:none;
}
 
.all {
margin-top: 5px;
margin-bottom: 5px;
width:720px;
background-color:black;
}
 
 
.header {
background-image: url('Head.jpg');
width: 720px;
height: 300px;
border: #ff0000 5px solid;
}
 
.quotes {
margin-top: 4px;
width: 720px;
border: #ff0000 5px solid;
}
 
.menu {
margin-top: 4px;
float: left;
width: 190px;
border: #ff0000 5px solid;
}
 
.page {
margin-top: 4px;
margin-left: 204px;
width: 516px;
border: #ff0000 5px solid;
}
 
 
 
Pourriez-vous m'aider ?
 
Merci !

Reply

Marsh Posté le 04-07-2006 à 14:58:22   

Reply

Marsh Posté le 04-07-2006 à 15:02:29    

sur le forum, il est bon de poster son code entre balise [code]
 
Ensuite, met un doctype au début de ton code, regarde sur le net ce que ça signifie...
 
Aprés on voit
 
Et dans le css met au début:
 

Code :
  1. * {
  2. margin:0;
  3. padding:0;
  4. }

Reply

Marsh Posté le 04-07-2006 à 15:20:02    

Re bonjour,
 
Excuse moi pour l'erreur de la balise :S
 
Alors, j'ai effectué les modifications que tu as demandé, j'ai donc ainsi:
 
Index.html

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />   
  5. <title>Test de design</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  9. <body>
  10. <center>
  11. <div class="all">
  12. <div class="header"></div>
  13. <div class="quotes"></div>
  14. <div class="menu"></div>
  15. <div class="page"></div>
  16. </div>
  17. </center>
  18. </body>
  19. </html>


 
Style.css

Code :
  1. * {
  2. margin:0;
  3. padding:0;
  4. }
  6. body {
  7. font-family:Verdana, Arial;
  8. color:white;
  9. background-color:black;
  10. font-size: 12px;
  11. text-decoration:none;
  12. }
  14. .all {
  15. margin-top: 5px;
  16. margin-bottom: 5px;
  17. width:720px;
  18. background-color:black;
  19. }
  22. .header {
  23. background-image: url('Head.jpg');
  24. width: 720px;
  25. height: 300px;
  26. border: #ff0000 5px solid;
  27. }
  29. .quotes {
  30. margin-top: 4px;
  31. width: 720px;
  32. border: #ff0000 5px solid;
  33. }
  35. .menu {
  36. margin-top: 4px;
  37. float: left;
  38. width: 190px;
  39. border: #ff0000 5px solid;
  40. }
  42. .page {
  43. margin-top: 4px;
  44. margin-left: 204px;
  45. width: 516px;
  46. border: #ff0000 5px solid;
  47. }


 
Dinc, mon problème persiste malgré tout.
 
Merci ^^


Message édité par Kechi le 04-07-2006 à 15:26:01
Reply

Marsh Posté le 04-07-2006 à 15:25:13    

j'ai trouvé la solution.
 
1) Il faut virer le tag <center> de ta page web
2) il faut virer le width:720px de la classe .all

Reply

Marsh Posté le 04-07-2006 à 15:26:54    

<center> ça existe plus comme balise, c'est deprecated ;)
 
Met un
 

Code :
  1. margin:0 auto;
  2. width:valeur;


 
 
Pour centrer le contenu, aprés ça, je pourrais maybe décidé à regarder ton code ;)

Reply

Marsh Posté le 04-07-2006 à 15:37:48    

Alors, merci pour vos réponses.
 
Bob_eponge, ta solution me convient moyennement, dans le sens où, je veux garder le design centré.
Chose, que xtof semble me faire conserver.
 
Par contre, j'ai toujours mon problème avec ta correction xtof. Le cadre "page" se met bien à sa place, mais reste placé sous le menu.
 
Donc, voilà où je suis niveau code:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Test de design</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  9. <body>
  10. <div class="all">
  12. <div class="header"></div>
  13. <div class="quotes"></div>
  14. <div class="menu"></div>
  15. <div class="page"></div>
  17. </div>
  18. </body>
  19. </html>


 
 

Code :
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  6. body {
  7. font-family: Verdana, Arial;
  8. color: white;
  9. background-color: black;
  10. font-size: 12px;
  11. text-decoration: none;
  12. }
  14. .all {
  15. margin-top: 5px;
  16. margin-bottom: 5px;
  17. background-color: #000000;
  18. color: white;
  19. margin: 0 auto;
  20. width: 720px;
  21. }
  24. .header {
  25. background-image: url('Head.jpg');
  26. width: 720px;
  27. height: 300px;
  28. border: #ff0000 5px solid;
  29. }
  31. .quotes {
  32. margin-top: 4px;
  33. width: 720px;
  34. border: #ff0000 5px solid;
  35. }
  37. .menu {
  38. margin-top: 4px;
  39. float: left;
  40. width: 190px;
  41. border: #ff0000 5px solid;
  42. }
  44. .page {
  45. margin-top: 4px;
  46. margin-left: 204px;
  47. width: 516px;
  48. border: #ff0000 5px solid;
  49. }

Reply

Marsh Posté le 04-07-2006 à 16:21:07    

met un clear:left; dans .page ;)

Reply

Marsh Posté le 04-07-2006 à 17:18:19    

Ca me donne un résultat encore plus bizzare O_o
 
Il me décalle le cadre en hauteur sous Mozilla et rien ne change sous IE O_O

Reply

Marsh Posté le 05-07-2006 à 00:18:50    

Salut,
 
Voici la solution que je te propose:
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4.  <title>Test de design</title>
  5.  <style type="text/css">
  6.   body { margin: 0; padding: 0; background-color:black; color: #fff;}
  7.   .all { width: 720px; margin: 0 auto;}
  8.   .header { border: #ff0000 5px solid; }
  9.   .quotes { margin-top: 4px; border: #ff0000 5px solid; }
  10.   .menu { float: left; border: #ff0000 5px solid; width: 190px; margin-top: 4px; }
  11.   .page { margin-left: 204px; border: #ff0000 5px solid; margin-top: 4px; width: 506px; }
  12.   * html .page { margin-left: 201px; }
  13.  </style>
  14. </head>
  15. <body>
  16.  <div class="all">
  17.   <div class="header">aaa</div>
  18.   <div class="quotes">aaa</div>
  19.   <div class="menu">aaa</div>
  20.   <div class="page">aaa</div>
  21.  </div>
  22. </body>
  23. </html>


 
Je pense qu'elle te conviendra.
A toi de ocmpléter avec ton contenu, et également tes backgrounds...
 
Tu verras que coder avec du CSS, c'est certes plus léger, mieux, etc... mais surtout beaucp plus prise de tête qu'avec les tables. Ca demande énormément de maîtrise, et plus de temps...
Pour ma part, j'a commencé par la mise en page avec CSS, en évitant dès le début d'utiliser des tables, mais je pense que je vais chercher à apprendre à le faire avec des tables... Ca peut sauver la vie quand on est bloqués à cause de telle ou tell incompatibilité avec des browsers...


Message édité par Yoyo@ le 05-07-2006 à 10:51:16
Reply

Marsh Posté le 05-07-2006 à 00:19:56    

Ah oui, j'ai testé avec:
Firefox
IE 6.0
Opéra 9

Reply

Sujets relatifs:

Leave a Replay

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