Aller au contenu

Problème css sous ie


ivoyages

Sujets conseillés

Bonjour,

J'utilise tellement peu internet explorer que je ne m'étais pas rendu compte que mon site avait un problème d'affichage sous ie7 (ie 6 ?). Pas de souci sous Firefox/Mozilla.

url du site : www.itinerances.info

Comme vous pouvez le constater, sous ie, le site est mangé par une partie de l'écran. Kesako ?

Voyez-vous comment résoudre ce problème ?

Greg

Modifié par Portekoi
Lien vers le commentaire
Partager sur d’autres sites

Salut,

Et sous IE6, que le conteneur parent de celui qui doit être centré doit également avoir la propriété text-align à la valeur center (ensuite définir à nouveau cette valeur pour les enfants à ce qui te convient). Donc dans ton cas :

body {
text-align: center;
}

Au passage, ce n'est pas logique et ça ne suit pas les recommandations du W3C quant à la fonction de text-align, mais IE6 fonctionne ainsi malheureusement.

Lien vers le commentaire
Partager sur d’autres sites

En me basant sur les propos de Captain Torche, j'ai trouvé une mise en page qui semble ok sous Firefox et ie7.

Sous ie6, mon annuaire s'affiche sous ma colonne de gauche. Un problème de Div sans doute mais je ne suis pas arrivé à trouver lequel :mad2:

Si quelqu'un a une idée

Greg

Lien vers le commentaire
Partager sur d’autres sites

Ne pouvant tester pour être sur tu devrait peut être essayer de voir du côté de la taille du conteneur générale. Car sous ie6, ta colonne de gauche plus ton annuaire fait plus que 920 pixels.

Reste à savoir pourquoi.

Lien vers le commentaire
Partager sur d’autres sites

Si quelqu'un a une idée

Pas plus que ma première réponse, qui est complémentaire à celle de captain_torche, je t'invite à la relire, elle règle ton problème alignement au centre pour IE6. Au passage tu n'a pas défini de DOCTYPE pour ta page, c'est tout de même important pour que certains navigateurs ne passent pas d'office en mode compatibilité (quirks). Et si tu peux, essaie de corriger les erreurs de validation sur ta page (doublons pour les "id", tags <body> et <html> fermés deux fois, etc.), tu y gagnera lors de ce genre de "debug" de ta charte graphique.

Bonne continuation.

Lien vers le commentaire
Partager sur d’autres sites

Merci pour les infos en doublon et l'info DOCTYPE. Je viens de faire les modifs.

Par contre, l'ajout de la mention de code

body {
text-align: center;
}

dans le body de la feuille de style ne remonte pas mon bloc sous ie6 et centre également les éléments.

Greg

Lien vers le commentaire
Partager sur d’autres sites

On ne s'est sans doute pas compris, tu ne souhaitais pas que le bloc #page soit centré sur la page ?

C'est ce que j'avais compris suite à la réponse de captain_torche, donc si tu ne veux pas qu'il soit centré, effectivement ma réponse n'est pas appropriée, tout comme la sienne. Ton problème est donc le fait que la le bloc #column2 est affiché en dessous du bloc #column1 sous IE6. En fait tes deux colonne n'ont pas à être en float, tu peux définir le float: left; uniquement sur #column1 et sur #column2 définir une marge à gauche suffisante qui permet de "simuler" la largeur de la première colonne lorsque le contenu de la deuxième est plus long.

Donc ton code CSS pour ces deux colonnes devient :

#column1 {
float:left;
margin:0 0 0 20px;
width:240px;
display: inline;
}
#column2 {
margin:0 0 0 260px;
width: 600px;
}

Le display: inline; sur #column1 corrige un bogue de Internet Explorer 6 qui double la marge d'un élément en float ;) En fait en ajoutant simplement cette ligne ça réglerais ton problème, mais je trouve toujours plus facile de gérer du contenu qui n'est pas déjà en float, après c'est à toi de voir ce qui te convient le mieux ;)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...