28173 sujets

CSS et mise en forme, CSS3

Aide pour IE 6

Bonjour!

Je me retrouve avec un petit probleme d'affichage du container sous Internet explorer 6.
La barre latérale ainsi que la barre de navigation sont placés et affichés correctement, mais l'ennui vient du conteneur. Au lieu que celui-ci ne s'affiche en face de la barre latérale, il s'affiche en dessous (uniquement sous IE) comme si la barre latérale occupait la largeur de la page et "repoussait" en dessous d'elle le texte du conteneur...
voici l'adresse ici
Je ne sais que faire...

Avez-vous une idée pour régler ce probleme ?
Merci d'avance!
Modifié par Tweek (21 Aug 2006 - 15:33)
Cela doit simplement venir d'un problème de taille.

IE et FF n'interprétent pas de la même manière les margins. Il me semble qu'IE ajoute les margin à la largeur alors que FF soustrait. Exemple :

On a un cadre conteneur de 600px. On veut qu'il ait une marge de 10px à droite et à gauche. Cela fait donc 20px.

Firefox va aller chercher 20px dans ses 600px, ce qui fera que l'on aura toujours 600px de largeur.

Au contraire, IE va ajouter 20px à ses 600, ce qui donnera 620px. Et si tu avais optimiser ton affichage pour une taille fixe sans prendre en compte cet élémént, tu as le bug que tu décris ci-dessus.

Pour le régler. Réduis la taille de ton conteneur par l'attribut (width).

PS : Je ne sais plus si c'est FF ou IE qui ajoute les margin. Donc ne me blamez pas si je me suis trompé.
Il y a aussi un bug avec IE, qui double le margin sur un float :
http://www.positioniseverything.net/explorer/doubled-margin.html (en)
Je te remercie pour ta réponse! je tente cela au plus vite et je tiens au courant.


EDIT -> Ok, la réduction de la largeur affiche parfaitement et au bon endroit le conteneur sous IE, mais maintenant, cest Firefox et Safai qui en patissent Smiley lol
Modifié par Tweek (21 Aug 2006 - 16:46)
Bon ca fonctionne plutot pas mal sous IE maintenant, mais cest Firefox et Safari qui n'affichent plus correctement à cause de la largeur trop fine... rhaaa Smiley bawling
tu peux définir des styles différents pour ie et firefox dans une même css. Tu peux utiliser !important

#style {width:200px;width 180px !important}


Le premier sera compris par tous les navigateurs, le deuxième ne sera pris en compte que par IE. Sachant qu'il arrive en dernier, IE le considérera comme prioritaire (même avant je crois que ça marcherait).

Mais cela ne rend plus valide la CSS.

Ensuite, on peut se tourner vers les hack de css.

  width: 180px;
 [b] voice-family: "\"}\"";
  voice-family:inherit;[/b]
  width: 200px;


Je ne suis pas expert donc :
http://openweb.eu.org/articles/dimensions_boites_css/
Sujet clos
Aller à