[css] problème de padding sous firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [css] problème de padding sous firefox

nabbo

: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 :

.bandeau_top {
BACKGROUND: url(../images/haut.jpg) no-repeat;
WIDTH: 975px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
HEIGHT: 33px;
padding-left: 30px;
}
.contenu {
BACKGROUND: url(../images/centre.jpg);
WIDTH: 975px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
padding-left: 30px;
}
.bottom {
BACKGROUND: url(../images/vincent_bas.jpg) no-repeat;
WIDTH: 975px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
HEIGHT: 32px;
padding-left: 30px;
}

Partie HTML :

Code :

<DIV class=bandeau_top></DIV>
<DIV class=contenu>salut !!</DIV>
<DIV class=bottom></DIV>

Publicité

papanoramix

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

nabbo

nan ca ne marche pas.

en plus ca merde encore plus si on imbrique des boucles (<p>salut<p>ca va ?</p></p> )

xtof_83

Freeride Spirit

<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:

nabbo

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

:jap:

gatsu35

Blablaté par Harko

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

nabbo

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

nabbo

okay ca marche (la deuxième solution)

mais est-ce que c'est "propre" ?

est-ce que ca va perdurer (par ex sous ie7) ?

xtof_83

Freeride Spirit

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***

nabbo

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 _ ?

Publicité

xtof_83

Freeride Spirit

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...

gatsu35

Blablaté par Harko

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 :

width:935px;
_width:975px;

IE voit :

Code :

width:935px;
width:975px;

et firefox voit :

Code :

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 :

<!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

nabbo

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

nabbo

okay

c'est assez clair

merci pour votre aide

:jap:

FORUM HardWare.fr

Programmation

HTML/CSS

[css] problème de padding sous firefox

Sujets relatifs
[RESOLU] Problème avec un IF imbriqué dans une boucle FOR	Problème avec l'installation d'un wiki
[HTML] Problème de tableaux avec internet explorer	[GLUT] Probleme avec boucle while
PRoblème de cookie	probleme de pointeur
[CSS] problème de mise en page à l'impression	[PHP] Probleme droit écriture
Probleme de date avec php (antidatage ?)	probleme avec setColor() // applet
Plus de sujets relatifs à : [css] problème de padding sous firefox

Page générée en 0.041 secondes