IE / Firefox et padding

Version imprimable

04/07/2009, 22h08
wnx83

IE / Firefox et padding
Bonjour, j'ai un souci qui d'apres moi ne doit pas etre bien important, sinon le css ne serai pas aussi populaire.
Code:

1 2 3 4 5 6 7 8 9 div#contenu { padding-left: 5px; padding-right: 5px; text-align:left; background-image: url(images/contenu.png); width: 800px; height: 500px; }
Sur Internet explorer = Nikel
Sur Seamonkey = decalage, l'image de fond es prolonger hors de mon div

Maintenant en faisant ca :
Code:

1 2 3 4 5 6 7 8 9 div#contenu { padding-left: 5px; padding-right: 5px; text-align:left; background-image: url(images/contenu.png); width: 790px; height: 500px; }
Sur Internet explorer = decalage, l'image de fond n'es plus assez longue et ne couvre plus mon div
Sur Seamonkey = Nikel

Comment puis-je a partir de la trouver une solution pour ne pas que mon texte soi pris sur le bord de l'image de fond du div ?

Merci d'avance a qui sera m'aiguiller vers une solution (en esperant qu'elle existe lol)
04/07/2009, 23h44
emie7
Salut,

Parfois les dimensions diffèrent et du coup on aura pas le même résultat dans les 2 navigateurs.

Pour avoir le même résultat il faut ajouter un autre fichier css spécial IE et modifier juste les blocs concernés (ajouter, ou retrancher quelques pixels ...)

Pour cela il faut ajouter le code suivant dans la balise head
Code:

1 2 3 
05/07/2009, 10h01
wnx83

Un grand merci a toi emie7 :ccool:
05/07/2009, 14h38
Candygirl

Citation:

Envoyé par emie7

Parfois les dimensions diffèrent et du coup on aura pas le même résultat dans les 2 navigateurs.

Pour avoir le même résultat il faut ajouter un autre fichier css spécial IE et modifier juste les blocs concernés (ajouter, ou retrancher quelques pixels ...)

La plus part du temps il existe une explication logique aux différences observées entre navigateurs, que cela provienne d'interprétation différente ou d'un bug. Crèer un css spécifique pour un navigateur particulier ne devrait intervenir qu'en dernier recours ;)

Ici on se trouve visiblement confronté au modèle de boîte Microsoft (le padding est compris dans le width) ce qui signifie qu'internet explorer interprète la page en mode quirks.

wnx83, as-tu bien déclaré un doctype correcte et complet tout en haut de tes pages ? Spécifier le docytpe fera passer IE6+ en mode presque standard et ton problème de dimension devrait être résolu.
05/07/2009, 15h46
emie7

Citation:

Envoyé par Candygirl

La plus part du temps il existe une explication logique aux différences observées entre navigateurs, que cela provienne d'interprétation différente ou d'un bug. Crèer un css spécifique pour un navigateur particulier ne devrait intervenir qu'en dernier recours ;)

Ici on se trouve visiblement confronté au modèle de boîte Microsoft (le padding est compris dans le width) ce qui signifie qu'internet explorer interprète la page en mode quirks.

wnx83, as-tu bien déclaré un doctype correcte et complet tout en haut de tes pages ? Spécifier le docytpe fera passer IE6+ en mode presque standard et ton problème de dimension devrait être résolu.

Bonjour,

Je suis d'accord avec toi mais l'inclusion d'un autre fichier (css spécial IE) ne contrari pas les normes. On l'utilise aussi pour filtrer les images PNG transparentes dans IE. Et cette solution est utilisée pas les grandes sociétés de développement web :).
05/07/2009, 22h16
wnx83

Merci a vous deux, pour être franc CandyGirl j'ai carrément oublier de déclarer mon doctype :oops:

Sinon ta solution Emie7, fonctionne a merveille :ccool:

Une petite question qui me vient, étant donner que tu as parler de gif :
J'utilise en en fond de mon div bannière un Png (meilleure qualité a mon gout) donc l'angle supérieur gauche es arrondi.

Je me suis rendu compte que sur firefox (j'utilise seamonkey pour être exact) mon arrondi apparaissait parfaitement, alors que sous IE celui-ci ce retrouve rempli de blanc pour former un angle droit qui vient compléter la partie invisible (plus tant que ça finalement lol).

En changeant pour un .gif ça fonctionne correctement, ma question existe t'il une solution pour que mon png s'affiche correctement ou suis-je obliger de passer par le format Gif :( ?

Dernière question qui n'as rien a voir, CandyGirl a tout hazard tu ne joue ou jouer pas a Wolfensetein enemy teritory ? :?
05/07/2009, 23h09
Candygirl

Citation:

Envoyé par emie7

Je suis d'accord avec toi mais l'inclusion d'un autre fichier (css spécial IE) ne contrari pas les normes. [...] Et cette solution est utilisée pas les grandes sociétés de développement web :).

Oui les commentaires conditionnels sont le moyen le plus propre de le faire quand il est vraiment nécessaire (genre la gestion des png sur IE6). Mais maintenir 2css différents est lourd à gérer plutôt qu'un seul, par exemple dans le cadre de modifications futures. Donc ici, rajouter simplement un doctype approprié me semble plus judicieux ;)

Citation:

Envoyé par wnx83

J'utilise en en fond de mon div bannière un Png (meilleure qualité a mon gout) donc l'angle supérieur gauche es arrondi.

A moins que ton image n'ait plus de 256 couleurs il n'y a aucune raison que le gif, correctement compressé, soit de moins bonne qualité. Ou alors nécessites-tu la transparence progressive à cause d'un fond changeant?

Citation:

Envoyé par wnx83

En changeant pour un .gif ça fonctionne correctement, ma question existe t'il une solution pour que mon png s'affiche correctement ou suis-je obliger de passer par le format Gif :( ?

IE6 ne gère que la couche alpha. Cela peut être corrigé par l'utilisation d'un filtre mais selon le cas de figure cela peut de révéler problématique (l'image de fond ne peut pas se répéter ni être positionnée).

Citation:

Envoyé par wnx83

Dernière question qui n'as rien a voir, CandyGirl a tout hazard tu ne joue ou jouer pas a Wolfensetein enemy teritory ? :?

Non, j'ai joué un max à Starcraft et je nolife sur wow; c'est déjà suffisant :aie:
05/07/2009, 23h22
emie7
Citation:

Envoyé par wnx83

Merci a vous deux, pour être franc CandyGirl j'ai carrément oublier de déclarer mon doctype :oops:

Sinon ta solution Emie7, fonctionne a merveille :ccool:

Une petite question qui me vient, étant donner que tu as parler de gif :
J'utilise en en fond de mon div bannière un Png (meilleure qualité a mon gout) donc l'angle supérieur gauche es arrondi.

Je me suis rendu compte que sur firefox (j'utilise seamonkey pour être exact) mon arrondi apparaissait parfaitement, alors que sous IE celui-ci ce retrouve rempli de blanc pour former un angle droit qui vient compléter la partie invisible (plus tant que ça finalement lol).

En changeant pour un .gif ça fonctionne correctement, ma question existe t'il une solution pour que mon png s'affiche correctement ou suis-je obliger de passer par le format Gif :( ?

Dernière question qui n'as rien a voir, CandyGirl a tout hazard tu ne joue ou jouer pas a Wolfensetein enemy teritory ? :?

reSalut wnx83,

Je voulais dire PNG c'est corrigé maintenant lol.

Tout à fait les Images PNG qui contiennent des parties transparentes ne s'affichent pas correctement dans IE (les partie transparnetes s'affichent en bleu ou en banc).

Pour résoudre le problème tu dois filtrer l'image.

Dans ton fichier css de IE tu désactive l'image puis tu applique le filtre comme suit:
Code:

1 2 3 4 5 6 7 #idLogo img { display: none; } #idLogo { display: block; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo_Meditel.png', sizingMethod='crop'); }
06/07/2009, 00h50
Macmillenium

Bonsoir,

Étant donné que IE6 gère correctement la transparence sous le format VML, une librairie a été développé pour convertir les PNG en VML d'une manière transparente : http://www.dillerdesign.com/experiment/DD_belatedPNG/

Citation:

Envoyé par emie7

(les partie transparnetes s'affichent en bleu ou en banc).

En gris.