Jump to content
Sign in to follow this  
ivoyages

Problème css sous ie

Rate this topic

Recommended Posts

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

Edited by Portekoi

Share this post


Link to post
Share on other sites

J'ai pas testé, mais ça peut venir du positionnement de ton div#page.

Enlève le positionnement relatif et les marges, et essaye de lui mettre : margin: 0 auto;

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites

plus simplement, pour centrer un DIV, tu peux essayer de mettre dans ton style :

margin-left:auto;

margin-right:auto;

en supprimant tes float ainsi que position des styles concernés.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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 ;)

Share this post


Link to post
Share on other sites

Merci de l'info et des explications. Je connais une astuce de plus... :thumbsup:

Greg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...