Problème d'espace sur IE 6, 5.5 et float:left

Question

Sgtcook

26 May 2007 à 21:29

Bonjour,

J'ai un problème d'espacement et de float:left sur IE 6 ou IE 5.5 mais sur firefox et IE 7.0 tout fonctionne normalement.

Sur IE 6.0-5.5

#J'ai des espacement entre des DIV ( J'ai essayé de mettre padding:0px et margin:0px; mais cela ne change rien ).

#La plupart des mes float:left ne marche pas.

URL test : http://www.pascalandreallaire.com/tmp/index.php

####################################################

Structure du site ( html )

<body>
<div id="container">
  <div id="header"></div>
  <!-- fin div header -->
  <div id="content">
    <h2>Bienvenue</h2>
    <p>Vous &ecirc;tes pr&eacute;sentement sur mon portfolio (Pascal-Andr&eacute; Allaire). Le site est actuellement en refonte, la version 2.0 de mon site sera sous peu en ligne.</p>
    <br/>
    <ul>
      <li>Pascal-Andr&eacute; Allaire</li>
      <li><a href="mailto:allaire.pascalandre@hotmail.com">allaire.pascalandre@hotmail.com</a></li>
      <li>(450) 656-0911</li>
      <li>(514) 298-5254</li>
      <li><a href="../contenu/cv/cv.html">CV</a></li>
    </ul>
    <h3>© Pascal-Andr&eacute; Allaire, Tous droits réservés.</h3>
  </div>
  <!-- fin div content -->
  <div id="footer">&nbsp;</div>
  <!-- fin div footer -->
</div>
<!-- fin div container -->
</body>

###################################################

CODE CSS :

body
{
	padding:0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;
	background-color:#d4d392;
	font-size:100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#container
{
	position:relative;
    margin-left: auto;
    margin-right: auto;
    width:729px;
    text-align: left;
	margin-top:10px;
}

/********************************** Début DIV header ******************************/

#header
{
	width:729px;
	height:6px;
	padding:0px;
	margin:0px;
	background-image:url(../img/content/site/header.gif);
	background-repeat:no-repeat;
	background-color:#66FF00;
}

/********************************** Fin DIV header ******************************/


/********************************** Début DIV menu_logo ******************************/
#menu_logo
{
	width:729px;
	height:119px;
	padding:0px;
	margin:0px;
}

		#gauche_logo
		{
			width:7px;
			height:119px;
			float:left;
			background-image:url(../img/content/site/gauche_logo.gif);
			background-repeat:no-repeat;
			padding:0px;
			margin:0px;
		}
		
		#logo
		{
			width:196px;
			height:119px;
			float:left;
			background-image:url(../img/content/site/logo.gif);
			background-repeat:no-repeat;
		}
		
		#menu
		{
			width:512px;
			height:119px;
			float:left;
			background-image:url(../img/content/site/droite_logo.gif);
			background-repeat:no-repeat;
		}
		
		#menu ul
		{
			text-decoration:none;
			list-style-type:none;
			padding:0px;
			margin:0px;
			padding-top:50px;
			padding-left:50px;
			color:#FFFFFF;
		}
		
			#menu ul li
			{
				float: left;
				padding-left:3px;
			}
			
			#menu ul li a:link
			{
				text-decoration:none;
				color:#FFFFFF;
			}
			
			#menu ul li a:visited
			{
				text-decoration:none;
				color:#FFFFFF;
			}
			
			#menu ul li a:hover
			{
				text-decoration:underline;
				color:#FFFFFF;
			}

		#droite_menu
		{
			width:14px;
			height:119px;
			float:left;
			background-image:url(../img/content/site/droite_menu.gif);
			background-repeat:no-repeat;
			padding:0px;
			margin:0px;
		}
		
/********************************** Fin DIV menu_logo ******************************/

/********************************** début DIV ligne_diagonale ******************************/

#ligne_diagonale_haut
{
		width:729px;
		height:8px;
		background-image:url(../img/content/site/diagonale_h.gif);
		background-repeat:no-repeat;
}

#ligne_diagonale_bas
{
		width:729px;
		height:8px;
		background-image:url(../img/content/site/diagonale_b.gif);
		background-repeat:no-repeat;
}

/********************************** Fin DIV ligne_diagonale ******************************/

/********************************** début DIV content ******************************/
#content
{
	padding:0px;
	margin:0px;
	background-image:url(../img/content/site/ligne_content.gif);
	background-repeat:repeat;
	width:729px;
	height:auto;
    padding-bottom:10px; /* padding-bottom:0px IE */
	padding-top:10px;
	background-color:#336666;
}

/********************************** modificaiton balise CONTENT ******************************/

	#content h1
	{
		font-family:Arial, Helvetica, sans-serifl;
		font-size:1em;
		padding:0px;
		padding-left:10px;
		margin: 0px;
	}
	
	#content h2
	{
			font-family:Arial, Helvetica, sans-serifl;
			font-size:0.9em;
			padding:0px;
			margin: 0px;
	}
	/*
	#content h3
	{
		font-family:Arial, Helvetica, sans-serifl;
		font-size:0.7em;
		text-align:center;
		margin: 0px;
	}*/

	#content p
	{
		font-size:0.7em;
		padding:0px;
		margin: 0px;
		text-align:left;
		padding-top:10px;
		/*padding-bottom:10px;*/
	}
	
/********************************** Fin modificaiton balise CONTENT ******************************/

	#content_gauche
	{
			width:195px;
			height:auto;
			float:left;
			margin-left:8px;
	}
	
		#content_gauche ul
		{
			padding:0px;
			margin:0px;
			padding-left:0px;
			list-style-type:none;
			text-decoration:none;
		}
		
				#content_gauche ul li
				{
					padding:0px;
					margin:0px;
					font-size:0.7em;
				}
				
				#coordonnee
				{
					margin-bottom:20px;
				}
	
	#content_droite
	{
		width:511px;
		height:auto;
		min-height:225px; /* IE  correction */
		float:left;
		margin-right:14px;	
		border-left:solid;
		border-left-color:#000000;
		border-left-width:1px;
	}
	
	#content_droite h2 span
	{
			font-family:Arial, Helvetica, sans-serifl;
			font-size:0.7em;
			padding:0px;
			margin: 0px;
			font-weight:normal;
	}
	
	#content_droite h1, #content_droite h2, #content_droite h3, #content_droite p
	{
		padding-left:10px;
	}
	
	#content_droite input,#content_droite label,#content_droite textarea
	{
		
		font-size:0.7em;
		padding:0px;
		margin: 0px;
		margin-left:10px;
		margin-bottom:5px;
		text-align:left;
	}
	
	#content_droite label
	{
		margin-top:10px;
		padding-top:10px;
		margin-bottom:5px;
		padding-bottom:5px;
	}
	
	.realisation_type
	{
		font-family:Arial, Helvetica, sans-serifl;
		font-size:0.8em;
		text-align:left;
		margin: 0px;
		padding:0px;
		margin-top:5px;
		text-decoration:underline;
		/*clear:both;*/
	}
	
	#clear_float
	{
		clear:left;
	}



/********************************** Fin DIV content ******************************/

/********************************** début DIV copy_right ******************************/
#copy_right
{
	width:729px;
	height:32px;
	background-image:url(../img/content/site/copy_rigth.gif);
	background-repeat:no-repeat;
}

	#copy_right h3
 	{
	padding:0px;
	margin:0px;
	font-size:0.6em;
	padding-left:450px;
	padding-top:10px;
	color:#FFFFFF;
	
	}
/********************************** Fin DIV copy_right ******************************/

/********************************** début DIV footer ******************************/

#footer
{
	width:729px;
	height:16px;
	background-image:url(../img/content/site/footer.gif);
	background-repeat:no-repeat;
	
}

/********************************** Fin DIV footer ******************************/
	
	
/****** Classe modification texte ******/


/************* Lien  **************/

#content a:link
{
	text-decoration:none;
	color:#666;
}

#content a:visited
{
	color:#666;
	text-decoration:none;
}

#content a:hover
{
	color:#999;
	text-decoration:underline
}


#img
{
	width:50px;
	height:50px;
	background-color:#009999;
	float:left;
	margin:10px;
}


img
{
	border:none;
}

Modifié par Sgtcook (26 May 2007 - 21:36)

fvsch

26 May 2007 à 22:10

Bonjour,

À voir ta page, on croirait que tu as essayé de faire une mise en page en tableaux, mais avec des divs et le positionnement CSS (en particulier les flottants) à la place. Ça manque furieusement de... simplicité dans la mise en oeuvre, et du coup tu déclenches d'autant plus facilement des bugs et comportements hors-normes d'Internet Explorer 6.

Je serais toi, je reprendra l'intégration de ma maquette à zéro, pour refaire ça bien proprement.

Mais avant cela, un peu de lecture :
http://blog.alsacreations.com/2007/04/07/344-demarche-integration-html-css

Et un tutoriel où tu devrais glaner quelques conseils pour une bonne utilisation des flottants :
Un design fluide avec trois «colonnes», grâce au positionnement flottant
(Penser deux colonnes plutôt que trois colonnes, et voilà...)

Petit conseil : réduire autant que possible le nombre de flottants utilisés, et éviter de coller des flottants sur toute la largeur du conteneur.
Pour la page d'accueil, on aura besoin en tout et pour tout d'un seul flottant (pour le menu de gauche). À la rigueur, un deuxième pour le logo (même si le positionnement absolu serait pas mal non plus dans ce cas précis).
Pour le menu, on peut garder les flottants, mais on aurait pu utiliser display: inline également.

Ah oui : pour le logo, il transmet une information, et il est donc dommage de ne pas fournir cette information à tous les utilisateurs et outils qui ne comprennent pas les images (aveugles et malvoyants, moteurs de recherche), ou de la voir disparaitre lorsque les images ne sont pas affichées.

Une image de contenu, ça serait donc plutôt ça :

<img alt="Loso Création" src=img/content/site/logo.gif" />

Sujet clos

CSS et mise en forme, CSS3

Problème d'espace sur IE 6, 5.5 et float:left