[Résolu] Problème IE: Espace indésirable

Bonjour,

J'essai de mettre en page un design tout récemment fait, mais je bloque sur un problème d'espace indésirable sous IE (sous firefox tout marche très bien).

Voici la page: http://bricosign.free.fr/xeki/index.html

Le problème se situe au niveau de la barre verte, sous IE, il y a un espace entre cette barre et les boutons.

Voici le code CSS correspondant à la barre verte (fichier complet à cette adresse: http://bricosign.free.fr/xeki/css/styles.css):

#barre_vide
{
        height: 22px;
	border: 1px solid #5B9A04;
	border-left-color: #84E500;
	border-top-color: #84E500;
	margin-right: 228px;
	margin-left: 337px;
	background: #77C808;
}

Mais le problème c'est que sous IE, il y a une sorte de marge entre les boutons et cette barre verte, si je ne met pas

	margin-right: 228px;
	margin-left: 337px;

il y a quand même une marge entre les boutons et la barre, alors que sous firefox la barre passe sous les boutons.

Bonne journée.

Rémi
Modifié par *|~ XiKuXan ~|* (17 Apr 2006 - 14:19)

Salut,

Crée une feuille de style spécifique IE, corrigeant le problème, et inclus la à l'aide d'un commentaire conditionnel.

(Oui je sais, je me répète )

Oui mais même avec une feuille de style spéciale IE, je ne saurais pas comment enlever cette marge...

*|~ XiKuXan ~|* a écrit :
Oui mais même avec une feuille de style spéciale IE, je ne saurais pas comment enlever cette marge...

Bonjour,

Connais-tu la FAQ:
Qu'est-ce que les commentaires conditionnels ?

Oui mais je n'arrive tout simplement pas à mettre cette barre sans marge sous IE. Vu que je ne sais pas comment faire je ne peux pas écrire de feuille de style pour IE.

Salut,

Sans commentaire conditionnel ni feuille de style pour IE, tu peux simplement remplacer dans #barre_vide le height: 22px; par un padding-top: 22px;

Et dans ul#header_menu li, il serait mieux de remplacer le height par un line-height de même valeur (le texte serait bien centré et ça éviterait des différences pour IE 5.X)

(dans le cas tu voudrais ajouter du texte dans #barre_vide, remplacer le padding-top par line-height. Mais d'après le nom de l'ID, ça ne sera pas le cas )
Modifié par Alan (17 Apr 2006 - 13:09)

Salut

Rajoute

<li>&nbsp;</li>

a la fin de ta liste header_menu

et supprime ton div

Ok sous IE6, NS7, FF1.5

A+
Modifié par gege71 (17 Apr 2006 - 13:47)

gege71 > Le problème avec cette solution est que sans style il y aura une des entrées de la liste de vide...

Alan > Merci beaucoup ça marche à merveille.

gege71 a écrit :

<li>&nbsp;</li>

hum... pas très propre cette solution tout comme mettre des éléments vides:

<div id="barre_vide"></div>

Procéder ainsi sans contenu véritable en procédant par ajustements "cosmétiques" successifs, ne me dit rien qui vaille quant à la pérenité d'une telle mise en page.

Il serait mieux de penser la globalité de la page que de procédé ainsi. Enfin ce que j'en dis.
Modifié par Igor (17 Apr 2006 - 14:28)