[Résolu] Bug IE 7 (Colonne qui disparait)

Bonjour à tous !

Je suis en train de créer un projet de site et je me heurte à notre très cher IE7...

http://www.photollivier.com

Allez voir le site avec Firefox puis avec IE7 et vous remarquerez la disparition de la colonne de droite... ennuyeux !

Je cherche la solution mais je ne trouve pas !

Je précise que le squelette de mon site à été crée avec YAML Builder...

Ma colonne de droite est déclarée comme cela :

Code HTML :

<div id="col3">
<div id="col3_content" class="clearfix">
<p>blah blah blah</p>
</div>
</div>

EDIT : j'avais oublié le "clearfix"

Code CSS :

#col3 {
margin:0 0 0 70%;
width:auto; /*J'ai essayé 250px, pareil !*/
}

#col3_content {
padding:0 20px 0 10px;
}

#col1_content, #col2_content, #col3_content {
position:relative;
}

.clearfix {
display:block;
}

Voila... l'enfer de la compatibilité internavigateurs !

Merci de m'aider !
Modifié par Ollivier (12 Mar 2009 - 08:36)

Bonjour,

je te laisse faire une recherche sur Alsacreations sur hasLayout et zoom: 1;

Merci.

Alors j'ai lu plusieurs topics j'ai fait quelque essais mais je ne trouve toujours pas la solution. En fait, je suis dans le flou, je ne sais pas réellement dans quelle direction chercher... le "zoom:1" me parait improbable et le "hasLayout" ne donne rien. Mais j'ai peut-être pas rentrer les bonnes valeurs...

est-ce que, dans mon code (généré par YAML), ce problème de hasLayout doit normalement être réglé avec la classe clearfix ?

Pourrais tu être plus spécifique s'il te plait ?
Modifié par Ollivier (26 Feb 2009 - 15:20)

Re,

HasLayout et bugs de rendu dans Internet Explorer 6-7 :

a écrit :
Dans certains contextes, un élément ne s'affichera correctement que s'il a le layout.

a écrit :
Un élément obtient le layout lorsque l'on lui affecte certaines propriétés CSS. Les plus courantes sont les propriétés CSS width (avec toute valeur autre que auto) [...]

Modifié par BeliG (26 Feb 2009 - 15:32)

Ok, ça marche... merci beaucoup !

Juste une dernière question, je pense que c'est lié :

COmme vous pouvez le voir sur l'image suivante, l'espace séparant le titre H3 du bord de la "page" n'est pas le même sous IE7 et firefox, c'est la seule disparité que j'ai à l'heure actuelle sur ce site, d'où cela peut t-il venir ?

http://img10.imageshack.us/img10/6103/largeur.th.png

Merci beaucoup.
Modifié par Ollivier (26 Feb 2009 - 15:48)

bonjour,
<edit> voir plus bas pour le h3 </edit>
le haslayout est plein de mystere et d'effet parfois surprenant.

Tu as de nombreuse imbrication et des elements avec et sans layout , ainsi que du positionement relatif . Tout ça mélanger peut-etre "explosif" dans IE .

il peut y avoir 2 methodes :
la premiere , a l'aveugle et casse gueule : partir du plus haut parent , descendre dans l'arborescence et activé le layout aux element qui s'imbriquent ....

la seconde , rechercher le parent direct des éléments qui ne s'affiche pas et observer si un positionnement relatif est appliqué. Si c'est le cas et que le layout n'est pas 'activé' , il y a de grande chance que les éléments soit effectivement invisible .

2 options reste (pour IE7 toujours ):
- activé le layout conjointement au positionnement relatif ./* haslayout = zone d'affichage bien determiné */
- se défaire du positionnement relatif inapplicable faute d'"haslayout" .

Dans IE , le positionement relatif 'cloisonne' l'element et peut apporter d'autre effets secondaires, et tout les elements enfants qu'il peut contenir ne sont visible qu'a l'interieur de sa zone d'affichage , sans layout , ce comportement s'applique mais IE n'arrive pas a determiné cette zone .

Par précaution , j'opterais pour la seconde option , pas de layout ni de positionement relatif:).

GC

<edit>
Le h3 est doté de layout ( le width:100%;) marge et padding sont appliquées </edit>

GC
Modifié par gcyrillus (26 Feb 2009 - 15:58)

J'ai essayé de mettre cette config sur mon H3 mais le décalage reste le même...

h3 {
position:relative;
width:245px;
}

Est-ce que ce décalage ne serait pas provoqué par mon #col3 & mon #col3_content ?

Merci...

Salut voisin

Il y a pas mal d'imbrications complexes dans ta colonne 3, aussi un float left sur ta class box qui ma foi n'a pas grand intérêt
sinon plutôt que de donner un width fixe à tes <h3> tente un width: auto ce qui t'évitera de calculer tes multiples padding et peut être te règlera ton décalage.

à l'origine c'était en auto !

Tu la verrais comment, toi, ma classe .box ? j'ai repris cette config d'un autre site, ou d'un template gratuit je me rappelle plus...

EDIT : et je rappelle que le squelette à été créé avec YAML Builder, donc c'est "lui" qui est responsable de #col3 et de #col3_content, mais pas ce qu'il y a à l'intérieur...

merci.
Modifié par Ollivier (27 Feb 2009 - 09:18)

bonsoir/bonjour

je t'avais proposé de te defaire du width:220px et du position:relative; sur

<div id="col3_content" class="clearfix" >

car ici , le layout (width) efface l'effet secondaire du position:relative; (contenu invisible et hors champs).
Si le positionnement relatif n'est pas nécessaire au déplacement a l'écran de ton élément , ou qu'il ne te sert pas a positionné un élément enfant en absolue a un endroit précis a l'intérieur de celui-ci , ces 2 règles te sont inutiles .

Quand au h3 , en le laissant en width:auto , il reprenait bien sa place ... pas en fonction du teaser(image d'entete) , mais dans l'alignement des contenus qui le suivent.

Le décalage que tu perçoit encore maintenant est celui de l'élément

<div class="boxe">

qui se trouve doté de layout par son width:250px; et son float:left;

Comme je te l'ai dit dans mon dernier post et comme ghost te le répète , tes multiples padding et margin s'ajoutent aux largeurs que tu donnes aux différents éléments .
Le parent col3 est fixé a 250px de largeur , sans padding
l'enfant parent est fixé a 220 px et des padding latéraux égale a 30px

jusque la tout va bien .

Puis : .boxe est fixé a 250px de largeur ... il manque déjà 30 px vu que le parent est a 220px de largeur , a cela tu ajoute un padding a droite de 5 px , .boxe fait donc 255px de large dans un parents qui ne lui alloue que 220px.
du coup , IE6 lui va laisser s'élargir les conteneurs trop petit et faire passer cette colonne au dessous de ton contenu , IE7 va tenter de compresser tout ça au mieux et Firefox va aussi gérer ça comme il peut.

Entre des comportements différents ou surprenant du au layout , et quelques incohérence dans les règles de style que tu fournie il n'est pas possible d'obtenir un résultat stable et encore moins similaire d'un navigateur a un autre .

Je te suggère de reprendre au moins tes marges internes , et éventuellement ne les appliqué que sur les contenues eux même ,
h3 , form , p ...

Ensuite , si besoin , s'attaquer gentiment au différences qui ne sont pas "frappantes" .

GC
Modifié par gcyrillus (28 Feb 2009 - 00:11)

Bon, j'ai rechangé quelque trucs, le comportement est meilleur mais y'a toujours une disparité entre IE7 et firefox...

Mais je remis le maximum de chose en auto afin d'éviter trop de calculs...

Bonjour

En effet , cela passe beaucoup mieux , en particulier dans IE6 .

Pour les différences , je n'en voit personnellement peu .

Les différences que je relève sont spécifiques au niveau des éléments de formulaires , ainsi que leur police d'affichage qui diffère (mon IE7 et mon ff3 n'ont pas les mêmes polices par défauts).

Je ne remarque rien d'autre qui mériterait une attention particulière .

GC