28172 sujets

CSS et mise en forme, CSS3

Salut,

Voilà, j'ai un petit souci d'affichage d'une page web que j'ai créé! Elle s'affiche correctement dans IE mais pas sous Firefox ! On dirait un problème de fusion des marges mais pas sûr !

Quoiqu'il en soit, je ne trouve pas où se situe l'erreur dans mon code alors, je me dis que vous pourrez peut-être m'aider? Je me rend bien compte que c'est un boulot de vérifier ça mais je tente à tout hasard, quelque fois que vous auriez du temps pour y regarder car, moi, je sèche !

Ca m'aiderait vraiment ! Merci d'avance!

Voici le lien de ma page :

http://gizmil.jexiste.fr/liens_forums/tests/liste_boutiques_femmes_xxl.html

Mes fichiers (html, css, images):

http://gizmil.jexiste.fr/liens_forums/tests/page_web.rar
Modifié par Gizmil (06 Jun 2009 - 17:32)
Salut Gizmil,

a écrit :
Elle s'affiche correctement dans IE mais pas sous Firefox
Tu ne dis pas quel est le problème.

En regardant rapidement, je vois une chose qui déconne (y en a-t-il d'autres, je ne sais pas). Ton bloc #list ne s'étire pas pour englober tous ses éléments enfants. La cause en est simple :
#list {
    height:600px;
}
Tu demandes à ce que le bloc fasse 600px de haut. C'est donc ce que tu obtiens. Supprime donc cette déclaration et voit si le problème disparaît (la hauteur du bloc devrait s'adapter à son contenu).
Ok, merci, Marcv ! Effectivement, ça va mieux sans ! Smiley smile

Ben, le truc, c'est que je pensais qu'on verrait le problème en comparant sur IE et Firefox mais le fait est que je viens de découvrir que sous IE7, le problème intervient comme sous Firefox! En fait, moi, j'ai IE6... (IE7 ne veut pas s'installer sur mon pc, y a un bug).

Enfin, bref, les autres problèmes, je viens d'en détecter, c'est mes balises fermante </p> que j'avais écris <p/> par distraction, ainsi que deux balises <a> écrites ?a>

Reste que le nom des boutiques de ma liste se place dans le premier cadre bleu alors qu'il devrait se situer au dessus, comme ceci :

http://images.bipbipgroups.com/images/1244307521x17sn64.jpg

Bizarre, cette erreur de positionnement... je continue à chercher de mon côté !
a écrit :
IE7 ne veut pas s'installer sur mon pc, y a un bug
Je me souviens avoir eu le même problème à l'époque et j'avais trouvé la solution sur le web. M'enfin, on est à la version 8 aujourd'hui, donc si j'étais toi, je concentrerais mes efforts sur celle-ci.
a écrit :
le nom des boutiques de ma liste se place dans le premier cadre bleu alors qu'il devrait se situer au dessus
Supprime ça :
h4 {
float:left;
}

Modifié par marcv (06 Jun 2009 - 19:26)
Bonjour,

À vue de nez, les problèmes rencontrés viennent d'une utilisation non maitrisée du positionnement flottant. Le dépassement des flottants n'est pas géré correctement, mais est géré à coup de hauteurs fixes (height: 50px par exemple), d'où des contenus qui parfois débordent allègrement.

Donc, rapidement:
- Virer tous les height; height c'est le mal; min-height c'est bien.
- Gérer correctement le dépassement des flottants.

Pour aller plus loin: on pourrait tenter d'utiliser du display:inline-block plutôt que du float:left, tiens.