H1 qui disparait sur IE avec image en position float dessous

Coucou tout le monde. ça faisait pas mal de temps que je n'avais lus besoin de vos excellentes réponses, et tout d'un coup vlatipa que je découvre ce que je pense etre un bug bien propre à ce IE...

j'explique :

- Je place un conteneur #toto
- J'enchaîne avec une balise h1
- Je place une image en position float (left) pour y adjoindre du texte à sa droite, aussi en position float (left). #toto img
- j'applique un <br /> ayant la propriété clear left
(ke texte de droite sert de mini-fiche avec 2 ou 3 lien, pas du texte à part entière)

Ma balise h1 propose un background-bottom de 1px solid ainsi qu'un magin-bottom de 5px.

Jusqu'ici pas de problème. Sous firefox, AUCUN souci, tout est parfaitement bien interprété. par contre sous IE, je vois que mon h1 n'apparait pas, ou seulement au survol dessus avec la souris ! Qu'est ce que c'est que ce délire ?

Vous aviez déjà remarqué ce genre de bug ?
Modifié par Wildry (10 May 2005 - 14:16)

Tu pourrais donner le code (testing, validating and so)?
++, HoPHP

Ouai, en fait le code est valide css 2 et xhtml 1.
la ou je devine que c'est un bug, c'est qu'a un endroit il apparait, je vais sur une autre page et quand je reviens il disparait... Vive IE
Bien sur l'erreur n'intervient pas si je mets juste du texte en dessous

Pour le code, en voici un extrait :

Code css :

#theme-image {
        float: left;
}

h1 {
	text-align: left;
	color: #996600;
	padding-bottom: 3px;
	border-bottom: 1px solid #996600;
	margin-bottom: 5px; margin-top: 2px;
}

.majors-first-content {
	float: left;
	margin-left: 5px;
}

Code xhtml

<div class="autres" title="Présentation des derniers dossiers">
	<h1>Dossiers &agrave; la une</h1>
	  <a href="#" id="theme-image" title="lire le dossier sur $theme"><img src="images/avatar256.jpg" alt="" /></a>
	<div class="majors-first-content" title="Infos concernant le dossier">
		<p>Gran Turismo 4</p>
		<p>Ecrit le 12/10/2004  </p>
		<p>Par : <b>$pseudo</b></p>
		<p><cite>19</cite> commentaires</p>
	</div>
...
</div>

Ah il m'est interdit de faire une class .autres img {} du fait de l'utilisation du conteneur pour d'autres choses.

PS : pour info, la page n'est pas reliée a une bdd, c'est juste de la presentation (je dis ca pour les $...
Modifié par Wildry (10 May 2005 - 13:39)

J'ai cru un instat avoir trouvé la solution en proposant un position: relative sur la class servant a faire floater l'image mais rien y fait, ya que IE qui propose ce bug. Opera reagit tres bien, comme Firefox, le grand.

Pkoi tout le monde ne met pas firefox ? je commence a avoir serieusement la haine là !
Modifié par Wildry (10 May 2005 - 14:17)

Bon, j'ai toujours pas reussi a trouver.

Je vous propose de regarder ca avec IE et avec firefox pour comparer
http://www.gplays.com/v4/dossiers.php

je vais finir par faire un tableau a deux colone si ca continue rien qu'a cause de IE, c'est saoulant ca le fait aussi sur d'autres pages où une image se trouve sous la balise h1. j'ai essayé en changeant avec une balise h2, h3 non definie, le resultat est le meme...

Lorsque j'enleve la couleur de fond de ma class conteneur "autres", on voit bien le titre mais le fond est transparent bien sur.

please help, je suis au bord de la depression !

Je suis pas sûr que c'est causé par ca, mais IE a des problèmes avec les floats. Il m'est arrivé que le contenu disparaisse parfois lorsque je mettais une image en float. Pour corriger le bug, car c'est bien un bug, tu dois donner une largeur à ton conteneur, celui même qui contient ton image qui est en float. Ca devrait régler le problème.

Sinon, c'est autres choses, et j'ai pas vraiment le temps en ce moment.

Aie merde, ouai mais dans l'idée j'ai fais un conteneur qui peut etre repris sur d'autres page a des largeurs variables (ca evite d'avoir une css qui fait 150 000 lignes)

Ma structure est la suivante :
- Un bloc conteneur general
et pour le centre qui nous interesse :
- 2 blocs en float left d'une largeur definie pour chacun : un #xxx
-gauche et #xxx-doite
- Dans ces 2 blocs j'applique mon conteneur de contenu ".autres" dans l'exemple de la page citée) ayant un contour noir et un fond jaune clair.
- Dans ce ".autres" je mets h1 + image en float (a gauche) + une seconde boite en float (a droite de l'image)

Donc lorsque j'enleve la couleur jaune claire, on voit bien ce titre h1.
j'ai même essayé en local de rempalcer h1 par p et j'obtien le meme resultat : pas de titre visible sauf au survol (on s'en serait douté)

Wildry a écrit :
Aie merde, ouai mais dans l'idée j'ai fais un conteneur qui peut etre repris sur d'autres page a des largeurs variables (ca evite d'avoir une css qui fait 150 000 lignes)

Mais hmmm, qu'est-ce qui t'empêche d'indiquer une largeur au conteneur ? La largeur peut être spécifiée en pourcentage ou en pixels, peu importe. Tu peux mettre 100% si tu veux, ca devrait régler le bug (si c'est bien ce bug-la). Tu peux aussi changer sa largeur d'une page à l'autre, c'est pas important, en autant qu'il aille une valeur comme largeur.
Modifié par Merkel (10 May 2005 - 22:17)

ah oui merci, j'essaye avec 100% ca changera rien au resultat mais ca peut peut etre reglé ce bug alors j'avais pas pensé ! je vous tiens au courant

Aieee, ca fait mal

Effectivement, il faut bien indiquer une largeur pour que le bug disparaisse seulement maintenant voilà, en corrigeant ce bug de IE, j'ai u prob sur la presentation : j'explique

Au regard de ma structure ennoncée ci dessus, mon conteneur ".autres" est juste définie par des marges exterieures, comme mes autres conteneurs du genre. Aucune largeur, sauf le 100% appliquée sur le ".autres".

Par contre les largeurs sont appliquées en dessous sur les deux blocs #xxx-gauche et #xxx-droite. Ces XXX representent les differentes pages du site. En effet, la largeur gauche de la home doit etre plus grande que la largeur gauche de la page image (par exemple). Ainsi mes conteneurs comme ".autres" s'adaptent automatiquement en fonction des besoins des pages.

Donc, ici appliqué 90% ou 100% ne donnera pas le même résultat sur la page home et sur la page image du fait du conteneur du dessous variable. Vous comprenez ? Comment je peux m'en sortir avec cette structure ?

Je me demandais si au final, un simple tableau à deux colones ne pourrait pas regler le probleme. Mais un resultat qui fonctionne sans tableau sur les navigateurs sauf sur ie, j'ai du mal à encaisser.
Modifié par Wildry (10 May 2005 - 22:54)

Non, il y a moyen que ca passe sur IE et Firefox, et sur beaucoup d'autres d'ailleurs, sans pour autant passer par un tableau.

Un peu de patience, quelqu'un finira pas t'aider. Y'a beaucoup de tutoriaux ou d'exemples pour faire un site à deux colonnes sans tableaux.

Je voudrais bien t'aider davantage, mais il est 17h et je quitte le bureau. Mon Internet m'a lâché chez-moi.

Bonne soirée !

Merci beaucoup, j'attends avec impatience, car je trouve vraiment pas de solution, même en ayant cherché avec google.

C'est vrai que maintenant, je sais faire un site a deux colones sans tableau, la preuve la où je parlais de tableaux, c'est pour remplacer les deux float dans le conteneur ".autres". Une colone de gauche pour l'image et l'autre pour les infos.

La structure, j'ai pas trop envie d'y toucher, je crois qu'elle est bonne.

(Ah d'ailleurs, tu sais Merkel que mon site déborde de include Bon je sais que c'est pas recommandé d'en avoir plein - enfin j'ai lu ca quelque part - mais franchement je prefère avoir des petits bouts de codes facilement explotables et appelés à la demande que juste quelques uns - Enfin je confonds pas include et iframe : rapport a ta signature )
Modifié par Wildry (10 May 2005 - 23:17)

Je n'ai rien contre leur utilisation, au contraire. Je milite pour qu'on arrête seulement de les comparer à des frames/iframes ou de les appeler pseudo-frames.

L'important, c'est que la personne sache faire la différence technique entre un include et un iframe. Les débutants qui plongent dans le PHP sans à peine connaître le html et css se font souvent avoir et sont convaincu que le principe des includes est le même que les vieux frames/iframes. Je me demande même pourquoi on leur suggère d'utiliser des includes. Qu'ils commencent à maîtriser le html et css avant les langages côté serveur. Ca me semblerait un cheminement plus logique et moins risqué.

Pour ton problème, c'est difficile de t'aider vu que je suis au bureau et que je commence à bosser dans quelques minutes. Je ne serai pas là non plus pour l'heure du dîner. Je n'ai pas Internet chez-moi pour le moment non plus. Bref, tout va bien hein ? Si je trouve le temps demain midi, je verrai ce que je peux faire.
Modifié par Merkel (11 May 2005 - 14:21)

Merci encore, c'est vraiment gentil. Pour l'instant, j'ai donc corrigé ce bug avec l'utlisation d'un tres simple tableau à 2 colones. C'est sûr que ça marche m'enfin bon... j'avoue je suis plutot véner. Du fait que mon conteneur n'utilise que des marges pour se placer, et qui lui permet donc de le mettre un peu partout, je n'ai trouvé que cette solution, mais si jamais un jour une autre solution coté css est trouvé, je suis tout de suite preneur. Un cas difficile j'ai l'impression.

Le pire c'est que j'ai trouvé d'autres bug insupportables sous IE toujours liés aux floats. Heureusement, sur d'autres pages j'ai pu determiner plus facilement la largeur du conteneur, solution qui corrige vraiment bien le problème, mais qui demande parfois quelques lignes supplementaires dans la css.

Moi, c'est pour que tout le monde utilise un autre navigateur que IE que je vais militer ! Le pire, et j'en suis sûr, c'est que Microsoft pourrait arranger rapidement ces petits bugs en sortant une version 6.1 plus respectueuse des normes par exemple, mais même pas... En tout cas les includes, pour réagir rapidement coté maintenance, ya pas mieux, je trouve.