css et compatibilité IE/Firefox

Répondre
L4_Hyr3
le 03/04/2005 à 23:11
L4_Hyr3
Déconnecté
epita promo 2009
Salut a tous,
parfois si les standars etaient compatibles ca nous éviterai bien des ennuis ;)

là, mon probleme est un décalage des divs suivant le navigateur

voila une page de test et mon style.css :

page de test :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
  4. <head>
  5. <title>
  6. Cofitem-Cofimur
  7. </title>
  8. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  9. <meta name="description" content="COFITEM-COFIMUR acquiert et développe des actifs immobiliers dont elle
  10. propose la jouissance en location simple ou en crédit-bail." />
  11. <link title="style" type="text/css" rel="stylesheet" media="screen, projection" href="style.css" />
  12. </head>
  13.  
  14. <body>
  15.  
  16. <div id="header">
  17. titre
  18. </div>
  19.  
  20. <div id="menu">
  21. <ul class="menu">
  22. testmenu<br>
  23. testmenu<br>
  24. testmenu<br>
  25. testmenu<br>
  26. testmenu<br> 
  27. testmenu<br>
  28. testmenu<br>
  29. testmenu<br>
  30. testmenu<br>
  31. </ul>
  32. </div>
  33.  
  34. <div id="middle">
  35. <div id="sub_title">
  36.    essaisoutitre<br>
  37. </div>
  38. testmilieu<br>
  39. testmilieu<br>
  40. testmilieu<br>
  41. testmilieu<br>
  42. testmilieu<br>
  43. testmilieu<br>
  44. testmilieu<br>
  45. testmilieu<br>
  46. testmilieu<br>
  47. testmilieu<br>
  48. testmilieu<br>
  49. testmilieu<br> testmilieu<br>
  50. testmilieu<br>
  51. testmilieu<br>
  52. testmilieu<br>
  53. testmilieu<br>
  54. testmilieu<br> testmilieu<br>
  55. testmilieu<br>
  56. testmilieu<br>
  57. testmilieu<br>
  58. testmilieu<br>
  59. testmilieu<br> testmilieu<br>
  60. testmilieu<br>
  61. testmilieu<br>
  62. testmilieu<br>
  63. testmilieu<br>
  64. testmilieu<br>
  65. </div>
  66.  
  67.  
  68.  
  69. </body></html> 

et style.css :
  1. body {
  2. margin-bottom: 10px;
  3. margin-left: 50px;
  4. text-align: left;
  5. background-color: #FFFFFF;
  6. color: #000000;
  7. font: small 'Lucida Grande', Verdana, 'Bitstream Vera Sans', sans-serif;
  8. }
  9.  
  10. a {
  11. color: #888888;
  12. text-decoration: none;
  13. }
  14.  
  15. .title {
  16. font-size: 200%;
  17. font-weight: bold;
  18. }
  19.  
  20. .menu {
  21. list-style-type : square;
  22. list-style-position: outside;
  23. }
  24.  
  25. #index{
  26. width: 100%;
  27. height: 100%;
  28. margin-top: 10%;
  29. }
  30.  
  31. #title {
  32. height: 100px;
  33. font-size: 200%;
  34. font-weight: bold;
  35. margin-left: 15px;
  36. }
  37.  
  38. #header {
  39. padding-top: 10px;
  40. border-top: 3px solid #000000;
  41. border-bottom: 1px solid #000000;
  42. border-left: 1px solid #000000;
  43. border-right: 1px solid #000000;
  44. height: 60px;
  45. text-align: center;
  46. width: 900px;
  47. }
  48.  
  49. #menu{
  50. padding-top: 0px;
  51. text-align: left;
  52. border-left: 1px solid #000000;
  53. border-right: 1px solid #000000;
  54. border-bottom: 1px solid #000000;
  55. width: 199px;
  56. float: left;
  57. }
  58.  
  59. #sub_title {
  60. padding-top: 0px;
  61. padding-bottom: 8px;
  62. text-align: left;
  63. width: 680px;
  64. border-bottom: 1px solid #000000;
  65. }
  66.  
  67. #middle {
  68. padding-top: 10px;
  69. padding-bottom: 10px;
  70. padding-left: 10px;
  71. padding-right:10px;
  72. margin-left: 200px;
  73. border-right: 1px solid #000000;
  74. border-left: 1px solid #000000;
  75. text-align: left;
  76. border-bottom: 1px solid #000000;
  77. width: 680px;
  78. }
  79.  
  80.  
  81.  
  82.  
  83. /*---------------------------------------*/
  84. /*-A supprimer apres mis en ligne reelle-*/
  85. /*---------------------------------------*/
  86. #list {
  87. font-size: 120%;
  88. }
  89.  


Si quelqu'un sait comment faire pour avoir quelque chose de calé AVEC LES 2 NAVIGATEURS ca serait vraiment sympa de m'en faire profiter
merci d'avance
lupucide
le 04/04/2005 à 14:52
lupucide
Déconnecté
Pour souper avec le Diable mieux vaut avoir une longue cuillère.
  1.  
  2. <html><head>
  3. <title>Cofitem-Cofimur</title>
  4. <link title="style" type="text/css" rel="stylesheet" media="screen, projection" href="style.css" />
  5. </head>
  6. <body>
  7.  
  8. <div id="page">
  9.    <div id="header">titre</div>
  10. <div id="menu">
  11.       <ul class="menu">
  12.          testmenu<br>
  13.          testmenu<br>
  14.          testmenu<br>
  15.          testmenu<br>
  16.          testmenu<br>
  17.          testmenu<br>
  18.          testmenu<br>
  19.          testmenu<br>
  20.          testmenu<br>
  21.       </ul>
  22.    </div>
  23.  
  24.    <div id="middle">
  25.    <div id="sub_title">essaisoutitre<br></div>
  26. testmilieu<br>
  27. testmilieu<br>
  28. testmilieu<br>
  29. testmilieu<br>
  30. testmilieu<br>
  31. testmilieu<br>
  32. testmilieu<br>
  33. testmilieu<br>
  34. testmilieu<br>
  35. testmilieu<br>
  36. testmilieu<br>
  37. testmilieu<br>
  38. testmilieu<br>
  39. testmilieu<br>
  40. testmilieu<br>
  41. testmilieu<br>
  42. testmilieu<br>
  43. testmilieu<br>
  44. testmilieu<br>
  45. testmilieu<br>
  46. testmilieu<br>
  47. testmilieu<br>
  48. testmilieu<br>
  49. testmilieu<br>
  50. testmilieu<br>
  51. testmilieu<br>
  52. testmilieu<br>
  53. testmilieu<br>
  54. testmilieu<br>
  55. testmilieu<br>
  56.    </div>
  57. </div>
  58.  
  59. </body></html>
  60.  


  1.  
  2. body {
  3. margin-bottom: 10px;
  4. margin-left: 50px;
  5. text-align: left;
  6. background-color: #FFFFFF;
  7. color: #000000;
  8. font: small 'Lucida Grande', Verdana, 'Bitstream Vera Sans', sans-serif;
  9. }
  10.  
  11. a {
  12. color: #888888;
  13. text-decoration: none;
  14. }
  15.  
  16. .title {
  17. font-size: 200%;
  18. font-weight: bold;
  19. }
  20.  
  21. .menu {
  22. list-style-type : square;
  23. list-style-position: outside;
  24. }
  25.  
  26. #page{
  27.    border: 1px solid #000000;
  28.    width: 900px;
  29. }
  30.  
  31. #index {
  32. width: 100%;
  33. height: 100%;
  34. margin-top: 10%;
  35. }
  36.  
  37. #title {
  38. height: 100px;
  39. font-size: 200%;
  40. font-weight: bold;
  41. margin-left: 15px;
  42. }
  43.  
  44. #header {
  45. padding-top: 10px;
  46. border-top: 3px solid #000000;
  47. border-bottom: 1px solid #000000;
  48. height: 60px;
  49. text-align: center;
  50. width: 900px;
  51. }
  52.  
  53. #menu {
  54. padding-top: 0px;
  55. text-align: left;
  56. width: 199px;
  57. float: left;
  58. }
  59.  
  60. #sub_title {
  61. padding-top: 0px;
  62. padding-bottom: 8px;
  63. text-align: left;
  64. width: 680px;
  65. border-bottom: 1px solid #000000;
  66. }
  67.  
  68. #middle {
  69. padding-top: 10px;
  70. padding-bottom: 10px;
  71. padding-left: 10px;
  72. padding-right:10px;
  73. margin-left: 200px;
  74. border-left: 1px solid #000000;
  75. text-align: left;
  76. width: 680px;
  77. }
  78.  


Ne fonctionne que si ton menu est plus court que le contenu. Sinon reste la possibilité de caser une image représentant les bordures et de tout caser dedans.

++
lupucide
le 04/04/2005 à 14:54
lupucide
Déconnecté
Pour souper avec le Diable mieux vaut avoir une longue cuillère.
Arf, non. Désolé j'ai été trop vite mais c'est une pise à suivre. Le résultat vient des tes "width" et du "float:left".
Affaire à suivre.
L4_Hyr3
le 05/04/2005 à 00:03
L4_Hyr3
Déconnecté
epita promo 2009
oué mais aprés une gamme d'essais a modifier ces parametres j'en etait venu au fait qu'il devait y avoir une astuce qui permet de faire quelque chose de compatible .... sinon comment font les autres sites?
mojorisin
le 05/04/2005 à 10:20
mojorisin
Déconnecté
echo ’16i[q]sa[ln0=aln100%Pln100/snlbx]sbA0D4D465452snlbxq’|dc
Bon voila, un bout de code et html et css. Étant donnée que je ne sais pas exactement le rendu que du souhaites j'ai repris plus ou moins ce que tu avais spécifié.

html
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
  5. <head>
  6. <title>
  7. Cofitem-Cofimur
  8. </title>
  9. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  10. <meta name="description" content="COFITEM-COFIMUR acquiert et développe des actifs immobiliers dont elle 
  11. propose la jouissance en location simple ou en crédit-bail." />
  12. <link title="style" type="text/css" rel="stylesheet" media="screen, projection" href="style.css" />
  13. </head>
  14.  
  15. <body>
  16. <div id="page">
  17.    <div id="header">
  18.       TITRE ICI
  19.    </div>
  20.    <div id="menu">
  21.       <ul class="smenu">
  22.          <li>menu</li>
  23.          <li>menu</li>
  24.          <li>menu</li>
  25.          <li>menu</li>
  26.          <li>menu</li>
  27.          <li>menu</li>
  28.          <li>menu</li>
  29.          <li>menu</li>
  30.          <li>menu</li>
  31.          <li>menu</li>
  32.       </ul>
  33.    </div>
  34.    <div id="content">
  35.       <div id="subTitle">
  36.          SOUS-TITRE ICI
  37.       </div>
  38.       <p><b>Carlinhos Brown</b></p>
  39.       <p> Le compositeur -percussionniste et activiste br&eacute;silien Carlinhos Brown est une figure immense au Br&eacute;sil.
  40. Cette force de la nature, ce natif de Salvador de Bahia aux &eacute;paules largescomme la plage d'Ipanema &agrave; Rio, est le fondateur du Timbalada.
  41. Souvent compar&eacute; aux l&eacute;gendes br&eacute;siliennes (Gilberto Gil, Sergio Mendes ou Caetano Veloso), Brown enregistre de nombreux disques, et dans des styles tr&egrave;s vari&eacute;s (on se souvient particuli&egrave;rement de "Alfagamabetizado" en 1997, ou de "Omelete Man", paru deux ans plus tard).
  42. Mr Brown (comme son homonyme d'Augusta, le soul Brother n&deg;1, l'&eacute;tait &agrave; l'&eacute;poque de sa gloire&hellip;) est un self made man, un fonceur, un boxeur, un boulimique.
  43. Dansant sur son empire, il est avant tout un fou de la percussion, un showman fascinant&hellip; Bref, Carlinhos Brown est une star !
  44. Le Br&eacute;silien est un artiste libre, enti&egrave;rement autonome. Il prend ainsi encharge la r&eacute;alisation compl&egrave;te (et la commercialisation) de tous ses albums, &agrave; travers son propre studio d'enregistrement (Ilha Dos Sapos, un 48 pistes digitales dernier cri install&eacute; &agrave; Candeal, dans son fief de San Salvador), son label de production et d'&eacute;dition (Candyall Music, dont le but avou&eacute; est de "pr&eacute;server et promouvoir la tradition afro-caboclo br&eacute;silienne"), son club (le Candyall Guetho Square, sorte de Shrine &agrave; la sauce san salvadorienne, fr&eacute;quent&eacute; aussi bien par le footballeur Romario que par ses fans ou Gilberto Gil, le ministre de la culture&hellip;).
  45. Paru en 2004, le dernier album de ce monstre sacr&eacute; s'intitule "Carlito Marron".
  46. Quelque part entre Fela l'africain et James Brown l'am&eacute;ricain, Carlinhos Brown est un leader. </p>
  47.       <p><strong>Bebel Gilberto</strong></p>
  48.       <p> Gr&acirc;ce &agrave; son doux alliage de n&eacute;o-bossa et d'&eacute;lectronique domestiqu&eacute;e, polic&eacute;e, le premier album de Bebel Gilberto ("Tanto Tempo", paru au printemps 2000 sur le label ind&eacute;pendant Ziriguiboom / Crammed Discs ) avait su capturer l'air du temps. Jusqu'&agrave; devenir un disque de r&eacute;f&eacute;rence des nouvellesmusiques du monde&hellip; Et un best-seller international : un million d'unit&eacute;s vendues dans le monde (dont 160.000 en France !) Sans doute &agrave; cause du pr&eacute;nom, Bebel. Les Fran&ccedil;ais y voyaient un remake de "L'Homme de Rio"&hellip;). Pour son deuxi&egrave;me album, qui sera suivi d'un album de remixes, la fille de Jo&atilde;o Gilberto a d&eacute;cid&eacute; d'&eacute;crireelle-m&ecirc;me la plupart de ses nouvelles chansons. L'enregistrement s'est d&eacute;roul&eacute; &agrave; Rio de Janeiro, Salvador de Bahia, Londres et New York. Bebel Gilberto y a invit&eacute; ses amis br&eacute;siliens (Carlinhos Brown, qu'elle pourra retrouver sur la sc&egrave;ne du Th&eacute;&acirc;tre antique, Jo&atilde;o Donato le ma&icirc;tre-percussionniste, Marcos Suzano&hellip;) et la grande chanteuse Mi&ugrave;cha (qui n'est autre que la m&egrave;re de Bebel).
  49. En concert, le soir, mont&eacute;e sur talons hauts, bella Bebel susurre ses chansons intimistes d'une voix qui exhale chaleur et magie.
  50. Comme le songe d'une nuit d'&eacute;t&eacute; tropical finement digitalis&eacute;, sans forro&hellip; </p>
  51.    </div>
  52. </div>
  53. </body></html>
  54.  


Et le css :

css
  1.  
  2. body {
  3. margin-bottom: 10px;
  4. margin-left: 50px;
  5. text-align: left;
  6. background-color: #FFFFFF;
  7. color: #000000;
  8. font: small 'Lucida Grande', Verdana, 'Bitstream Vera Sans', sans-serif;
  9. }
  10.  
  11. #page {
  12. width: 100%;
  13. height: 100%;
  14. margin-top: 10%;
  15. }
  16.  
  17. #header {
  18. padding-top: 10px;
  19. border-top: 3px solid #000000;
  20. border-bottom: 1px solid #000000;
  21. border-left: 1px solid #000000;
  22. border-right: 1px solid #000000;
  23. height: 60px;
  24. text-align: center;
  25. }
  26.  
  27. #menu {
  28. padding:0;
  29. border-left: 1px solid #000000;
  30. border-right: 1px solid #000000;
  31. border-bottom: 1px solid #000000;
  32. width: 199px;
  33. float: left;
  34. margin:0;
  35. }
  36. #content {
  37.    width:auto;
  38.    padding:10px;
  39.    margin:0;
  40.    margin-left:199px;
  41.    border-left: 1px solid #000;
  42.    border-right: 1px solid #000;
  43.    border-bottom: 1px solid #000;
  44. }
  45. #subTitle {
  46. padding:0;
  47. padding-top: 0px;
  48. padding-bottom: 8px;
  49. text-align: left;
  50. border-bottom: 1px solid #000000;
  51. margin:0;
  52. }
  53.  
  54. .smenu {
  55. list-style-type : square;
  56. list-style-position: outside;
  57. }
  58.  
L4_Hyr3
le 05/04/2005 à 23:39
L4_Hyr3
Déconnecté
epita promo 2009
super !
merci ;)
Isaac
le 06/05/2005 à 23:14
Isaac
Déconnecté
http://www.zmws.com
J'ai entendu parler de la sortie d'un IE 7 en Juillet. C'est vrai ? J'imagine qu'il utilisera toutes les fonctions css comme firefox.
Ca arrangerait tous le monde !!! smiley

++ smiley
mojorisin
le 07/05/2005 à 11:27
mojorisin
Déconnecté
echo ’16i[q]sa[ln0=aln100%Pln100/snlbx]sbA0D4D465452snlbxq’|dc
On ne sait pas s'il se conformera aux standard w3c car mircrosoft souhaite garder une compatibilité avec les anciennes versions de ie.
Donc, à mon avis, IE 7 risque d'être le même navigateur obsolète qu'actuellement avec peut être une interface un peu plus jolie :)
mobman02
le 17/05/2005 à 19:21
mobman02
Déconnecté
http://damienalexandre.fr/
Et bah j'ai exactement le meme PROBLEME !
Je me suis reelement cassé le cul a faire un site aux normes, XHTML-CSS et tous le tralala (une premiere pour moi qui suis un inconditionnel des table lol)

Et bah sur firefox, c'est SUPER CLEAN ! ^^
Sous IE 4 c'est zarbi mais ca peu aller,
et sous IE 6 c'est carrement NUL !

Je suis super super deg... Mon corps de page passe en dessous du menu ! C'est n'importe quoi, comme si IE connaissait pas sa droite et sa gauche... tu lui dit LEFT il fait BOTTOM ! mdr

Moi je suis trop degouté, et je me demande si mon site sera aux normes ou si je me remet aux tableaux...
mobman02
le 17/05/2005 à 19:46
mobman02
Déconnecté
http://damienalexandre.fr/
Bon voila je me suis calmer et j'ai engager ma guerre contre IE :D

Mais avant cela je vous refile les liens que j'ai trouver, c'est tres tres utile, mais ya de la lecture ! J'espere arriver a resoudre mes problemes:

Un super article tres bien concu sure alsacreation !
Tous les bug css referencé dans un tableau ! (enfin c'est pas des bug, c'est des incompatibilités... , maudit soit les navigateurs qui se foutent des normes... RRrrr
Répondre
Accès rapide :

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Php - Breizh Blog