bug background / border avec IE 6

da capo

abonné absent
Club iGen
12 Août 2001
17 460
3 595
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 padding, 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, 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
Un (#contenu) est en static : il prend la position centrale
Un dernier bloc (#ressource) est positionné en absolu (relativement au conteneur)

Les 4 derniers blocs 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)
 
Je crois que les !important ne sont pas compris par IE6. Essaye aussi de mettre une largeur à 100%. ;)

Je regarde ça.
Je vais peut-être tout passer en commentaires conditionnels pour en avoir le coeur net.

mais j'aimais bien le principe de !important car en effet une propriété définie avec !important prend le dessus.

.pourvoir{
padding: 5px !important; /* lu par les navigateurs évolués pas par IE6
padding:0; /* les navigateurs évolués n'en tiennent pas compte, IE6 si
/* remplacement du padding par une marge équivalente pour IE6 */
margin: 0 !important;
margin:5px;
}

Merci. A plus.
 
ah ben… ça ne marche pas mieux :/

j'ai transféré les adaptations pour IE dans une feuille de style spécifique appelée entre commentaires conditionnels… et rien de mieux.
 
Tu as regardé ce que ça donnait avec Firebug Lite?

une extension supplémentaire pour firefox ?… à voir.

Désolé mais je ne vois pas trop… :( Peut-être que c'est mieux de poser la question sur alsa… :siffle:

Oui, je crois que je vais m'y résoudre. A moins que quelques anciens quittent leur retraite. Et c'est pas gagné :nailbiting:

Ah mais qui sait, un esprit vif comme p4bl0* passera peut-être par là.




*la flatterie n'est qu'un outil au service de mon projet :siffle: je n'en pense pas moins :D
 
une extension supplémentaire pour firefox ?… à voir.

La version Lite c'est pour IE, Opera, etc. C'est juste un script à insérer dans la page à inspecter. ;)

La version non-lite est une extension pour Firefox, indispensable.

Oui, je crois que je vais m'y résoudre. A moins que quelques anciens quittent leur retraite. Et c'est pas gagné :nailbiting:

Si notre nouveau modo passe dans le coin, il devrait avoir une idée… ;)
 
Salut,

Concernant le h3, essaie de remplacer :
Bloc de code:
div#contenu h3 {
background-color:#9ACD34;
margin-top:5px;
}

Par
Bloc de code:
h3.TitleConteneur {
background-color:#9ACD34;
margin-top:5px;
}

et modifie tes h3 en conséquence (ajout de la classe).

Pour le h2, tu devrais regarder du coté du différentiel entre ton line-height, la taille de ta typo et la taille de ton border. Cet écart me semble trop faible.

Modifie, et dis nous ce qui en ressort.
 
merci fredmac, je vais tester ça demain matin.

Entre temps, j'ai fait plusieurs essais et il en ressort que le block ne veut pas de fond ni de bordure. En modifiant la valeur de la propriété display (dans la css pour ie) j'ai constaté que inline permettait de retrouver couleur de fond et bordure. par contre, (entre autres conséquences) les éléments s'alignent et ça c'est pas désiré…

bref, je cherche mais d'abord, dodo ;)
 
Comme on n'est jamais mieux servi que par soi-même et que la nuit porte conseil, voilà, j'en suis venu à bout.

D'abord, fredmac, je n'ai pas essayé avec une classe car je subodorais un pb de positionnement et mon test de ce matin m'a donné raison.

L'astuce consiste à ne pas laisse un positionnement "static" pour #contenu. (je passe cette modif dans une feuille que pour IE <=6)
En positionnant ce bloc de façon relative (position:relative), alors tout rentre dans l'ordre pour IE6 et IE5.5.
Voilà c'est tout.

Ou presque car, tout n'est pas si simple :

Si je positionne #contenu de façon relative, alors je dois fixer les valeurs des propriétés top et left.
Pour top je donne 0.
Mais pour left, alors que je pensais donner 12em (c'est à dire la largeur de #gauche positionné en absolu et ne devant pas influer sur les autres éléments) j'obtiens un doublement visuel de la marge.
Donc je me resouds à utiliser 0 comme si #gauche n'était pas positionné en absolu...
Je ne comprends pas moi...

Et vous ? Je serais heureux d'avoir un avis.

Bref, ça marche quand même ;)