[Résolu] Probleme ie6

Sur mon site www.philouetcie.be/famille.php

La partie gauche (menu gauche) est décalée par rapport aux autres parties (haut de page et bas de page) sur ie6.

Le site contient un haut de page, un menu gauche (float:left), une partie centrale et un bas de page (clear:both).

Voici une partie du css :

body
{
	background-color: #cccccc;
	color: #000000;
	font-family: verdana, geneva, arial, sans-serif;
	font-size: 10px;
}

#hautdepage {
	background: #aaaaaa;
	margin: 5px 5px 0px 5px;
	height: 100px;
}

#menugauche {
	float: left;
	width: 150px;
	margin: 0px 5px 0px 5px; 
	padding: 10px; 
	padding-bottom: 80px;
	background: #aaaaaa;
	line-height: 0.8;
	 }

Si je supprime les margins du menugauche, ie explorer semble oter 10 px au lieu de 5 ....

Je cherche depuis un certain temps mais comme je suis débutant css.... je cale.

Quelqu'un aurait-il une idée?
Merci.
Modifié par philiper (23 Mar 2006 - 22:37)

Bonjour et bienvenue philiper,

merci de placer le code dans des balises [ code] ... [ /code] (sans les espaces) comme indiqué dans l'Aide et ce en éditant ton 1er message. Cela rendra le code plus lisible pour tout le monde

Felipe

Hello cher Philou...

Pour un affichage identique ie/ff:

changer le margin-right du div hautdepage à 10px au lieu de 5px.
changer le margin-right du div basdepage à 10px au lieu de 5px.
changer le margin-bottom du div menugauche à -5px.
Voilà !

PS :
-il faut éviter les font-size en pixels ce qui rend la taille du texte non modifiable par l'utilisateur.
-Il ya une faute de grammaire : "photos de Ses membres" (hé oui, quand je corrige, je corrige!)
Je supprimerai aussi la bordure du logo w3c

img {border:0px}

Ca marche?
Modifié par Ralfman68 (23 Mar 2006 - 04:32)

J'ai effectué les changements dont tu parlais mais le retrait du menu gauche reste le même....
De plus je pensais que ie respectait "mieux" le modèle des boîtes quand on utilisait le format xhtml 1.0 strict; mais ca ne semble pas être le cas?

Cependant :
- il n'y a plus de "zône" blanche entre le menu gauche et le bas de page, ce qui est déjà beaucoup mieux!
- le logo de W3C sans bordures rend évidement bien mieux.
- le font size a été modifié en %. Je me pose juste la question: Que se passe-t-il si l'utilisateur agrandi trop le font au niveau du menu?

Concernant ta remarque sur la grammaire, en employant CES membres, je veux insister sur le fait que ce sont des photos sur les membres de la famille en question (ces membres là).

Merci encore pour l'aide!

Hello , ah oui , c'est vrai je ne devrai pas travailler la nuit...il y a cependant une solution de dépannage provisoire:
détecter ie en php et insérer des css qui afficheront tes divs correctement :

  if (ereg("MSIE",  getenv("HTTP_USER_AGENT"))){echo '<style type="text/css"><!--	@import url(http://monsite/styleie.css); --></style>';  }

dans les css pour ie, met ça :

#hautdepage{margin:5px 10px 0px 10px}
#basdepage{margin:-1px 10px 5px 10px}

tu peux voir que ça s'affiche correctement
Je continue à chercher un solution lpus convenable...
Modifié par Ralfman68 (28 Nov 2007 - 22:30)

Testé sur mon site en local .....

Géant !

Seul petit problème qui me chifonne... Je ne comprend pas pourquoi Ie réagit de la sorte....

Une autre solution est probablement d'utiliser un problème IE du genre

/* \*/ 
margin: 5px 10px 0px 5px;
/* */

avec les marges valides pour Firefox et compagnie
mais c'est pas très joli joli !

Ce qui est frustrant c'est que CSS est censé représenter un standard et donc qu'il ne faille plus s'inquiéter du browser utilisé. Mais pour tout ce qui touche aux layouts, c'est loin d'être le cas.

A quand un internet 'standard'?
Modifié par philiper (23 Mar 2006 - 21:59)

C'est bon ! ! ! Tu peux te préparer à ajouter un [Résolu] au titre de ta question !

Ton site est en ligne => en cliquant ici<= et il s'affiche pareil sous ie et ffox. Je n'ai pas testé d'autre navigateur.

Il fallait procéder par élimination et réduire le probleme à fond. A la fin on se retrouve juste avec deux divs et il est plus facile de trouver l'erreur.
C'était un problème classique de marges et de padding.
Voilà la partie qu'il fallait modifier dans les css:

#hautdepage {
        margin: 0px 0px 0px 0px;
}
#menugauche {
        margin: 0px 0px -5px 0px;
}
#basdepage {
	margin: 0px 10px 5px 0px; 
}

C'est un methode beaucoup plus réglementaire que de recourir aux hacks...
Merci qui?
Modifié par Ralfman68 (23 Mar 2006 - 22:25)

Salut..

Il s'agit d'un bug d'IE (Doubled Float-Margin Bug) qu'il est possible de corriger par l'ajout d'un simple display: inline; :

#menugauche {
	display: inline;
	float: left;
/* + le reste des déclarations */ 
}

Avec cela, ça sera suffisant : IE donnera bien une marge de 5px et non du double. Pour en savoir plus : http://www.positioniseverything.net/explorer/doubled-margin.html

De toute façon, en cas de besoin (pas le cas ici), j'ai lu qu'il faut préférer le commentaire conditionnel à la solution de Ralfman, ne serait-ce que parce que c'est plus fiable.

Bonne soirée
Modifié par Alan (23 Mar 2006 - 22:29)

Salut Alan. J'ignorais cette façon de passer des commentaires conditionels, mais quelle est la méthode la plus judicieuse?
Simplifier les css de cette façon :

#hautdepage {
        margin: 0px 0px 0px 0px;
}
#menugauche {
        margin: 0px 0px -5px 0px;
}
#basdepage {
	margin: 0px 10px 5px 0px; 
}

ou garder des marges compliquées avec des chiffre inutiles et incitant à l'erreur du type :

#hautdepage  {
        margin: 5px 10px 0px 5px;
}
#menugauche {
        margin: 0px 5px -5px 5px;
}
#basdepage {
	margin: 0px 10px 5px 5px; 

}

et après il faudrait encore corriger ce charabia àl'aide un display:inline?
Modifié par Ralfman68 (23 Mar 2006 - 22:40)

Ben merci à tous les deux pour votre aide et le temps passé sur mon site!

Ralfman,

Quand je disais qu'il faut mieux préférer le commentaire conditionnel (dans les cas où l'on en a besoin) à la solution que tu as proposé, je faisais référence à la détection du navigateur.
Pour ce qui est de la simplification de la CSS, c'est effectivement préférable, mais de manière générale, pas seulement pour contourner un bug d'IE.

A+
Modifié par Alan (23 Mar 2006 - 22:59)

Pour une fois que je résouds un topic, faut pas venir me voler la vedette non plus !
Bonne Soirée!