Problème de mise en page css html IE/firefox

Problème de mise en page css html IE/firefox - HTML/CSS - Programmation

Marsh Posté le 07-08-2005 à 13:21:45    

Bonjour à tous,
 
mon problème est le suivant en allant sur le site via IE sur  
 
http://www.alainguy.org/article.php3?id_article=10
 
le cadre le plus clair descend en bas jusqu'au bout du texte alors que sous firefox
 
le cadre ne descend que là ou j'ai spécifié en px donc à la moitié du texte.
 
j'ai tenté de mettre 100% mais je suis limité par la bordure gauche de rubrique
 
#container {  /* sorry, we are using a container because ie badly support body tag*/
 margin: 2px auto;
 min-height: 100%;
 width: 750px;
 
 
Autrement dit c'est moche et pas du tout bon :( pourtant je souhaite avoir le même résultat obtenu avec IE sous firefox.
Que faire ? merci d'avance
 
voici le script css original (la ligne 11 est je pense celle qui joue dans la mise en page globale)
 

Code :
  1. /* Main tags ------------------------------------*/
  3. html, body {
  4.   margin: 0;
  5.   padding:0;
  6.   background:#D2B48C;/*#DEB887; /*#FFF8DC;/*#84CA66; /*#94CD7C;  #75C254;*/
  7.   font:x-small  Arial, Verdana, sans-serif; 
  8.   text-align: center; /* IE5 doesnt support margin auto */
  9. }
  11. #container {  /* sorry, we are using a container because ie badly support body tag*/
  12. margin: 2px auto;
  13. min-height: 750px;
  14. width: 750px;
  17. text-align: left;
  18. background:#F5DEB3; /*#FFEFD5;*/
  19. padding: 8px 8px 0 8px;
  20. font-size: 14px;
  21. line-height: 120%;
  22. }
  24. a {
  25. margin: 3px 0;
  26. color: #f60;
  27. }
  29. a:hover {
  30. color: #f30;
  31. }
  34. img { border: 0 }
  36. h3 span{
  37. display:none;
  38. }
  40. /* structure ------------------------------------*/
  41. #header {
  42. /*background: transparent url(../interface/banner_brest.png) no-repeat;*/
  43. width:  750px;
  44. height: 113px;
  45. }
  46. #headerprint {display:none;}
  48. #main {
  49. /*background: yellow;*/
  50. float: right;
  51. width: 73%;
  52. padding: 5px;
  54. text-align: justify;
  55. }
  57. #menu {
  58. /*background: blue;*/
  59. width: 21%;
  60. float: left;
  61. padding: 0;
  62. font-size: 12px;
  63. }
  65. #footer {
  66. clear: both;
  67. border: 0;
  68. border-top: 1px solid #ddd;
  69. color: #666;
  70. padding: 5px;
  71. margin: 20px 10% 0 10%;
  72. text-align: center;
  73. font-size: 11px;
  74. line-height: 90%;
  75. }
  77. #footerprint {display:none;}
  79. /* elements -------------------------------------- */
  80. #menumain {
  81. margin: 10px 0 0 0;
  82. background: transparent url(../interface/menu_pop_sommaire.png) no-repeat 3px 0;
  83. width: 170px;
  84. padding: 23px 5px 0 4px;
  85. line-height: 136%;
  86. }
  88. /* IE too buggy
  89. #menumain ul {
  90. display:inline;
  91. margin:0;
  92. padding:0;
  93. }
  95. #menumain ul li{
  96.     list-style-type: none;
  97. margin:0;
  98. padding:0;  
  99. border:1px solid white;  
  100. background-image: url(../interface/menu_puce.png);
  101. background-repeat: no-repeat;
  102. background-position: 3% 52%;
  103. padding-left: 0;
  104. }
  105. */
  107. #menumain a {
  108. display: block;
  109. text-decoration: none;
  110. color: #224314;
  111. }
  113. #menumain a:hover {
  114. color: #96A68F;
  115. }
  118. /* icone bref, syndication ... */
  119. h3.breve, h3.rubrique, h3.web, h3.link, h3.keyword, h3.tools {
  120. margin:  0;
  121. padding: 0;
  122. min-width: 160px;
  123. height: 36px;
  124. }
  125. h3.breve    { background: transparent url(../interface/menu_pop_breve.png) no-repeat bottom left;}
  126. h3.rubrique { background: transparent url(../interface/menu_pop_rubrique.png) no-repeat bottom left;}
  127. h3.web      { background: transparent url(../interface/menu_pop_web.png) no-repeat bottom left;}
  128. h3.link     { background: transparent url(../interface/menu_pop_link.png) no-repeat bottom left;}
  129. h3.keyword  { background: transparent url(../interface/menu_pop_keyword.png) no-repeat bottom left;}
  130. h3.tools    { background: transparent url(../interface/menu_pop_tool.png) no-repeat bottom left;
  131.    margin-bottom: 3px;
  132. }
  135. .item {
  136. margin: 2px 0 8px 0;
  137. }
  139. .item a{
  140. text-decoration: none;
  141. color: #626262;
  142. }
  143. .date {
  144. margin: 0 4px 0 0;
  145. font-size: 90%;
  146. }
  148. /* footer -------------------------------------- */
  149. #footer a, #footer a:active, #footer a:link {
  150. color: #5c5c5c;
  151. text-decoration: none;
  152. margin: 0 3px;
  153. }
  155. #footer a:hover {color: #000;}
  156. #footerprint { display: none;}
  158. /* spip article typo -------------------------------------- */
  159. .surtitre  {
  160. font-weight: bold;
  161. margin: 5px 0;
  162. }
  164. h1, h1 a {
  165. color:  #009;
  166. font-size: 22px;
  167. margin:  9px 0 4px 0;
  168. padding: 0;
  169. text-decoration: none;
  170. line-height: 22px;
  171. }
  173. h1 a:hover {
  174. text-decoration: none;
  175. }
  177. h2 {
  178. font-size: 18px;
  179. font-weight: normal;
  180. margin: 5px 0;
  181. }
  183. h4 {
  184. font-size: 16px;
  185. margin: 18px 0 0 0;
  186. }
  188. h4 a {
  189. text-decoration: none
  190. }
  192. .date2 {
  193. color: #777;
  194. text-align: right;
  195. margin: 0 7px;
  196. font-size: 12px;
  197. }
  199. .logo {
  200. float:right;
  201. margin: 20px 0 0 10px;
  202. }
  204. .logo2 {
  205. float:left;
  206. margin: 20px 0 0 10px;
  207. }
  210. .auteur {
  211. text-align: right;
  212. margin: 3px 7px;
  213. }
  215. .soustitre {
  216. margin-top: 10px;
  217. font-style: italic;
  218. }
  219. .chapo     {
  220. padding:   8px 30px 8px 60px;
  221. margin: 5px 0;
  222. line-height: 100%;
  223. }
  225. .texte {}
  226. .hyperlink {}
  228. .ps {
  229. border-top: 1px solid #ccc;
  230. margin-top: 5px;
  231. }
  233. .note {
  234. margin: 5px 0;
  235. font-size: 12px;
  236. }
  238. .doc-item { font-weight: bold;}
  239. .doc-legend { color: #666;}
  240. .doc-descro {}
  242. .metarub {
  243. color: #999;
  244. font-size: 12px;
  245. }
  247. .keywords {
  248. color: #999;
  249. font-size: 12px;
  250. }
  252. /* rubrique *************************************/
  253. .sousrubrique a {
  254. color:  #009;
  255. text-decoration: none;
  256. font-weight: bold;
  257. font-size: 16px;
  258. }
  260. .preview a{
  261. color: #224314;
  262. text-decoration: none;
  263. }
  265. .preview a:hover{
  266. color: #778A6F;
  267. }
  269. .spacer {
  270. clear: both;
  271. }
  273. #pagination {
  274. font-size: 12px;
  275. margin: 15px 0 0 0;
  276. }
  278. #pagination a, #pagination a:hover{
  279. text-decoration: none;
  280. }
  282. /* misc elements *************************************/
  284. #path {
  285. margin: 0;
  286. padding: 6px 0;
  287. font-family:Courrier, Verdana, Arial, sans-serif;
  288. font-size: 12px;
  289. font-weight: bold;
  290. color:  #aaa;
  291. line-height: 100%;
  292. }
  294. #path a {
  295. color: #666;
  296. text-decoration: none;
  297. }
  299. #path a:hover {
  300. color: black;
  301. text-decoration: none;
  302. }
  304. /* spip main class -------------------------------------- */
  305. b.spip  {font-weight: bold;}
  306. p.spip  {padding-left: 3px;}
  307. hr, hr.spip {
  308. display:block;
  309. height: 0;
  310. color: white;
  311. border-style:solid;
  312. border-color: #ccc;
  313. border-width:0px 0px 1px 0px;
  314. }
  316. .spip_encadrer {
  317. margin: 10px 30px 0 30px;
  318. font-size: 12px;
  319. padding: 0;
  320. }
  322. .spip_encadrer b{
  323. display: block;
  324. background: #eee;
  325. padding: 4px;
  326. font-weight: bold;
  327. border-bottom: 1px solid #ccc;
  328. border-top: 1px solid #ccc;
  329. }
  331. a.spip_in, a.spip_out {
  332. color: #f60;
  333. text-decoration: none;
  334. }
  336. a.spip_in:hover,  a.spip_out:hover{
  337. color: red;
  338. text-decoration: none;
  339. }
  341. .spip-admin {
  342. position:absolute;
  343. display:inline;
  344. top: 2px;
  345. left:2px;
  346. }
  349. /* forum -------------------------------------- */
  350. #forumreply{
  351. background: #777;
  352. color: #fff;
  353. margin:  15px 0 0 0;
  354. padding: 1px 5px;
  355. border: 1px solid #000;
  356. }
  358. .forumbg {
  359. background: #eee;
  360. margin: 0;
  361. padding: 7px 10px;
  362. text-align: right;
  363. }
  366. .forum {
  367. margin: 0;
  368. padding: 10px;
  369. background: #eee;
  370. }
  372. .forumtitle {
  373. display: block;
  374. padding: 4px;
  375. font-weight: bold;
  376. background: #eee;
  377. }
  379. .forummeta {
  380. color: #666;
  381. padding-left: 20px;
  382. background: #eee;
  383. }
  385. .forumbody {
  386. color: black;
  387. padding: 4px;
  388. background: #eee;
  389. }
  390. .forumps  {
  391. padding: 4px;
  392. background: #eee;
  393. color: #666;
  394. }
  396. .forumthread {
  397. padding-left:60px;
  398. background: #eee;
  399. }
  401. .forumblink {
  402. padding: 10px;
  403. margin-left: 20px;
  404. background: #eee;
  405. }
  407. /* plan site -------------------------------------------- */
  408. .plan ul {
  409. margin: 2px 0 0 20px;
  410. padding: 2px;
  411. }
  413. .plan li {
  414. line-height: 110%;
  415. list-style-type: none;
  416. padding: 2px;
  417. margin: 0;
  418. }
  420. ul li a.plan,  ul li a.plan:hover{
  421. text-decoration: none;
  422. /*padding-left: 10px;*/
  423. color: #224314;
  424. }
  426. ul li a.plan:hover{
  427. color: #96A68F;
  428. }
  430. ul li a.planrubrique{
  431. text-decoration: none;
  432. font-weight: bold;
  433. color: #009;
  434. }
  436. ul li a.planrubrique:hover{
  437. text-decoration: none;
  438. }
  439.  
  441. /* form elements -------------------------------------- */
  442. form {
  443. margin: 0;
  444. padding: 2px 0;
  445. }
  447. input, textarea, select {
  448. border: 1px solid #ccc;
  449. margin: 1px;
  450. padding: 1px;
  451. font-size: 11px;
  452. }
  454. input.buttonwhite {
  455. border: 1px solid #FFF;
  456. }
  458. .radiobut {
  459. border: 0px solid white;
  460. }
  461. /* rss elements -------------------------------------- */
  462. .rss {
  463. /*width: 45%;*/
  464. border: 1px solid #bbb;
  465. margin: 5px 0;
  466. font-size: 12px;
  467. padding: 0 4px 5px 12px;
  468. text-align: left;
  469. }
  471. .rss h1 a{
  472. color:  #009;
  473. text-decoration: none;
  474. font-weight: bold;
  475. font-size: 16px;
  476. }
  478. .rss h1 a:hover{text-decoration: none;}
  480. /* misc elements -------------------------------------- */
  481. a.special {
  482. text-decoration:none;
  483. color:#009;
  484. }
  485. a.special:hover {
  486. text-decoration:none;
  487. color:#666;
  488. }
  490. .red { color: #f00;}
  491. .green {color: #0a0;}
  492. td { font-size: 11px}


 
edit: balise code :p


Message édité par fabcool le 07-08-2005 à 13:33:19
Reply

Marsh Posté le 07-08-2005 à 13:21:45   

Reply

Marsh Posté le 07-08-2005 à 13:24:45    

balise [code] stp :o


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 07-08-2005 à 13:33:41    

edité :p desolé j'ignorais la balise code  :p

Reply

Marsh Posté le 07-08-2005 à 13:45:42    

:jap:


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 07-08-2005 à 13:50:57    

dans #container, ajoute

overflow : auto;


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 07-08-2005 à 15:36:00    

hé bien ecoute je te remercie cela semble fonctionner :)

Message cité 1 fois
Reply

Marsh Posté le 07-08-2005 à 15:40:43    

de rien...


---------------
Nos estans firs di nosse pitite patreye...
Reply

Sujets relatifs:

Leave a Replay

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