Marge négative IE8

Bonjour, je demande un petit coup de main aux experts qui passerait par là, car je n'arrive pas à comprendre la logique et donc à atteindre mon but.

J'essai de faire passer un bloc sous un autre avec une marge négative.
Je n'ai pas de souci dans FF chrome, safari ou IE7

par contre IE8 me pose souci .. (IE9 je ne sais pas je n'ai pas de quoi vérifier )

Vous pouvez voir le problème online sur
http://www.passerelleco.info/

le div bloc_ssmenu devrait passer sous le bloc_menu.

J'ai déjà tester de mettre un z-index et une position relative au 2 bloc sans que cela change quoi que ce soit.

Quelqun vois d'ou pourrait venir l'absence d'interprétation de la marge négative dans IE8
(alors que si je le passe en mode I7 c'est bon, alors même que je croyais que c'était IE7 qui posais des souci avec les marges négatives .)

Cordialement.
Casp

Bonjour,

A vrai dire, la question à se poser n'est pas "pourquoi ça marche pas sous IE", mais "pourquoi ça marche sur FF, chrome, ... ?!" oO

Je te conseille de retirer le width:100% que tu as appliqué sur "bloc_ssmenu".
Comme il venait là pour cacher la misère à cause d'un float:left pas réinitialisé (#menu), retirer le width:100% va aligner ton "bloc_ssmenu" à droite du menu. (complètement normal)

A partir de là, il y a moyen de reprendre proprement :
D'une : Je te conseillerai de retirer la propriété "float" de ton "#menu", et remplacer par un display:inline-block.
Et de deux : Retirer ce height:40px; de "bloc_menu", qui deviendra inutile, à priori.

Bien sur, tu auras des adaptations à faire pour retrouver le design d'origine, mais tu verras, ce sera beaucoup plus gérable et adapté !
Modifié par Nigel (31 May 2011 - 13:50)

Merci pour ta réponse, mais euh..
Je ne suis pas sûr de te suivre ?

Peux être aussi n'as tu pas vu que le site était fluide ?
c'est pour cela que les bloc sont en 100% je l'ai retiré mais de toute façon il l'hérite de son parent.

Pour le float left il se justifiait pour le div "menu_bord"
petit élement graphique refermant le menu.

J'ai mis un inline bloc
Mais cela crée un décalage entre le menu et le menu_bord.

Cependant je peux alors mettre une marge-left négative sur menu_bord et les choses rentre dans l'ordre.

Ainsi effectivement , en rajoutant denouveau la position relative pour "menu_bloc" et "ssmenu_bloc" les chose vont bien sur IE8 et FF

En revanche maintenant dans IE7 c'est la Cata...
Le "ssmenu_bloc" remonte bien en marge négative. Mais il passe par dessus le "menu-bloc.
Et je ne peux pas rajouter de z-index sinon dans IE8 et FF la marge négative n'est plus prise en compte .. (d'ailleurs je ne comprend pas pourquoi)

Et deuxième problème
inline bloc n'est pas prix en compte par IE7 et il étend donc mon bloc menu à 100% chose que je ne veux pas.


Peux être devrais je laisser comme cela et faire une feuille de style spécifique pour IE7 reprenant mon organisation préccédente avec float-left.

Désolé, je reviens un peu plus tard sur ta réponse.

...Et bien tu m'as bien suivi !
J'ai bien vu que le site était fluide, bien sur. Mais je pense que tu confonds deux choses :

- width: 100% : Valeur forçant la largeur d'un élément à 100%. Attention, les padding, margin, et border s'ajoutent à la valeur !
- width: auto : Valeur par défaut d'un élément de type block, la largeur prend toute la place disponible que le parent peut lui attribuer, c'est la valeur préférée des sites fluides. Mais je pense que tu as dû le remarquer en retirant le width:100% comme je t'ai conseillé.

Oui je comprend ton besoin de float:left pour le "menu_bord", ce petit élément n'est techniquement pas idéal mais on va passer. Au lieu de le floatter, tu peux appliquer un display:inline-block de la même façon que son frêre "#menu".

Pour le problème de décalage des éléments de type inline-block, il faut savoir que la propriété "vertical-align" permet de les aligner verticalement ENTRE EUX. C'est tout benef' !
Là où il est impossible d'aligner verticalement des éléments floatté, inline-block offre cette possibilité.

Bien sur, inline-block n'est pas complètement compris par IE6 et 7. Pour pallier à ce problème, rien de plus simple : Une feuille de style en commentaires conditionnels.
Puis, y spécifier :

.classe {
display:inline;
zoom:1;
}

Cela remplacera display:inline-block pour les anciennes version d'IE. Normalement, c'est la seule chose qui devrait différer pour IE.