28172 sujets

CSS et mise en forme, CSS3

Max-width & IE 7 [résolu]

Bonjour !

La page

Un problème sous IE (pour changer...) : le max-width n'a pas l'air de fonctionner correctement sur IE 7, j'ai fait pas mal d'essais et j'aimerais obtenir le même rendu que sous FF & safari : les dernières boites "box" s'écrasent sur IE 7 (elles flotent à gauche) au lieu d'aller à la ligne.

.box {
line-height: 1.2em;
float: left;
max-width: 418px;
border: 1px solid #137e78;
overflow: auto;
margin: 9px 6px 0 0;
padding: 6px 6px 0 0;
}

Modifié par ChrisG (21 Sep 2008 - 17:54)
Merci, j'ai déjà lu ceci, mais mon soucis concerne IE 7, j'espère que tu as compris que le lien que tu m'a envoyé est destiné à IE 6 !?
Modifié par ChrisG (20 Sep 2008 - 02:08)
a écrit :
Merci, j'ai déjà lu ceci, mais mon soucis concerne IE 7 ...


Oops ... désolé lu trop rapidement ton sujet ... Smiley confus
Hello,

As-tu essayer de forcer un position:relative au conteneur parent de tes boxs ?

Si ça ne marche pas, tu peux essayer aussi overflow:hidden, zoom:1, ou background:transparent qui sont les autres formules magiques pour débugguer IE6&7
Tymlis a écrit :
Hello,

As-tu essayer de forcer un position:relative au conteneur parent de tes boxs ?

Si ça ne marche pas, tu peux essayer aussi overflow:hidden, zoom:1, ou background:transparent qui sont les autres formules magiques pour débugguer IE6&7


Mon cher Watson j'ai essayé tout ça, rien ne marche Smiley biggol
Je vois bien à quoi servent tes suggestions à l'exception de "background:transparent" : à quoi ça sert ?

Si tu as une autre idée pour régler mon gros problème ?
Ta structure avec des <div class="box"> imbriqués me semble plutôt casse-gueule. Je distinguerais pour ma part le style pour les conteneurs et pour les contenus en utilisant des classes différentes.

Ensuite, il me semble que tes boites gardent toujours la même largeur quelle que soit la résolution (car elles ont toujours un contenu suffisamment important pour vouloir prendre une largeur supérieure au max-width). Dans ce cas, quel est l'intérêt du max-width? Un simple width ferait l'affaire.

En passant, tu utilises un Doctype XHTML 1.1 mais tu déclares tes contenus en text/html et pas en application/xhtml+xml. C'est pas un grand problème, mais bon c'est pas bien. Smiley smile La FAQ en parle: http://forum.alsacreations.com/faq/faq-42-Comment-bien-declarer-XHTML11-.html
Modifié par Florent V. (21 Sep 2008 - 15:57)
Florent V. a écrit :
Ta structure avec des <div class="box"> imbriqués me semble plutôt casse-gueule. Je distinguerais pour ma part le style pour les conteneurs et pour les contenus en utilisant des classes différentes.


C'est fait, j'ai différencié box & smallBox.

Florent V. a écrit :
Ensuite, il me semble que tes boites gardent toujours la même largeur quelle que soit la résolution (car elles ont toujours un contenu suffisamment important pour vouloir prendre une largeur supérieure au max-width). Dans ce cas, quel est l'intérêt du max-width? Un simple width ferait l'affaire.


Je vois oui, mais sinon pour une meilleure compréhension et anticipation, tu penses que le bug est connu ? tu vois comment le contourner ?

Florent V. a écrit :
En passant, tu utilises un Doctype XHTML 1.1 mais tu déclares tes contenus en text/html et pas en application/xhtml+xml. C'est pas un grand problème, mais bon c'est pas bien. Smiley smile La FAQ en parle: http://forum.alsacreations.com/faq/faq-42-Comment-bien-declarer-XHTML11-.html


Ok merci ! Je ne peux changer l'entête HTTP sinon j'ai lu que le site fonctionnera plus sur IE 6 (j'ai besoin de tester et d'apprendre dessus), sinon j'ai bien changé la balise meta.
ChrisG a écrit :
Je ne peux changer l'entête HTTP sinon j'ai lu que le site fonctionnera plus sur IE 6

C'est plutôt que tu devrais utiliser un Doctype XHTML 1.0 et pas 1.1. Le XHTML 1.0 peut être servi en "text/html" ou en "application/xhtml+xml". Bon, dans la pratique ça changera rien, hein. Smiley cligne
C'est bon ça roule !

J'ai *simplement* rajouté Smiley sweatdrop :


width: 100%;


à la boite .box qui a "max-width: 418px;" : résultat magique sur IE 7, les boites se comportent comme sur FF & safari, c.a.d qu'elles essaient de prendre le max. de longueur dispo dans la limite en place.
Modifié par ChrisG (21 Sep 2008 - 17:54)
À priori ce serait plutôt une différence dans la gestion des flottants qu'une différence portant sur max-width.
Florent V. a écrit :
À priori ce serait plutôt une différence dans la gestion des flottants qu'une différence portant sur max-width.


Tu sembles mieux le savoir que moi Smiley lol
Florent V. a écrit :

C'est plutôt que tu devrais utiliser un Doctype XHTML 1.0 et pas 1.1. Le XHTML 1.0 peut être servi en "text/html" ou en "application/xhtml+xml". Bon, dans la pratique ça changera rien, hein. Smiley cligne


Tu me tentes pour changer le doctype en XHTML 1.0.

Avant de le faire tu penses que l'interprétation des styles CSS est différent sur les navigateurs selon que la page soit déclarée en 1.0 ou en 1.1 ?
Sujet clos
Aller à