28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Problème de Visu avec clear sous IE

Bonjour.

J'ai un petit soucis de visu spécifique à IE

Grace au bouquin, j'ai pu nettoyer mes css, et améliorer la visu de mon site avec les div, float, etc..

Mais si c'est superbe sous FireFox, Opera et autre Browser, il y a un gros Bug sous IE Version 6. Une partie du texte ne se visualize plus dès que j'utilise la propriétée clear

Voici une partie mon CSS

.fl_left  { float: left; }
.fl_right { float: right; }
.clearer  {clear: both; margin: 0; padding: 0;}
.cl_right { clear: right; margin: 0; padding: 0; }
.cl_left   { clear: left; margin: 0; padding: 0; }


Et voici la partie de la page :

<div CLASS="Topic">
  <H2>Titre Boite</H2>
  <div  class="fl_right"><IMG SRC="une_image" alt="Edito"  /></div>
    <P>BlaBlaBla_01</P>
    <P>BlaBlaBla_02</P>
    <div class="clearer"></div>
  <div class="TitH5"><A Href="suite.php">Lire la suite</A></div>
</div>


Les classes Topic et TitH5 sont juste des boites avec un cadre, une taille de police, un fond et une couleur de texte.

Se sont les textes :
"Titre Boite", "BlaBlaBla_01", "BlaBlaBla_02" qui n'apparaissent pas, mais en plus, uniquement que la hauteur cumulée des textes "BlaBlaBla_01" et "BlaBlaBla_02" est inférieure à la hauteur de l'image (c'est taquin IE)

Petites indications :
* Quand je sors le bloc "H2" du div, il apparait
* Les textes sont là, et par selection ils apparaissent
* Quand je met l'ordre 'float: left' aux blocs '<P>', les textes apparaissent
* Le problème apparait aussi quand l'image est remplacé par autre chose.
* Le tag "align=right" sur l'image pose le même problème

Quelqu'un a une idée ? Ou déjà rencontré le problème ??
Modifié par Bruin (19 Oct 2006 - 14:11)
Bpnjour,

Pourquoi tous ces <div> ?

<div CLASS="Topic">

  <H2>Titre Boite</H2>
  <IMG SRC="une_image" class="fl_right" alt="Edito"  />
    <P>BlaBlaBla_01</P>
    <P>BlaBlaBla_02</P>
    <p class="clearer"></p> /*--------- A la limite... un <hr /> c'est plus joli ----*/
   <a Href="suite.php" class="TitH5" >Lire la suite</a>
</div>

T'économises du div et peut être ça ira mieux ??
J'ai déja essayé cette solution et toujours le même problème.

Et même avec 

<IMG SRC="une_image" align="right" alt="Edito"  />


cela ne marche pas.

les solutions 


* <P class="clearer">&nbsp;</P>
* <br class="clearer" />
* <hr class="clearer" />
* <hr>


ne marchent pas non plus

La seule qui ai eu de l'influence, c'est 

<div CLASS="Topic">
  <H2>Titre Boite</H2>
  <div  class="fl_right"><IMG SRC="une_image" alt="Edito"  /></div>
    <P class=[b]"fl_left"[/b]>BlaBlaBla_01</P>
    <P class=[b]"fl_left"[/b]>BlaBlaBla_02</P>
    <div class="clearer"></div>
  <div class="TitH5"><A Href="suite.php">Lire la suite</A></div>
</div>


Les texte apparaissaient, mais pas le boc H2, et je ne pouvais pas le faire pour H2, car la boite aurait été dimensionnée à la longueur du texte, et pas sur toute la longueur de la page.

PS:
Le div class="TitH5" est là car dans certains cas, il y a un bloc à droite, voir un autre au mileu (page générée par PHP)
Modifié par Bruin (19 Oct 2006 - 00:26)
Re,

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>test</title> 

<style type="text/css">
.Topic{
width: 300px;
margin: auto;
background:#fbffad;

}
.fl_left  { float: left; }

.fl_right { float: right; }

.clearer  {clear: both; margin: 0; padding: 0;}

.cl_right { clear: right; margin: 0; padding: 0; }

.cl_left   { clear: left; margin: 0; padding: 0; }	

hr{
clear: both;
background:#fbffad;
}

</style>
</head>

<body>
<div CLASS="Topic">

  <H2>Titre Boite</H2>

  <IMG SRC="image.jpg" class="fl_right" alt="Edito"  />

    <P>BlaBlaBla_01</P>

    <P>BlaBlaBla_02</P>

    <hr/>

  <div class="TitH5"><A Href="suite.php">Lire la suite</A></div>

</div>
</body>


Ce code tout seul fonctionne, ou alors je suis à côté de la plaque ...
Ou tu as des interactions avec d'autres classes dans ton css ...
Re,

Merci pour toutes ces infos. J'ai trouvé la solution à l'aide de tes réponses, et aussi en fouillant dans le forum. notament dans le document IE Windows, layout et bugs de rendus CSS

La solution est de donner une largeur au DIV qui contient les floats afin que IE ne se ramasse pas dans sa visu.

Mon code final est le suivant

<div class="Bloc" >
  <div CLASS="Topic" style="width: 100%;">
    <H2>C'est dans les vieux pots...</H2>
    <IMG SRC="images/edito/edito_08.jpg" HEIGHT="150" alt="Edito"  class="fl_right" />
      <P>Comme d'habitude en cette période, c'est la Fête du Malt qui est au centre des préoccupations du club, et la question du choix de la ou des distilleries invitées est, vous le pensez bien, de grande importance.
<br />
Au cours des années passées les plus grandes distilleries sont venues à notre Fête d'automne : parmi elles Springbank plusieurs fois dont la toute première, Highland Park, Ardbeg et Bruichladdich dans un duo qui restera dans toutes les mémoires, Glenfarclas évidemment, et enfin Macallan pour la dernière en date.
<br />
Un représentant de la distillerie (et parfois plusieurs) fait le voyage et viens partager ses connaissances et sa passion du whisky . . . </P>
      <div class="clearer"></div>
    <div class="TitH5"><A HREF="aff_news.php?NU_NEWS=29"> . . . Lire la Suite &gt;&gt;&gt;</A></div>
  </div>
</div>


Le premier <div class="Bloc" > va me servir en fait à éviter les problème de visu des margin & padding sous IE, FireFox, etc..., et l'apparition d'ascenseurs horizontaux.

Merci pour toutes les infos, et solutions proposées
Sujet clos
Aller à