Pb hauteur de hr

Bonjour,

Après la lecture des divers tuto de alsacreation et openweb sur les flottant, j'essai desesperement d'en mettre en application.

nottament pour avoir une image à gauche et le texte à droite. (cela peu parraitre simple).

Donc pas de pb, mon image avec un float:left et tout va bien.

<div>
<img>
<p></p>
</div>

Maintenant je souhaite mettre en dessous de ce bloc du texte, mais que lui ne soit pas à droite de ma photo. Je rajoute donc un hr avec la propriété clear:both;

J'obtien a peu pres ceci

<div>
<img>
<p></p>
<hr>
</div>

<p></p>

tout fonctionne avec mozilla, mais avec ie, mon hr prend une place démesuré en hauteur.

ex : http://www.espalion.fr/tourisme-espalion/tourisme-espalion.php

merci
Modifié le 08 Nov 2004 - 16:29

Dans les Ressources

- http://www.sovavsiti.cz/css/hr.html Styling <hr>

Ca ne résou malheureusement pas mon pb de mettre en forme mon hr.

Il est déjà invisible avec des marges de 0.

Ce que je comprends pas, c pourkoi, sous mozilla, l'affichage semble normal alors que sous IE il prend une hauteur très importante ???

C'est sans-doute dû à d'autres marges qui interfèrent (marges basses sur <p> ?).
En tout cas, pour avoir testé ton code sur IE, je n'ai pas de grand espace.

sur la page http://www.espalion.fr/tourisme-espalion/tourisme-espalion.php apres le paragraphe relatif à la première photo tu n'as pas un grand espace????

J'ai mis sur cette page un exemple plus simple à voir peut etre

http://www.espalion.fr/ville-espalion/presentation-espalion.php

Il faut regarder sur IE et sur mozilla ou firefox pour voir la différence

d'autre part, sur ie, le texte n'apparai pas, il se trouve en dessous. Il faut alors que je précise un fond transparent pour mon conteneur si je veux voir le texte (on peu s'en apercevoir en faisan une sélection à droite de l'image)

ce pb ne se pose pas non plus sur mozilla, firefox
Modifié le 08 Nov 2004 - 16:29

Quand je dis avoir testé ton code avec succès sur IE, je parle de celui-ci :

<div>
<img>
<p></p>
<hr>
</div>

C'est bien pourquoi je pense que le problème provient d'autres marges ou espaces qui traînent et qui influent.

a écrit :
d'autre part, sur ie, le texte n'apparai pas, il se trouve en dessous. Il faut alors que je précise un fond transparent pour mon conteneur si je veux voir le texte (on peu s'en apercevoir en faisan une sélection à droite de l'image)

Ceci est un autre problème.
Si j'ai bien suivi ton cas, on en parle ici :
http://www.alsacreations.com/blog/index.php?2004/08/08/48-les-flottants-font-de-la-magie

Salut pc07

apparement tu as 2 styles différents (droite et gauche) pour tes alignements, tu as regardé les marges de chacune (vu le truc je pense que c'est sur droite qu'il y a un problème...

Je me suis aussi possé la question entre droite et gauche mais j'ai essayer d'inclure que gauche sur la page http://www.espalion.fr/ville-espalion/presentation-espalion.php (avec une couleur de fond afin de bien montrer ce qu'il ce passe et un hr visible cette fois).

donc mon bloc gauche "<div class='gauche'>" recoi une image (float:left) et un paragraphe de texte.

Dans le cas ou mon texte est moins haut que la photo tout autres paragraphes que je créér après mon <div class='gauche'> vien se coller à la suite de mon texte (a droite de la photo). Pour éviter ceci, j'utilise la méthode du hr avec la propriété clear:both.

Cela fonctionne sous mozilla et sous ie. Le pb, c'est que IE met un espace immense (équivalent à 4 ou 5 saut de ligne voir plus) alors que mozilla ce contente de me mettre l'espace du hr standard.

J'ai regarder encore mes marges, et à chaque fois g des marges à 0px et des padding à 0px.

... et ca morche po

J'espere que j'ai été plus clair et que quelqu'un à peu etre la solution .

je crois que j'ai trouvé le problème, mais je c pas trop comment le résoudre.

Ma structure centrale est toujours du type menu gauche - contenu - colonne droite.

menu gauche est flottant a gauche
colonne droite à droite
et contenu est dans le flux avec une marge à gauche et une a droite.

Lorsque j'utilise donc mon hr avec l'attibrut float:both, il va se caller sous mes deux flottants menu et colonne et non pas par rapport à mes flottants dans mon conteneur contenu.

Pour résoudre le pb, je peux passer mon conteneur en absolu, mais ca le sort du flux, et je dois réadapper modifier une partie de ma mise en forme

cette solution fonctionne sur ie, mais le fait de sortir mon conteneur "contenu" du flux ne fait plus rien marcher sur mozilla