Problème IE et Chrome sur mon site

Bonjour à tous.

J'ai besoin de votre aide a tous pour résoudre un problème,

L'affichage est parfait sur Chrome et Firefox mais IE me pose un problème d'encastrement :

http://www.cadeul.ulaval.ca/mlu

ca fait une journée que je tourne et vire dans le css mais rien à faire, si vous avez une idée, merci beaucoup

Salut, as-tu testé sur IE en enlevant tes clear: both sur tes trois éléments du menu ? D'ailleurs quand on recharge la page sur IE, la mise en page est ok...

Je n'ai pas le temps de vérifier plus loin...
Modifié par Mabelle (05 Jan 2011 - 21:14)

bonjour,

probablement encore un defaut ou interprétation différente sur la fusion de marges.(je ne suis pas contre le positionnement absolu, mais c'est toujours en final plus compliqué que ça y parait ).

Les element de menu pourrait etre positionné en flottement plutôt que "scotché" en absolu et preservez ainsi le flux naturel des element. La differentiation d'interpretations des marges sera alors peu differentes sinon identiques en veilant a dégager correctement les flottants.

GC

Merci Nomade,

Voila j'ai changé en mettant des "float" plutôt que la "position absolute" a chaque bouton, cela fonctionne sur IE, FIREFOX et CHROME.

Mais comme vous pouvez voir entre chaque navigateur il y'a un problème de "margin-top" sur le gros bouton fonctionnement.

Depuis quelques heures j'essaye de mettre des "Hacks css" mais rien n'y fait.

Si quelqu'un à une idées merci !
Modifié par alexigor (05 Jan 2011 - 21:53)

alexigor a écrit :
Si quelqu'un à une idées merci les gars!

Attention, il y a des femmes aussi sur le forum...

Bonjour,

J'ai testé sous Chrome, FF et IE8, je n'arrive pas à voir de quel problème de "margin-top" tu veux parler.

La seule grosse différence que je vois est un espace énorme sous IE8 entre ton menu et ton bloc de contenu.

Pourrais tu envoyer une image du rendu final que tu souhaites ou dire sous quel navigateur le rendu te convient pour pouvoir cibler ce qui ne va pas.

bonsoir,

idem chez moi IE7/8 okay.

Par contre dans IE6, si tu veut le prendre en compte, il te faudrait ajouté un display:inline pour les elements flottants qui ont des marges pour ne pas doublé celle-ci (double-margin-bug), puis eventuellement proposé des gif en background ou gere les png via un filtre si tu tient a conservé les effets d'ombrage (IE6 disparais certes mais existe encore ). Au vue des pages du site, il y a quasi 3xnull a faire pour IE6.

Bonne continuation

GC

Enfaite le problème vient du bouton fonctionnement qui est décalé vers le bas de 4px sur chrome par rapport aux autres.

Pour l'énorme espace entre le menu du haut et la page sur IE, je vais essayer d'utiliser :

.ISIE67 #... {

}
mais c est pas gagné

Bonjour,

J'ai rapidement survoler ton CSS et HTML et je pense que ta logique de positionnement de tes éléments ne te permet pas d'avoir un rendu identique sur tous les navigateurs...

C'est ton bloc de recherche qui pose problème à mon avis. C'est dangereux de le placer comme cela car tu aura du mal à maitriser au pixel près le rendu de ton formulaire. Dans ton cas il suffit que le rendu de ton formulaire de recherche diffère d'un navigateur à l'autre, et inévitablement ça impliquera un décalage de ton 3ème bouton.

Je te conseil d'utiliser une structure comme indiqué ci dessous pour te permettre d'avoir des marges hautes et basses identiques sur tes boutons :

...
<div id="header">Ici ton logo + ton formulaire de recherche</div>
<div id="navigation">Ici ton menu</div>
...

Modifié par Spacedementia (08 Jan 2011 - 14:06)