28173 sujets

CSS et mise en forme, CSS3

Bonjour
Alors voila un bug bien vilain !

J'ai un bloc (div) dans lequel j'ai une image (qui a une proprité float:left. Jusque la ok. ). Je me un background color au bloc. Et paf l'image disparait comme si la couleur de fond passait par dessus !! Y'a t il un moyen de resoudre cela ? Evidemment ca marche tres bien dans Firefox.
Merci


<div id="breakingNews">
<img src="/img/home/050831_resultat.gif" alt=""/>
<div class="pressPresentationBloc">
<h2>Test</h2>....
</div>


et la css


#breakingNews{
background-color:#ebf8ff;
}

 #breakingNews img{
float:left;
}


Quand j'enleve la propriété float a l'image c'est bon elle apparait..des que je la remet..elle disparait !!

<div id="breakingNews">
<img src="/img/home/050831_resultat.gif" alt=""/>
<div class="pressPresentationBloc">
<h2>Test</h2>....
</div>
[b]</div>[/b]


N'aurais-tu pas oublier de fermer ta div d'id breakingNews ?
Non non c'est bon c'est parceque j'avais pas tout mis enfait le bloc entier est comme ca :


<div id="breakingNews">
<img src="/img/home/050831_resultat.gif" alt=""/>

<div class="pressPresentationBloc">
<h2>Test</h2>
</div>

<span class="spacerBoth"> </span>
</div>
C'est Explorer qui te pose problème?
Prends l'habitude de rajouter un espace entre le nom de l'élément que tu cibles et l'ouverture de l'accolade qui le suit:
#breakingNews {

background-color:#ebf8ff;

}
Oui 'est explorer qui veut rien savoir !
C'est vraiment un bug ultramystique ! Comme si l'image passait sous la couleur donnée par le background ! j'ai tt essayé z index, div dans div, meetre une image en fond a la place d'une couleur mais rien n'y fait Smiley ohwell j'vais etre obligé de passer par des tables ! si c'est pas malheureux !!
moon a écrit :
C'est vraiment un bug ultramystique !

Joli adjectif (ultramystique).
Ce magnifique bug a de plus un joli nom que voilà : Peek-a-boo IE6 bug.

La page sur Position Is Everything (lien ci-dessus) donne quelques solutions. Pour ma part j'en vois deux plutôt intéressantes :
- se passer de spacer en clear: both et utiliser une autre méthode pour forcer le flottant à rentrer dans le flux de son conteneur
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
- conférer le layout au bloc parent (div#breakingNews), via un correctif pour IE6 uniquement si besoin (on utilisera alors un commentaire conditionnel, voir la FAQ du forum à ce sujet). Voir Avoir le layout - Le concept de hasLayout dans IE/Win.

Désolé, tu es tombé sur un bug un peu méchant, qui demande d'assimiler pas mal de concepts (HasLayout, commentaires conditionnels...), comme beaucoup de bugs un peu méchants d'IE6.

Ah oui : il est également possible d'éviter ce bug en évitant d'avoir un background sur div#breakingNews.
Alors la merci pour le Tip. Ca c'est une aide efficace Smiley smile ))
En effet le bug est de taille. Bon j'ai déja une ie5.css pour mon site mais je vais pas en rajouter ! D'autant que ce petit truc de couleur est temporaire. En tout les cas merci beaucoup pour ton explication claire !
Et pour le coté -enlever le fond de couleur- je crois que notre direction de la communication exclut meme l'idée Smiley smile