Bonjour, j'ai découvert un problème étrange qui ne semble toucher que Firefox.
Sur Radio86, j'ai des boîtes transparentes sur le côté droit qui sont créées par deux <div> et un <p>
Pour ceux qui se demandent pourquoi j'utilise des <div> vides avec des images de fond plutôt que des <img>, c'est pour pouvoir avoir des png transparentes sous IE sans avoir à utiliser de javascript, j'ai un style spécial pou IE grâce aux commentaires conditionnel qui « efface » l'image de fond d'origine et la remplace par un filtre Alpha loader propre à IE. Mais là n'est pas le problème car sous IE tout est parfait.
Le problème est seulement avec Firefox, sous Win et Mac (et probablement Linux)
Si vous vous rendez sur la page, les boîtes devraient apparaître correctement, mais faite un zoom moins ou plus (ça dépend de la plateforme) et vous devrez voir apparaître un ligne entre le contenu et l'image du bas.
Après de nombreux test, je me suis rendu compte qu'en fonction de la hauteur du <p> sa dernière ligne (en terme de pixel) se superpose avec la première du div suivant, il en résulte que le png du <p> produit un effet de transparence non plus sur le fond de la colonne mais sur l'image de fond du <div bas! C'est encore plus flagrant en appliquant un bord de couleur rouge d'un pixel au <div> du bas, on voit nettement à certaines tailles l'effet de transparence.
Comme ce phénomène est lié à la taille du <p> j'ai corrigé le défaut pour la taille de base en modifiant son line-height, malheureusement lorsque l'on change le texte, avec plus ou moins de ligne, le problème peut mystérieusement réapparaître, comme lorsque l'on zoom : Un véritable casse-tête!
J'ai testé avec plusieurs tailles de png, de 1 pixel de hauteur a plus, paire et impaire et rien à faire.
Toute les pseudo solutions que je trouve cassent pour certaine taille, il est donc obligatoire de réadapter à chaque fois.
Une idée avant que je soumette le problème aux développeurs?
Sur Radio86, j'ai des boîtes transparentes sur le côté droit qui sont créées par deux <div> et un <p>
<div class="image haut"></div>
<p class="contenu"></p>
<div class="image bas"></div>
Pour ceux qui se demandent pourquoi j'utilise des <div> vides avec des images de fond plutôt que des <img>, c'est pour pouvoir avoir des png transparentes sous IE sans avoir à utiliser de javascript, j'ai un style spécial pou IE grâce aux commentaires conditionnel qui « efface » l'image de fond d'origine et la remplace par un filtre Alpha loader propre à IE. Mais là n'est pas le problème car sous IE tout est parfait.
Le problème est seulement avec Firefox, sous Win et Mac (et probablement Linux)
Si vous vous rendez sur la page, les boîtes devraient apparaître correctement, mais faite un zoom moins ou plus (ça dépend de la plateforme) et vous devrez voir apparaître un ligne entre le contenu et l'image du bas.
Après de nombreux test, je me suis rendu compte qu'en fonction de la hauteur du <p> sa dernière ligne (en terme de pixel) se superpose avec la première du div suivant, il en résulte que le png du <p> produit un effet de transparence non plus sur le fond de la colonne mais sur l'image de fond du <div bas! C'est encore plus flagrant en appliquant un bord de couleur rouge d'un pixel au <div> du bas, on voit nettement à certaines tailles l'effet de transparence.
Comme ce phénomène est lié à la taille du <p> j'ai corrigé le défaut pour la taille de base en modifiant son line-height, malheureusement lorsque l'on change le texte, avec plus ou moins de ligne, le problème peut mystérieusement réapparaître, comme lorsque l'on zoom : Un véritable casse-tête!
J'ai testé avec plusieurs tailles de png, de 1 pixel de hauteur a plus, paire et impaire et rien à faire.
Toute les pseudo solutions que je trouve cassent pour certaine taille, il est donc obligatoire de réadapter à chaque fois.
Une idée avant que je soumette le problème aux développeurs?
Modifié par matgorb (01 Dec 2005 - 13:11)