Mes soucis CSS (entre IE6 et Firefox 1.5) ...

Mes soucis CSS (entre IE6 et Firefox 1.5) ... - Web design - Graphisme

Marsh Posté le 15-12-2005 à 15:59:01    

[edit] J'ai changé le titre car je sens que je vais avoir d'autres questions.  
J'ajouterais les réponses à la fin du premier post pour ceux qui auraient le même souci ...[/edit]
 
Bonjour,
 
Je suis en train de me coltiner à CSS pour la première fois de ma vie afin de créer mon site photo.
 
Je travaille avec PSPad (j'aime pas Dreamweaver) ...
 
Et j'ai un probléme de comprehension  :sweat:  
 
Mon fichier CSS :  
 

Code :
  1. /***********************************
  2. ------- Mise en page generale ------
  3. ***********************************/
  4. body
  5. {
  6. font-family: verdana, helvetica, sans-serif;
  7. font-size: 10pt;
  8. background-color: #7f7f7f;
  9. }
  10. a img
  11. {
  12. border: none;
  13. }
  14. a
  15. {
  16. font-family: verdana, helvetica, sans-serif;
  17. font-size: 10pt;
  18. text-decoration: none;
  19. color: #000000;
  20. }
  21. h1
  22. {
  23.   font-family: verdana, helvetica, sans-serif;
  24.   font-size: 20pt;
  25.   text-decoration: underline;
  26.   color: #CCCCCC;
  27.   }
  28. h2
  29. {
  30.   font-family: verdana, helvetica;
  31.   font-size: 12pt;
  32.   text-decoration: none;
  33.   color: #CCCCCC;
  34.   }
  35. /***********************************
  36. Titre + photos + contacts
  37. ***********************************/
  38. #banniere
  39. {
  40. width: 780px;
  41. margin-left: auto;
  42. margin-right: auto;
  43. margin-top:20px;
  44. padding: 0px;
  45. background-color: #4CADD4;
  46. }
  47. /***********************************
  48. Menu (liens)
  49. ***********************************/
  50. #menu
  51. {
  52. width: 780px;
  53. margin-left: auto;
  54. margin-right: auto;
  55. margin-top: 0px;
  56. padding: 0px;
  57. background-color: #FFFFFF;
  58. }
  59. /***********************************
  60. ------------- Main ---------------
  61. Contient le texte ou le swf.
  62. ***********************************/
  63. #main
  64. {
  65. margin-left: auto;
  66. margin-right: auto;
  67. margin-top: 0px;
  68.   width: 780px;
  69.   padding: 0px;
  70.   background-color: #F0E6FF;
  71. }
  72. /************
  73. bas
  74. *******/
  75. #copyright
  76. {
  77. margin-left: auto;
  78. margin-right: auto;
  79. margin-top: 0px;
  80.   width: 770px;
  81.   height: 30px;
  82.   padding: 5px;
  83.   text-align: center;
  84.   background-color: #BA0000;
  85. }


 
Mon fichier html :  
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.   <title>Test CSS</title>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.   <link rel="stylesheet" type="text/css" href="test.css" />
  8. </head>
  9. <body>
  10.   <div id="banniere">
  11.      <h1> Carnets Photographiques </h1>
  12.      <p> titre </p>
  13.      <p> titre 2 </p>
  14.   </div>
  15.   <div id="menu">
  16.       <p>lien1 lien2 lien3</p>
  17.   </div>
  18.   <div id="main">
  19.      <h1>Mon site web</h1>
  20.      <h2>Test site photo en CSS</h2>
  21.    <a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Cras leo nibh, aliquet nec, interdum et, consequat sed, nulla. Praesent nec quam quis augue auctor pulvinar. Nunc vehicula wisi et mi. Quisque ultricies volutpat metus. Nulla eu erat sed mauris euismod tempor. Aliquam sit amet quam vitae massa dignissim fringilla. Nam pharetra lobortis velit. Donec scelerisque, nisl a molestie vulputate, urna lectus rhoncus ante, in congue lacus erat ac urna. Duis quam. Phasellus diam eros, ullamcorper dictum, lacinia in, accumsan vel, felis. Ut at sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</a>
  22.       </div>
  23.  
  24.   <div id="copyright">
  25.      <a> copyright yannick-photo.info ® </a>
  26.   </div>
  27. </body>
  28. </html>


 
Et j'ai deux version differentes sous IE6 et Mozilla Firefox1.5 ...
 
IE6 :  
 
http://lord.behemoth.free.fr/junk/ScreenShot016.jpg
 
Mozilla :
 
http://lord.behemoth.free.fr/junk/ScreenShot015.jpg
 
Moi je voudrais que tout soit collé comme sur IE6 !
 
Je sais que c'est un problème de margin mais je ne sais pas pouquoi ...
 
( j'ai testé avec en début de feuille un * { margin= 0; } ).
 
Un p'tit coup de main pour un p'tit gars qui apprend  [:angelfire]  
 
A vot'bon coeur  [:zul]
 
Questions/Réponses :
 
Q: Dans Firefox 1.5, mes conteneurs DIV sont espacés et pas dans IE6
R: Penser à passer le margin à 0px pour * et/ou aussi le padding afin de tester lequel est en cause.
Ici, il fallait passer le margin à 0px pour <p> et pour H1  [:razorbak83]


Message édité par DannyElfman le 16-12-2005 à 10:20:30

---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 15-12-2005 à 15:59:01   

Reply

Marsh Posté le 15-12-2005 à 16:31:49    

slt :)
 
j' ai pas regardé beaucoup ton code mais a mon avis c' est tes <p> qui decallent sout ff, essaye le margin/padding 0 pour cette balise ;)


---------------
http://www.videos-nouvelle-star.fr/ : les meilleures vidéos de la nouvelle star 2007 à télécharger en haute qualité
Reply

Marsh Posté le 15-12-2005 à 16:46:37    

Merci d'avoir jeté un coup d'oeil  [:obawi]  
 
J'ai déjà tous mes padding à 0px.
 
Ce qui est bizarre, c'est que entre mon "main" et mon "copyright" (en bas de page), je n'ai pas de probleme.
Et pourtant, j'ai le même paramétrage que entre mon "banniere" , "menu", et "main"  [:razorbak83]  
 
Je vais jouer avec les margin ... mais je n'aime pas jouer avec quelque chose que je ne comprends pas  [:minusplus]


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 15-12-2005 à 16:54:27    

Oui je dirais la même chose, le padding à 0 sur les <p> ^^
D'autant plus que je ne vois pas de classe pour les p dans ta css. ;)


---------------
RPGamers, la passion du RPG : http://www.rpgamers.fr
Reply

Marsh Posté le 15-12-2005 à 21:31:42    

J'ai essayé avec le padding à zéro sur les <p> et pas mieux  :(  
 
Mais en revanche, c'est bizarre, je viens d'essayer sur un autre PC avec Firefox 1.07 et c'est impeccable  :ouch:


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 15-12-2005 à 21:56:35    

Y'a pas que le padding dans la vie, y'a aussi le margin. :D

Reply

Marsh Posté le 15-12-2005 à 23:19:25    

The-Shadow a écrit :

Y'a pas que le padding dans la vie, y'a aussi le margin. :D


 
Oui je sais, quand je défini : * { margin=0; } , ça a l'air de fonctionner. Mais je n'arrive pas à trouver sur quelle balise est l'erreur ...


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 15-12-2005 à 23:30:31    

Reply

Marsh Posté le 16-12-2005 à 08:33:42    


 
Euh, là, je ne suis plus  :pt1cable:  
 
Pouvez-repetez la question  :sweat:  


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 16-12-2005 à 09:20:02    

H1 H2 H3 H4 H5 H6

Reply

Marsh Posté le 16-12-2005 à 09:20:02   

Reply

Marsh Posté le 16-12-2005 à 09:35:54    

gatsu35 a écrit :

H1 H2 H3 H4 H5 H6


 
oops  [:angelfire]  
 
Ok, vais voir ça.
 
Sinon, je confirme. j'ai le problème sur Firefox 1.5 et pas 1.07  :??:


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 16-12-2005 à 09:49:43    

Bon, rectification, quand je défini le margin à 0px pour <p>, j'ai mon DIV menu qui est de nouveau collé contre DIV banniere.
Mais toujours un vide entre menu et main  :(


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 16-12-2005 à 09:52:25    


 
Rahhh, c'était ça  :ouch:  
 
h1
{
  font-family: verdana, helvetica, sans-serif;
  font-size: 20pt;
  text-decoration: underline;
  color: #CCCCCC;
  margin: 0;
  }
 
Merci  [:mulder]  
 
Je garde le post ouvert car je suis sur que je vais avoir plein d'autres questions  [:minusplus]  
 
ps : pourtant, mon livre de chevet, c'est ça : http://www.w3schools.com/


Message édité par DannyElfman le 16-12-2005 à 09:52:50

---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 16-12-2005 à 09:58:42    

ton livre de chevet devrait être :  
CSS2 pratique du WebDesign
 
http://www.alsacreations.com/livre/

Reply

Marsh Posté le 16-12-2005 à 10:15:42    

gatsu35 a écrit :

ton livre de chevet devrait être :  
CSS2 pratique du WebDesign
 
http://www.alsacreations.com/livre/


 
Oui mais autant partir direct avec la norme : http://www.w3.org/TR/CSS21/
 
D'autant que acheter un bouquin si c'est pour faire un seul site  [:razorbak83]  (même si je prefere mille fois une version papier, rien que pour les paegs cornées, les annotations ...)
 
 
Dites-moi :  
 
Les attributs du type  border-top: solid double #666666;
Ca marche avec IE6 mais je ne les vois pas avec Firefox 1.5 ....
 
Je vais chercher voir pourquoi mais si quelqu'un à une idée (c'est le même code que ci-dessus mais avec ces properties ajoutés à chaque conteneur.


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 16-12-2005 à 10:40:37    

C'est juste "double" et pas "solid double", pis t'as pas mis la taille de la border :spamafote:
 
border-top: 3px double #666666;
 
et t'auras bien une bordure double

Reply

Marsh Posté le 16-12-2005 à 14:01:07    

Danamir_ a écrit :

C'est juste "double" et pas "solid double", pis t'as pas mis la taille de la border :spamafote:
 
border-top: 3px double #666666;
 
et t'auras bien une bordure double


 
Merci  :)  
 
Mea culpa pour le "solid double", j'ai vraiment lu trop vite  [:angelfire]  
 
En revanche, c'est IE qui m'a enduit d'erreur car je voyais la bordure quand même ....
 
Sinon, la taille n'est pas obligatoire apparemment (enfin, si celle par défaut te convient).
 
Merci  :jap:  


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 16-12-2005 à 14:04:01    

Attention aux bordures sans taille, comme je l'ai souligné sur le forum prog, si on ne précise pas, par exemple, de border sur une image en lien, Opera ne met pas de bordure.
Bref, à préciser au cas où.

Reply

Marsh Posté le 16-12-2005 à 14:06:43    

Oui puis quand il n'y a pas de taille, c'est le navigateur qui décide ce qu'il met par défaut, et ils ne font pas tous la même chose :D Donc vaut mieux être trop précis que pas assez :/

Reply

Marsh Posté le 17-12-2005 à 16:16:39    

Danamir_ a écrit :

Oui puis quand il n'y a pas de taille, c'est le navigateur qui décide ce qu'il met par défaut, et ils ne font pas tous la même chose :D Donc vaut mieux être trop précis que pas assez :/


 
C'est ce que je suis en train de comprendre après des centaines d'essais :lol:
 
merci en tout cas pour les infos, je continue mon p'tit bonhomme de chemin  [:obawi]


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 19-12-2005 à 09:50:00    

dès que tu commences une feuille de style et pour ne pas être emmerdé par les espacement incongrus entre les éléments
tu vires toutes les marges (padding et margins) de tous les éléments, dans ta feuille de style
et si besoin tu redéfini les marges au cas par cas.
 
* {margin:0; padding:0}

Reply

Marsh Posté le 19-12-2005 à 12:16:32    

Une idée qu'elle est bien [:huit]

Reply

Marsh Posté le 19-12-2005 à 19:03:13    

Danamir_ a écrit :

Une idée qu'elle est bien [:huit]


 [:mehjret] (drapal masqué)


Message édité par Banane masquee le 19-12-2005 à 19:03:29
Reply

Marsh Posté le 20-12-2005 à 10:43:09    

gatsu35 a écrit :

dès que tu commences une feuille de style et pour ne pas être emmerdé par les espacement incongrus entre les éléments
tu vires toutes les marges (padding et margins) de tous les éléments, dans ta feuille de style
et si besoin tu redéfini les marges au cas par cas.
 
* {margin:0; padding:0}


 
Merci  :)  
 
C'est ce que j'ai fini par faire pour identifier les elements sources de problèmes.


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 22-12-2005 à 19:14:23    

Un nouveau souci !
 
(j'avance à petit pas mais j'avance).
 
Je ne comprends pas le comportement de ma balise hr !
 
Sous IE6, elle apparait nickel et pas sous Firefox 1.5
 
Dans mon CSS :  
 

Code :
  1. hr
  2. {
  3. color: #666666;
  4. background-color: #666666;
  5. height: 1px;
  6. border: 0;
  7. }


 
Dans mon html :  
 

Code :
  1. <div id="main">
  2. <hr />
  3. <br />
  4. <br />
  5.      <h2> Introduction </h2>
  6. blablabla ...


 
Question : pourquoi tant de haine  [:minusplus]  
 
Je pensais à un probleme de couleur mais même quand je la passe en rouge pétant pour être sur de la voir ... rien  :sweat:  
 
( un exemple concret ici http://yannick-photo.info/main/portfolio.html , à voir sous Firefow1.5 et IE6).
 
Merci de vos lumières car je viens de me faire une heure de recherche et rien ... je dois être neuneu   :cry:


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le 23-12-2005 à 11:56:29    

La balise HR est une vraie m*rde à modifier et c'est quasiment impossible d'obtenir un résultat identique sous IE et Fx.
Essayes plutot avec des border-bottom dans le style de tes paragraphes quand nécessaire.

Reply

Marsh Posté le 04-01-2006 à 14:15:29    

The-Shadow a écrit :

La balise HR est une vraie m*rde à modifier et c'est quasiment impossible d'obtenir un résultat identique sous IE et Fx.
Essayes plutot avec des border-bottom dans le style de tes paragraphes quand nécessaire.


 
Ok, je vais essayer (dès que j'ai le temps de m'y remettre).
 
Merci pour l'info  :jap:  


---------------
Blood is rushing into your muscles and that's what we call The Pump. Your muscles get a really tight feeling, like your skin is going to explode any minute ...
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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