IE/Firefox - C'est normal toutes ces différences, là ?

IE/Firefox - C'est normal toutes ces différences, là ? - HTML/CSS - Programmation

Marsh Posté le 14-03-2007 à 11:35:05    

Hello !
 
J'ai un petit soucis avec mon design. Je ne sais vraiment pas d'ou ca vient, mais Firefox ne calcule pas les largeurs de la meme facon qu'IE :D
D'après moi, c'est IE qui a raison, à savoir que si je mets un bloc de 150 et un de 650px de large dans un bloc de 800px de large, ca passe (sans margin), mais firefox n'est pas d'accord avec ca.
 
voilà le css :
 
 

Code :
  1. body {
  2.   margin:0px;
  3.   padding:0px;
  4.   text-align:center;
  5.   background-color:#0F0900;
  6.   font-family: Verdana;
  7.   font-size:12px;
  8.   color:#FFFCC9;
  9. }
  12. .menuList{
  13.   margin: 0px;
  14.   padding: 0px;
  15.   display: inline;
  16.   list-style-type: none;
  17.   text-align:right;
  18. }
  20. .title {
  21.   margin:0px 0px 0px 100px;
  22.   padding:0px;
  23.   text-align:right;
  24.   border-bottom:1px solid #CCFF6D;
  25.   color:#CCFF6D;
  26. }
  28. #header {
  29.   background:url(./images/header2.jpg);
  30.   padding:10px 0px 0px 0px;
  31.   height:200px;
  32.   margin:0px;
  33. }
  37. #main {
  38.   text-align:justify;
  39.   background-color:#211400 ;
  40.   margin-bottom:0px;
  41.   margin-left:auto;
  42.   margin-right:auto;
  43.   width:800px;
  44.   border-left:1px solid #D8D488;
  45.   border-right:1px solid #D8D488;
  46.   overflow:auto;
  47. }
  49. #content {
  50.   margin:0px;
  51.   border-top:1px solid #D8D488;
  52.   background-color:#211400;
  53.   float:left;
  54.   padding:0px 20px 20px 20px;
  55.   width:610px;
  56. }
  58. #right_col {
  59.   margin:0px;
  60.   padding:0px;
  61.   float:right;
  62.   background:url(./images/header2.jpg) no-repeat;
  63.   background-position: -650px -220px;
  64.   width:150px;
  65. }
  67. #menu {
  68.   float:right;
  69.   margin:0px;
  70.   padding:100px 0px 100px 0px;
  71.   border-bottom:1px solid #D8D488;
  72.   border-left:1px solid #D8D488;
  73. }
  75. #menu a {
  76.   background-color:#ffffff;
  77.   margin-bottom:2px;
  78.   width:125px;
  79.   float:right;
  80.   text-align:right;
  81.   padding:0px;
  82.   display:block;
  83.   height:25px;
  84.   padding-right:20px;
  85.   color:#3D2301;
  86. }
  89. #menu li {
  90.   float:right;
  91.   padding:0px;
  92.   margin:0px;
  93.   background-color:#ffffff;
  94.   filter:alpha(opacity=60);
  95.   opacity:0.5;
  96. }


 
En gros, j'ai mon conteneur main centré sur la page, de 800px de large. Dedans je prends un div "content" de 610px à gauche et un autre "right_col" de 150px. Dans cette configuration là c'est niquel sous firefox, mais pas sous IE puisqu'il manque 800 - 610 - 150 = 40px !
 
Heeeelp! :(
 
 
 

Reply

Marsh Posté le 14-03-2007 à 11:35:05   

Reply

Marsh Posté le 14-03-2007 à 11:43:54    

Je viens de voir qu'en fait le problème vient du padding.
Sous firefox, si je mets un padding de 20, ca augmente la largeur du bloc de 40. Sous IE, ca conserve la largeur.

Reply

Marsh Posté le 14-03-2007 à 13:22:13    

http://www.quirksmode.org/css/quirksmode.html
 
bonne lecture


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 14-03-2007 à 15:51:25    

Excellent.
 
Quel con, j'avais oublié le DocType, m'enfin au moins maintenant je sais vraiment à quoi ca sert :D

Reply

Sujets relatifs:

Leave a Replay

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