[Résolu] Bug sur IE <=6 avec background et border.

Bonjour à tous.

Je travaille sur une maquette et je recontre des difficultés avec IE6.

Jusque là, rien que du très courant : pb avec les paddings, pb avec le positionnement absolu / conteneur positionné en relatif etc.

Bref, je m'en sortais plutôt honorablement (je crois).

Mais, maintenant j'ai un comportement que je n'arrive pas à gérer. J'ai beau tourner et retourner ma feuille de style dans tous les sens, j'ai beau chercher sur le web et ici aussi, je ne trouve pas de solution.

En fait, j'ai plusieurs blocs (div).
Un (#bandeau) est positionné "normalement" (static)
Un conteneur est positionné en relatif.
Deux (#gauche #droite) sont positionnés de façon absolue avec une largeur fixe
Un (#contenu) est en static : il prend la position centrale et s'adapte en largeur.
Un dernier bloc (#ressource) est positionné en absolu (bas gauche relativement au conteneur)
(plus deux blocs hors conteneur pour le pied)
Les 4 derniers blocs (#gauche, #droite, #contenu, #ressources) utilisent des balises h2 stylées de façon semblable.
Les blocs #droite et #contenu utilisent des balises h3 stylées de façon quasi semblable (seule la couleur d'arrière plan diffère)

Or, toutes les nuances sont prises en comptes par tous les navigateurs, sauf par IE6 qui fait des siennes dans le bloc #contenu :
- il n'affiche pas la bordure inférieure sur h2
- il ne tient pas compte de la couleur d'arrière-plan pour h3 du tout (ni celle définie par défaut sur h3, ni celle définie pour h3 dans ce bloc)

Tout cela est visible à cette adresse

nb : je mets des images pour que cela soit plus parlant (safari, IE7, firefox et le maudit IE6)

Modifié par da capo (28 Nov 2008 - 12:02)

Euh, au fait, merci par avance


PS : pour dernière précision le positionnement global reprend -il me semble- le modèle 9 des gabarits présentés sur ce site


PS 2: En modifiant le mode d'affichage des éléments h2 et h3 (forcés à display:inline) dans le bloc #contenu, je retrouve la couleur de fond, la bordure mais je perds les marges et surtout h2 et h3 sont maintenant alignés et non plus l'un au dessus de l'autre
Ceci dit, ça avance… oui, bon. je reste optimiste.
Modifié par da capo (26 Nov 2008 - 23:46)

Comme on n'est jamais mieux servi que par soi-même et que la nuit porte conseil, voilà, j'en suis venu à bout.

l'astuce tient dans la modification du positionnement de #contenu.
en positionnant ce bloc de façon relative (position:relative), alors tout rentre dans l'ordre pour IE6 et IE5.5.

Une petite question encore : en positionnant de façon relative, je dois fixer top et left.
pour top je donne 0, normal.
mais pour left, je pensais donner 12em c'est à dire la largeur de #gauche positionné en absolu et ne devant pas influer sur les autres éléments.
Or, non, je dois utiliser 0 aussi comme si #gauche n'était pas positionné en absolu... comprends pas moi...

Si jamais un spécialiste passe par là, je serais heureux d'avoir un avis.

Amicalement

da capo.

Salut,

c'était probablement un problème de hasLayout, si position: relative a remis les choses en ordre. Je dois dire que je ne me rappelle pas avoir déjà vu ce bug.

a écrit :
Une petite question encore : en positionnant de façon relative, je dois fixer top et left.

Pas forcément. Si tu déclares un élément en position relative sans toucher aux propriétés top, left, bottom ou right, il ne bougera pas d'un poil.

Les éléments en relatif conservent leur position dans le flux du document (autrement dit, l'espace qu'ils occuperaient s'ils étaient en position static reste réservé). La différence, c'est qu'on peut ensuite préciser un décalage par rapport à l'emplacement "naturel" de l'élément.

Donc, si l'élément était déjà correctement placé avant de passer en position relative, il n'y a pas de raison qu'il en soit autrement après.
Modifié par Thomas D. (27 Nov 2008 - 13:46)

En effet, il y a un souci de layout.
Il a été détecté lorsque j'ai voulu placer un bloc en position absolue (bas gauche) dans le conteneur. le conteneur devait donc être positionné en relatif.
Mais IE6 et précédents ne digèrent pas bien.
J'ai donc affecté la classe ielayout à #conteneur pour permettre le placement via un commentaire conditionnel.
------- feuille de style pour ie6 et précédents ------
.ie_layout {
height: 0;
he\ight: auto;
zoom: 1;
}
---------------------------------------------

A ce moment là, les blocs h2 et h3 de #contenu n'ont plus accepté de fond ni de bordure.

Après quelques recherches et essai, j'ai (toujours pour IE lte 6) mis #contenu en relatif aussi.

Donc, retour des fond et bordures mais alors que #gauche est en absolu, il influe sur le positionnement de #contenu donc j'ai du annuler la marge gauche.
C'est ça que je ne comprends pas.

Enfin, en retrouvant mes fonds/bordures sur h2 et h3 dans #contenu, j'ai perdu l'affichage des images placées en float:left à l'intérieur de #contenu pour permettre l'habillage du texte. Les emplacements étaient matérialisés, mais blancs...
En mettant une très grosse marge gauche à l'image flottante, alors elle devenait visible mais à l'extérieur de #contenu...

J'ai alors "doublé" le bloc :

<div id="contenu">
<div id="special">
[ code ... ... ...]
</div>
</div>

dans la feuille normale #special n'est pas décrit.

dans la feuille pour IE lte 6, #special est en static avec une largeur égale à 100%.

Tout fonctionne maintenant, mais ça me dépasse un peu ces histoires là...

Bonjour,

hasLayout dépasse pas mal de monde. On s'habitue à certaines conséquences (de son absence dans IE6) mais il arrive d'avoir de nouvelles surprises

Sinon ton titre est IE<6 ce qui n'est pas IE lte 6, ce serait IE<=6 m'enfin on aura rectifié

La référence dans les bugs d'IE6 est le site Position Is Everything mais la navigation est pénible

Felipe a écrit :
Bonjour,

hasLayout dépasse pas mal de monde. On s'habitue à certaines conséquences (de son absence dans IE6) mais il arrive d'avoir de nouvelles surprises

hmmm, fallait que ça tombre sur moi

Felipe a écrit :
Sinon ton titre est IE<6 ce qui n'est pas IE lte 6, ce serait IE<=6 m'enfin on aura rectifié

C'est corrigé. En fait, habitué à vBulletin de par mes contributions régulières sur un autre forum (macgénération) j'étais un peu perdu. Je n'imaginais pas pouvoir éditer mon premier message après autant de temps.

Felipe a écrit :
La référence dans les bugs d'IE6 est le site Position Is Everything mais la navigation est pénible

Merci pour l'info. Cela me fait de la lecture pour les longues soirées à venir.

Et merci pour l'accueil et l'intérêt porté à mes petits messages.