Mon site ne donne pas le même résultat sous firefox que sous IE7 (CSS)

Bonjour tout le monde,

Je suis assez déçu car j'ai commencé un petit site hier et quand j'ai testé sur Firefox, je me suis aperçu que le résultat n'était pas celui attendu.

Avec firefox, il y'a un grand espace blanc à gauche de la page, tandis qu'avec Internet Explorer, tout se passe très bien.

Je vous laisse l'adresse du site, sauriez-vous svp y jeter un coup d'oeil ?

Merci d'avance

http://164.15.111.52/Pharma.ulb.ac.be/edit_80/edit_80/edit_80/index.html

"debouchés" ne prend qu'un E,

Vérifie que ton bloc de menu et ton bloc de texte soient bien séparés l'un de l'autre. Et vérifie si tu n'a pas de margin-left qui traine pour rinen.

Hmm... problème classique de dépassement des flottants. div#logo est flottant et donc dépasse de son conteneur (sauf dans IE, mais... c'est un bug d'IE ).

Mais pourquoi ces décalages? Les flottants ne repoussent normalement que le texte. Sauf que dans ce cas précis, on a:
- un menu flottant (les flottants se repoussent entre eux);
- un div#content en qui crée un contexte de formatage (via la déclaration overflow: hidden), ce qui lui donne comme caractéristique d'être repoussé par les flottants.

Test à effectuer: supprimer le overflow:hidden de div#content.
Résultat: div#content se positionne correctement... par contre le menu est toujours repoussé, le texte de l'en-tête déborde toujours, etc.

Solution complémentaire: utiliser un contexte de formatage (justement...) sur le conteneur de div#logo pour empêcher le dépassement de div#logo de son conteneur.

div#links_container {overflow: hidden; width: 100%;}

Par ailleurs, le comportement anormal (quoiqu'en l'occurrence arrangeant) de div#links_container avec IE est dû à ceci:

/* widths */
#main, #links_container, #menu, #content, #footer
{ [#red]width: 100%;[/#]
  margin-left: auto; 
  margin-right: auto;
}

Une série de déclarations non seulement inutiles, mais qui en plus confère le layout (via la propriété width) à tous ces éléments, ce qui n'est pas forcément intéressant (sauf pour div#links_container, si on veut utilisere le HasLayout pour empêcher le dépassement du flottant dans IE6).

Pour en savoir plus, voir le concept de HasLayout dans IE Win.

Black_Jack a écrit :
"debouchés" ne prend qu'un E,

Vérifie que ton bloc de menu et ton bloc de texte soient bien séparés l'un de l'autre. Et vérifie si tu n'a pas de margin-left qui traine pour rinen.

Salut BlackJack,

Merci pour ta réponse.

Pour ce qui est du margin-left, j'ai fait une recherche (CTRL+F) avec comme critère margin et margin-left, je n'ai rien trouvé.

Pour ce qui est du bloc du menu, le voici :

<div id="menu" >
	
      <ul>
        <!-- **** INSERT NAVIGATION ITEMS HERE (use id="selected" to identify the page you're on **** -->
        <li><a id="selected" href="#">home</a></li>
        <li><a href="http://www.ebay.be">etudiants</a></li>
        <li><a href="#">futurs etudiants</a><a href="#">NOS ATOUTS </a><a href="#">DEBOUCHES</a></li>
        <li><a href="#">HISTORIQUE </a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div>

Je n'y connais pas grand chose en CSS (pour ne pas dire rien), je te laisse donc juger.

J'espère que tu pourras encore m'aider.

Merci encore pour tout.

beegees a écrit :
J'espère que tu pourras encore m'aider.

Je ne veux pas décourager Black_Jack de t'aider, mais je pense avoir apporté les différents éléments de réponse dont tu pourrais avoir besoin dans ma réponse ci-dessus. Je t'invite donc à la relire.

Bonjour Florent et désolé, j'étais en train de relire attentivement ton message (car je suis nul en CSS et je préfère relire encore une fois de plus qu'une fois de moins).

Ton message me semble bien complet, je vais tester et je te dis quoi.

C'est très gentil, encore merci à toi.

beegees

Rebonjour,

Voici l'erreur qui se trouvait dans mon code :

Il fallait juste ajouter cette propriété dans ma feuille de style :

#content{clear:both;}

Et maintenant c'est OK.

Merci à tous pour votre aide et tout principalement à Florent.

Merci pour le super travail que vous effectuez chaque jour