Problème avec flottants sous IE

Bonjour,

J'essaie de reproduire cette page :

http://www.paris.fr/portail/Culture/Portal.lut?page_id=145

Pas de problèmes dans l'ensemble sauf avec le header.
Pour aller au coeur du problème j'ai considérablement simplifié la chose et je vous présente le code avec les images si vous avez le courage de tenter la résolution de ce souçi :

	<div id="logo_orange">	;
		<img src="signature.gif" alt="logo_paris.fr" />
		<img src="picto-u.gif" alt="picto" />
		<img src="logo_mdeparis.gif" alt="logo_mairie_de_paris" />	</div>
		
	<div id="div_header_a">
		<img src="header_a.jpg" alt="image_logo_2" /></div>
	
	<div id="div_header_b">&nbsp;</div>		

et le CSS :

	
body{
			margin:0;			
			padding:0;			
			overflow: auto;
}
div#logo_orange{	
			
			float:left;			
			width:140px; 
			height:107px;
			background-color:#ff7100;	
			line-height:0; /*pour supprimer l'espace entre le bas de l'image et le bord bas du div*/
}
div#div_header_a{	
			float:left;	
			line-height:0; /*pour supprimer l'espace entre le bas de l'img et le bord bas du div sur ff*/		
}
div#div_header_a img{				
			display:block; /*pour supprimer l'espace entre le bas de l'img et le bord bas du div sur ie*/
}
div#div_header_b{		
				
			width: 590px;		
			height:113px;					
			margin-left:425px;		
			background-color:blue;	
			
} 

Le problème est le suivant :

On a en gros trois blocs :

1- le logo orange (float:left) avec ses images à l'intérieur : pas de souçi apparent
2-l'image en tryptique (qui est en fait une seule image) en (float:left) : pas de souçi apparent
3-le gros bloc bleu qui normalement a une image dans le fond de 599px.

j'ai mis le body en overflow:auto (mais c'est pareil avec scroll).

Dans Firefox , ça marche. C'est à dire que ce bloc bleu reste bien à la suite des autres si je redimensionne (en 800*600 par exemple) . La scroll apparaît.

Par contre dans ie si je me mets en 800*600, le bloc tombe.

J'ai essayé plein de solutions mais visiblement pas la bonne et je suis à court d'idées.

Ci-joint les images.

merci pour vos idées ou remarques!



Voilà sous FF



et sous IE


Modifié par gauguin (22 Mar 2006 - 20:44)

Personne n'a d'idée là dessus?

Une semaine aux antilles tous frais payés avec bill gates pour celui qui a la réponse
Modifié par gauguin (22 Mar 2006 - 21:53)

Bonjour,

Pour essayer de donner une réponse, je dirais :

- que le scroll horizontal n'est pas charmant, il vaudrait mieux l'éviter
- que la bannière, de ce fait, est trop large
- que le problème pourrait être tout simplement résolu avec un header de la largeur de la bannière (soit trop large) avec les trois images (en une seule) déclarée en background du header plutot qu'insérées dans le code en float-left.

Car, en fait, je ne vois aucun élément réactif sur cette bannière( à part le logo qui peut être intégrer par dessus), il s'agit donc d'illustrations purement décoratives à mettre dans une css ...

En résumé, je ne m'y prendrais pas ainsi pour faire ce montage et il est difficile de voir le problème sans pouvoir tester la page de test dans sa globalité ...

Je reviens , pour illustrer la chose, avec la page complète à l'appui :

http://www.bunnylovershop.com/Paris/paris.htm

j'ai résolu le problème de la grande image de droite qui tombait sous IE quand je redimensionnais en 800*600.
Ceci en supprimant la taille du div dans lequel elle se trouve en background.

Le problème à présent est que du fait qu'il n'y aie plus de taille de précisée, la scroll bar n'apparait plus si on redimensionne et on perd donc une partie de la page.

je remets le code du header modifié :

	<div id="logo_orange">	
		<img src="signature.gif" alt="logo_paris.fr" />
		<img src="picto-u.gif" alt="picto" />
		<img src="logo_mdeparis.gif" alt="logo_mairie_de_paris" /> </div>
			
	<div id="div_header_a">
		<img src="header_a.jpg" alt="image_logo_2" /> </div> 
			
	<div id="div_header_b"></div>	
		
	
	<div id="header_c">
		<img src="header_c.jpg" alt="header_c" /></div>	
	
	
	<img style="margin-bottom: 15px;display:block;"   src="entete-u-small.gif" alt="logo_cult_paris.fr" width="215px;" height="17px;"/>	
	<div style="line-height:0; height:0; clear:left;"></div> <!--Bug IE-->

et le css

div#logo_orange{	
			float : left;
			width:140px;
			height:107px;			
			line-height:0;  /*pour supprimer l'espace entre le bas de l'image et le bord bas du div*/
			background-color:#ff7100;	
}
div#div_header_a{	
			float: left;
			line-height:0;/*pour supprimer l'espace ebtre le bas de l'img et le bord bas du div sur ff*/		
}
div#div_header_a img{

			display:block;/*pour supprimer l'espace ebtre le bas de l'img et le bord bas du div sur ie*/
}
div#div_header_b{
			/*width:599px; supprimée car fait tomber le header*/
			height:113px;	
			margin-left: 425px;					
			border-bottom:10px solid #2F2FB2;
			background-image:url(header_b.jpg);
			background-repeat:no-repeat;			
}


div#header_c{	
			clear:left;		
			float:left;		
			display:inline;	/*evite la double marge après un float sur ie*/
			width:285px;
			margin-left:140px;
			line-height:0;					
}
div#header_c img{

			display:block;
}

Si une solution vous vient.....
Modifié par gauguin (24 Mar 2006 - 22:40)