28172 sujets

CSS et mise en forme, CSS3

[Résolu] Balise flottante et texte superposé - Firefox

Bonjour à tous,

Voila, j'ai un petit soucis avec Firefox (pour une fois ...) car dans cette page http://takeaphoto.eu/page_perso_antonin.php l'image de droite est dans une balise flottante et le texte lui passe dessus.

Alors que dans Safari, ca marche nickel et le navigateur renvoi bien à la ligne.

Du coup, si je met un <br/>, cela décale le texte sous Safari.

J'aimerai donc savoir si quelqu'un à une solution (soit un <br/> qui marche que sous FF soit, mieux, quelque chose qui "interdit" au texte de passer dessus)

Merci d'avance pour votre aide Smiley lol

Antonin
Modifié par dark.tonin (16 Feb 2011 - 13:50)
Bonjour, tu as une deuxième déclaration de doctype après <body class="espace"> Smiley eek

En plus, tu utilises des attributs dépréciés dans ton code qui ne passe pas le doctype strict...

Des corrections et une validation du code sont nécessaire avant de chercher à corriger ton bug.
Ah oui, mais ca c'est parce que j'ai fait une incrustation en php Smiley lol (donc tout une page) et je sais qu'il y a un problème à ce niveau mais pour l'instant, je ne suis pas assez bon pour savoir le régler correctement Smiley sweatdrop (mais ca marche et ca viendra).

ok j'ai honte car c'est du bidouillage .....
C'est dommage que tu ne puisses pas le corriger parce que c'est difficile de t'aider avec un code non valide.

En passant, le problème se reproduit sur tous les navigateurs.
Voila j'ai modifié le code de mes incrustations en php pour ne garder que les lignes de codes révélantes. J'espère que c'est bien comme ca qu'il faut faire (je ne suis pas sûr pour les links et scripts mais cela ferra l'objet d'un post également car je ne maitrise pas encore très bien le php).

Pour revenir au problème, sous mon mac, il apparait correctement sous Safari mais pas sous FF mais c'est encore plus embêtant si ca pose un problème partout ... Smiley decu

Une idée miracle ?

Merci encore pour l'aide
Bonjour,

Si tu ajoutes un background:red à l'élément #photo, tu peux constater que:
- l'élément #photo, flottant, repousse bien le texte;
- l'image dépasse de cet élément;
- la partie de l'image qui dépasse ne repousse pas le texte.

Moralité: ne pas abuser des hauteurs fixes (surtout si on définit une hauteur inexacte). Smiley cligne
Effectivement !!!

Et quelle erreur de débutant en plus ... Smiley sweatdrop

Comme quoi, c'est souvent les choses les plus simples qui nous (me) passent sous le nez Smiley lol

Merci beaucoup !!!!!!
Sujet clos
Aller à