Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Css, en galére avec ie qui me met des espaces

Dernière réponse le 3 jui 2008 à 10:07:26 vhellers, le 8 jan 2007 à 21:49:06

Signaler ce message aux modérateurs

Salut,

Je viens de me faire une interface en utilisant les div et ccs, mais je rencontre un vilain problème d'affichage sur ie (j'ai un autre pb sur firefox mais moins important).

Voici les captures, on comprend tout de suite que le problème ce sont ces fichus espacements (le bloc en rouge c'est pour mieux voir les pb, je changerai la couleur plus tard) :

FIREFOX :

http://virgile06.free.fr/divers/div_firefox.gif

IE avec les espacements de malheurs:

http://virgile06.free.fr/divers/div_ie.gif

CSS :

html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

.conteneurgauche {
	background-image: url(images/espace_menu.jpg);
	background-repeat: repeat-y;
	float: left;
	width: 227px;
	background-color: #00FF00;
	height: 100%;
}

.conteneurdroit {
	background-color: #FF0000;
	width: auto;
	margin-left: 227px;
	height: 100%;
}
.sousconteneurgauche {
	background-image:url(images/voute.jpg);
	margin-top: 0px;
	background-repeat: no-repeat;
	height: 100%;
}
.bandeau {
	background-image: url(images/fond_r_chez_nine.jpg);
	float: left;
	width: 531px;
	height: 113px;
}

.suitebandeau {
	margin-left: 531px;
	background-image: url(images/fond_bandeau.jpg);
	width: auto;
	height: 113px;

}
.menu {
	margin-top: 150px;
	position:absolute;
}
.menuhorizontal {
	background-image: url(images/fond_menu_hor.jpg);
	width: auto;
	height: 29px;

}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 10px;

}

HTML

<body>

	<div class="conteneurgauche">
      <div class="sousconteneurgauche">
  		<div class="menu">...ici mon menu vertical</div>
	  </div>
	</div>
	
	<div class="conteneurdroit">
	  <div class="bandeau"></div>	  
	  <div class="suitebandeau"></div>
	 <div class="menuhorizontal"><center>...ici mon menu horizontal</center></div>
	</div>

</body>
</html>

D'avance merci pour votre aide et bonne année!

Configuration: Windows XP
Firefox 2.0.0.1

Meilleures réponses pour « Css, en galére avec ie qui me met des espaces » dans :

Problème css firefox - IE différent (Résolu) Voir

Problème h1 et CSS avec IE Voir

[CSS] Pb compatibilité IE <-> Mozilla Voir

Espace en HTML VoirEn HTML, les espaces consécutifs sont ignorés par les navigateurs, au même titre que les retours chariots ou les tabulations. Pour insérer plusieurs espaces consécutifs, il est nécessaire d'utiliser une entité HTML spécifique, appelée espace...

Les CSS !!! IE!=FireFox (Résolu) Voir

Css, float et IE Voir

Menu déroulant / CSS sous Firefox / IE Voir

CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...

Posez votre question Répondre

zutalors, le 9 jan 2007 à 09:56:56

Merci, bonne année à toi aussi ;)

ce qu'il faudrait que tu fasses, c'est placer ta div :

<div class="conteneurgauche">

à l'intérieur de ta div :

<div class="conteneurdroit">

dans le html
soit :

<div class="conteneurdroit">
	<div class="conteneurgauche">
		<div class="sousconteneurgauche">
			<div class="menu">...ici mon menu vertical</div>
		</div>
	</div>
	<div class="bandeau"></div>	  
	<div class="suitebandeau"></div>
	<div class="menuhorizontal"><center>...ici mon menu horizontal</center></div>
</div>

et enlever :

margin-left: 227px;

dans le css de :

.conteneurdroit

j'ai testé, ça devrait marcher :)

Répondre à zutalors

vhellers, le 9 jan 2007 à 11:07:38

Salut,

Merci beaucoup pour ton aide, j'ai l'impression que ça marche...presque :

j'ai fait ce que tu m'as conseillé :

	<div class="conteneurdroit">
		<div class="conteneurgauche">
      		<div class="sousconteneurgauche">
  				<div class="menu"></div>
			  </div>
		</div>
		<div class="suitebandeau">
			<div class="bandeau"></div>
		</div>
		<div class="menuhorizontal">
		</div>
		<div class="contenu"></div>	
	</div>

Comme tu peux le voir j'ai également supprimé l'espace dans le bandeau avec la même idée.

Toutefois, il me reste un espace qui semble être d'un autre ordre désormais puisque le conteneur droit est bien coller au gauche maintenant, mais son contenu, les bandeaux, eux laisse un espace sur ie :

http://virgile06.free.fr/divers/div_ie2.gif

firefox :

http://virgile06.free.fr/divers/div_firefox2.gif

Là non plus je trouve pas comment supprimer ce malheureux espace.

Ma Css nouvelle version :

html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

.conteneurgauche {
	background-image: url(images/espace_menu.jpg);
	background-repeat: repeat-y;
	float: left;
	width: 227px;
	background-color: #00FF00;
	height: 100%;
}

.conteneurdroit {
	width: auto;
	height: 100%;
	background-color: #FF0000;
}
.sousconteneurgauche {
	background-image:url(images/voute.jpg);
	margin-top: 0px;
	background-repeat: no-repeat;
	height: 100%;
}
.bandeau {
	background-image: url(images/fond_r_chez_nine.jpg);
	float: left;
	width: 531px;
	height: 113px;
}

.suitebandeau {
	background-image: url(images/fond_bandeau.jpg);
	width: auto;
	height: 113px;

}
.menu {
	margin-top: 150px;
	position:absolute;
}
.menuhorizontal {
	background-image: url(images/fond_menu_hor.jpg);
	width: auto;
	height: 29px;

}
.contenu {
	width: auto;
	height: 100%;
	background-color: #0000FF;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 10px;

}

C'est un véritable complot ces différences de réactions des deux navigateurs !

D'avance merci pour votre aide.

Répondre à vhellers

zutalors, le 9 jan 2007 à 13:20:39

Lol :D

as-tu mis ton travail en ligne que je puisse me rendre compte avec les images stp ?

Répondre à zutalors

vhellers, le 9 jan 2007 à 14:42:39

Salut,

J'ai tout repris du départ en construisant en ligne sans utiliser les 100% de la hauteur.

http://virgile06.free.fr/divers/chezNous/test.html

Cette fois ça passe bien sous les deux navigateurs.

Seul bémol, le fond du conteneur général qui se répète en y sous le menu ne se répète pas dans Firefox >alors non il se répéte mais seulement sur la taille de l'écran visible au départ.

Merci de ton aide.

Répondre à vhellers

zutalors, le 10 jan 2007 à 12:39:17

Ok, ça faisait longtemps que je n'avais pas fait de css, donc, j'ai mis un moment à trouver, mais voilà la solution :

tu enlèves :

	height: 100%;
	width: auto;

dans le css de :

.page

et dans le html, tu places :

<div class="page">

devant :

<div class="centre_contenu">

et ça devrait aller sur les 2 navigateurs ;)

Répondre à zutalors

sikko, le 3 jui 2008 à 10:07:26

Merci zutalors

Répondre à sikko

Posez votre question Répondre