28204 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai placé une image en "float:right" et une boite (div) de largeur fixe contenant du texte juste après.

Avec firefox, l'affichage en 800x600 se fait correctement : l'image "rentre" dans la boite :
http://arsunik.free.fr/tmp/screenshot-ff.jpg
Avec ie6 (ou 5.5 ?), on m'a envoyé ce screenshot (le texte se place en dessous de l'image) :
http://arsunik.free.fr/tmp/screenshot-ie.jpg
L'adresse du site est http://badiste.fr

Je pense que c'est un problème dû à la façon dont ie gère les éléments flottants mais je ne vois pas comment le résoudre.
Est-ce qu'il y a une solution ou une autre façon de faire ?
Modifié par sun (24 Sep 2007 - 13:22)
Salut,

Apparemment, c'est à cause du
* html #index2 {
        width: 560px;
}

Si je le retire, ça marche. Mais IE6 ne supportant pas le "max-width", le texte prend toute la largeur de la page. Bien vite qu'IE6 soit mort et enterré !
Merci pour l'info, j'hésitais entre 2/3 trucs différents et je n'ai pas de ie6 sous la main pour tester Smiley sweatdrop
Il va vraiment falloir que j'installe un windows avec qemu ou autre Smiley rolleyes

Enfin du coup je ne sais pas comment réussir à afficher une zone de texte de largeur fixe avec une image à coté.
Ça paraît pourtant simple dit comme ça Smiley ohwell
Finalement je me tourne vers javascript dès que le navigateur est ie5/6 vu que je ne vois pas de solution en css :

        width: expression(document.body.clientWidth >= 1030? "50em" : "auto" );
Le fait de donner une largeur précise (en pixels ou pourcentages) à un bloc fait que celui-ci sera doté du layout dans Internet Explorer. Or, les éléments qui ont le layout ne peuvent pas être survolés par les flottants. Donc, si le bloc défini à 560px de large est trop large pour tenir à gauche du flottant (ou si le flottant empiète d'une manière où une autre sur le bloc), il passe à la ligne.