28220 sujets

CSS et mise en forme, CSS3

[Résolu] Texte invisible sous IE (?!)

Bonjour à tous !

Internet Explorer m'avait habitué à rencotrer des problèmes étranges que j'avais cependant toujours réussit à surmonter en bidouillant un peu. Là, je suis vraiment perdu.

Ma mise en page problématique est assez simple :

Titre
Image | Texte à coté de l'image

En XHTML, ça donne ça :


<div class="paragraphe">
    <h3>Titre</h3>
    <img src="url" alt="alt" />
    <p>
      Texte sur plusieurs ligne.
    </p>
    <hr />
</div>


Le CSS qui l'habille donne ça :


.paragraphe h3{
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:5px;
}

.paragraphe img{
	margin-right:5px;
	margin-bottom:5px;
	border-width:1px;
	border-color:#000000;
	border-style:solid;
	float:left;
}

.paragraphe p{
	margin:0px;
	padding:0px;
}

.paragraphe hr{
	clear:both;
}


Tout marche impécablement sous FireFox. Je test avec IE, et... le texte (le titre dans le h3 et le texte dans le p) ne s'affiche pas ! Les images si, mais pas le texte. Il n'apparait que si on le surligne, et disparait ensuite, sans suivre aucune logique... J'ai testé sur les internet explorer d'autres pc, et le resultat est le même. J'ai ensuite remarqué que si j'enlevais les images, le texte s'affiche. Pire encore : Si je spécifie volontairement des urls invalides à mes images, afin qu'elles ne s'affichent pas, le texte s'affiche...

Si quelqu'un connait la solution de ce problème, ou une autre manière de réaliser la mise en page que je désire, je lui en serait entièrement reconnaissant. Parce qu'en plus, je sais vraiment pas trop quoi rechercher sur le net pour trouver une réponce à ce mystère... Merci d'avance.
Modifié par KosMos (20 Jul 2005 - 11:13)
Pas beaucoup de réponses... Le problème est, c'est vrai, assez déroutant.

Nouvelle observation : Le div qui contient tout ça a un fond blanc, ceci est défini par la propriété background-color:#FFFFFF;.

Si j'enleve cette propriétée, le texte s'affiche ! Si je met une couleur autre couleur, il ne s'affiche pas !

Je vais devenir dingue...
Modifié par KosMos (19 Jul 2005 - 23:27)
KosMos a écrit :

Pas beaucoup de réponses... Le problème est, c'est vrai, assez déroutant.

En fait, ta page en ligne serait un atout.
Ce n'est pas tout le monde qui a le temps (le désir?) de reproduire ton problème en local...

<edit />
hé hé ! on a percuté en même temps Smiley lol
Modifié par Stephan (19 Jul 2005 - 23:45)
Le texte est noir et le background de la page est rouge.

En fait à partir du moment ou je spécifie une couleur de background au calque conteneur, le texte ne s'affichera pas.

Stephan : Effectivement je comptais l'uploader.

=> Voila, c'est fait ici. J'espere que ça ne viens pas juste de chez moi, bien que j'ai testé sur d'autres ordinateurs. J'espère aussi que ce n'est pas une bete erreur de codage, mais j'ai vérifié cents fois...
Modifié par KosMos (19 Jul 2005 - 23:50)
La réponse se trouve quelque part dans le lien donné par Exo7 (Bien vu Smiley cligne ).

Une solution proposée serait la suivante (Holly hack) :

/* Hides from IE5-mac \*/
* html .paragraphe {height: 1%;}
/* End hide from IE5-mac */

Mais il doit y avoir une solution plus propre en révisant ton HTML Smiley ohwell
As-tu réellement besoin de superposer 3 couleurs comme ceci ?
Tu fais de la peinture à numéros ou quoi ? Smiley lol 

body{
	background-color:#FFFFFF;
}
.main{
	background-color:#FF5455;
}
.page{
	background-color:#FFFFFF;
}

Parce que si le but recherché est de faire des bordures rouges euh...

/me ... ça me rappelle la mise en page tableau... Smiley decu

Enfin. Si c'était moi, j'éviterais le background-color sur .page
Je regarderais peut-être direction « faux-columns ».
=> http://pompage.net/pompe/colonnesfactices/

(j'essais de t'éviter un hack) Smiley cligne
Merci beaucoup.

Stephan > Je me contempterai d'un hack. Tu ne trouves pas ça très logique de superposer ces trois couleurs ? Après si ça plait pas à IE, j'y peux rien...
KosMos a écrit :

Tu ne trouves pas ça très logique de superposer ces trois couleurs ?

bah... oui c'est logique Smiley lol
Sujet clos
Aller à