[css] problème de padding sous firefox

problème de padding sous firefox [css] - HTML/CSS - Programmation

Marsh Posté le 15-12-2005 à 13:44:19    

:hello:
 
J'ai un problème d'affichage sous firefox. Je veux faire un bloc avec une image en haut et en bas et un fond entre les deux. Jusque là tout va bienmon bloc s'affiche correctement sous firefox et ie.
 
Mais dans ce bloc, je veux décaler le texte pour qu'il ne colle plus au coté gauche.
Donc je mets un "padding-left:30px;" dans mon css.
 
Ie l'interprète bien, mais pas firefox qui me décale une image à droite de mon bloc.
 
J'ai également essayé de décaler mon texte avec un paragraphe <p></p>, mais le résultat est le même.
 
Est ce que quelqu'un put m'indiquer ce qui ne va pas ?
 
Merci :jap:
 
Ci dessous le code de mon truc
 
 
 
Partie CSS :

Code :
  1. .bandeau_top {
  2. BACKGROUND: url(../images/haut.jpg) no-repeat;
  3. WIDTH: 975px;
  4. MARGIN-LEFT: auto;
  5. MARGIN-RIGHT: auto;
  6. HEIGHT: 33px;
  7. padding-left: 30px;
  8. }
  10. .contenu {
  11. BACKGROUND: url(../images/centre.jpg);
  12. WIDTH: 975px;
  13. MARGIN-LEFT: auto;
  14. MARGIN-RIGHT: auto;
  15. padding-left: 30px;
  16. }
  18. .bottom {
  19. BACKGROUND: url(../images/vincent_bas.jpg) no-repeat;
  20. WIDTH: 975px;
  21. MARGIN-LEFT: auto;
  22. MARGIN-RIGHT: auto;
  23. HEIGHT: 32px;
  24. padding-left: 30px;
  25. }


 
Partie HTML :

Code :
  1. <DIV class=bandeau_top></DIV>
  2. <DIV class=contenu>salut !!</DIV>
  3. <DIV class=bottom></DIV>


 

Reply

Marsh Posté le 15-12-2005 à 13:44:19   

Reply

Marsh Posté le 15-12-2005 à 13:47:40    

il faut que tu mettes ton textes dans les balises qui sont faites expres: <p> par exemple.
Et ensuite tu appliques ton padding-left sur le p, pas sur le div
 
p {
padding-left: 30px;
}
 
je pense que ça devrait fonctionner

Reply

Marsh Posté le 15-12-2005 à 13:58:55    

nan ca ne marche pas.
 
en plus ca merde encore plus si on imbrique des boucles (<p>salut<p>ca va ?</p></p> )

Reply

Marsh Posté le 15-12-2005 à 14:02:23    

<p>salut<p>ca va ?</p></p>
 
Mord de rire...tu comprends vraiment ce que tu ecris là ou bien tu fais vraiment n'importe quoi :lol:

Reply

Marsh Posté le 15-12-2005 à 14:15:05    

c'est du code pas beau mais ca arrive avec des rich text genre htmlarea ou tinymce
 
:jap:

Reply

Marsh Posté le 15-12-2005 à 14:18:53    

tu fais fasse au box model microsoft.
 
et au box model W3C géré par FF.
 
quand tu fais padding-left :30px.
pour FF ton bloc ne fait plus 975px mais 975+30 = 1005 px
donc soit tu fous un doctype correct
soit tu te debrouille avec un hackIE pour reduire la taille du bloc :  
 
width:945px; pour FF
_width:975px; pour ie
padding-left:30px;

Message cité 1 fois
Reply

Marsh Posté le 15-12-2005 à 14:23:37    

gatsu35 a écrit :


donc soit tu fous un doctype correct


 
c'est à dire ?
 
 

gatsu35 a écrit :


soit tu te debrouille avec un hackIE pour reduire la taille du bloc :  
width:945px; pour FF
_width:975px; pour ie
padding-left:30px;


 
je mets ca dans mon css ?
(ie va comprendre _width:975px et pas firefox ?)

Message cité 1 fois
Reply

Marsh Posté le 15-12-2005 à 14:28:55    

okay ca marche (la deuxième solution)
 
mais est-ce que c'est "propre" ?
 
est-ce que ca va perdurer (par ex sous ie7) ?

Reply

Marsh Posté le 15-12-2005 à 14:31:48    

nabbo a écrit :

c'est à dire ?
 
 
je mets ca dans mon css ?
(ie va comprendre _width:975px et pas firefox ?)


 
 
la phrase bizarre au début des pages:
exemple possible:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
Mais beaucoup d'autre peuvent être mis :http://www.quirksmode.org/css/quirksmode.html#top
 
_width:975px c'est une astuce..pour dire IE Tu vas me prendre ce paramétres et non pas l'autre...pour pas me faire Ch***

Reply

Marsh Posté le 15-12-2005 à 14:37:24    

mon doctype est <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
par défaut sous nvu
 
le _ a la priorité sur le *rien* ?
 
si je mets _font-size ca a priorité sur *rien*font-size ?
et firefox ignore le _ ?

Reply

Marsh Posté le 15-12-2005 à 14:37:24   

Reply

Marsh Posté le 15-12-2005 à 14:41:08    

Oki pour ce doctype...
 
 
Non _ est connu que par IE
FF s'en fout de chez s en fout
 
_ c'est que pour que IE est une autre propriété et quil face pas que des bugs...

Reply

Marsh Posté le 15-12-2005 à 14:44:05    

le _ n'a po de priorité, la règles est :  
la dernière propriété entrée est celle qui sera utilisée.
 
quand tu fais :  

Code :
  1. width:935px;
  2. _width:975px;


 
IE voit :  

Code :
  1. width:935px;
  2. width:975px;


 
et firefox voit :

Code :
  1. width:935px;


 
donc tu peux en déduire tout de suite que on réécrit la valeur pour IE dans certains cas.
 
le doctype qui evite d'utiliser ce genre de hackCSS dans ton cas sera celui-ci :  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


 
en lui indiquand une URI le navigateur la télécharger et la suit pas à pas, quand tu lui indique juste un doctype sans URI le navigateur va utiliser sa propre DTD

Reply

Marsh Posté le 15-12-2005 à 14:46:32    

donc si je fais  
width:945px;
_width:975px;
 
ie comprend :  
1. width=945
2. ah bah nan finalement width=975
 
et ff comprend :
1. width=945
2. moi pas comprendre (=s'en fout de chez s'en fout)
 
et donc si je mets  
_width:975px;
width:945px;
 
 
ca va pas marcher... ?
 
 
(edit : grilled...)


Message édité par nabbo le 15-12-2005 à 14:47:34
Reply

Marsh Posté le 15-12-2005 à 14:54:58    

okay
 
c'est assez clair
 
merci pour votre aide
 
:jap:

Reply

Sujets relatifs:

Leave a Replay

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