28221 sujets

CSS et mise en forme, CSS3

[Résolu, merci] Problème de compatibilité avec IE ?

Bonjour à tous et à toutes !

Voila j'ai un soucie avec Internet Explorer ( Smiley fache ). En effet, je travail sur un design xhtml stricte et IE me fait des misères. Apparament IE ne prend en compte l'overflow de ma page et mes images et textes se chevauchent.

Voici les sources : 
/* .............................. */
/* Basic layout */
/* .............................. */

body 		{
		text-align: left;
		width: 900px;
		margin: auto;
		margin-top: 50px;
		font-family: Verdana,Arial,sans-serif;
		font-size: 76%;
		background-color: #36c;
		}

/* fixes Firefox scrollbar "jumping" */
html, body {min-height:100.1%}


/* .............................. */
/* Wrapper */
/* .............................. */


#content 	{
  		width: 650px;
		float: left;
		}



/* .............................. */
/* Main Content */

#content h1	{
		font-size: 1em;
		padding:0;
		margin:0;
		padding-bottom: 5px;
		}

#content h2	{
		font-size: 1em;
		padding:0;
		margin:0;
		padding-bottom: 5px;
		color: #aaa;
		}

#content h3 {
		font-size: 1.5em;
		padding:0;


Et : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>AroundTheWeb - Un peu de tout et surtout n'importe quoi</title>	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" media="screen" href="test.css"/>
</head>

<body>


	<div id="content">	
	    <div class="entry">
		<h3>News :</h3> Classer par cat&eacute;gorie : <a href="index.html">Hardware</a> | <a href="index.html">Informatique</a> | <a href="index.html">Jeux video</a> | <a href="index.html">D&eacute;tente</a>
| <a href="index.html">Actualit&eacute;</a> </div>
		<div class="entry">
			<h1>Petit test </h1>
			<h2>16 D&eacute;cembre 2004</h2>
			<p><img src="1234.gif" alt="" width="200" height="211" />Blablbalbalablabalbalbalbalbalablabalbalba, ceci est un test. </p>
	  </div>

		<div class="entry">
			<h1>Test</h1>
			<h2>9 Décembre 2004</h2>
			<p><img src="1234.gif" alt="" width="200" height="211" />Test.</p>
		</div>
	
	</div>

	
</body>
</html>


Le problème est visible ici.
Avec les autres browser que j'ai pu tester, tout marche très bien.

En tout cas, c'est très agacant d'avoir à travailler avec un browser qui ne respecte pas les normes. D'autant plus qu'il detient le monopole...

Merci pour vos lumière.
MrHelmut.
Modifié le 20 Dec 2004 - 14:19
Avec IE, pour garder ton image flottante dans le flux, le conteneur doit avoir une hauteur spécifiée (1% suffit).

Dans ton cas...

#content .entry	{ 
   height: 1%; 
}

...devrait régler ton problème. Smiley cligne

Note :

div.entry { 
   height: 1%; 
}

est aussi valable...

Lire : http://www.positioniseverything.net/articles/hollyhack.html

En gros, si on utilise height: 1%; pour corriger un bug d'IE, on devrait cacher cette valeur aux autres navigateurs.


/* Hides from IE5-mac \*/
* html .buggybox {height: 1%;}
/* End hide from IE5-mac */

Modifié le 20 Dec 2004 - 05:26
Super Smiley biggrin . Je te remercie Stepahn. Ca marche à merveille.
Je vais aller lire ce fameux article.
Pour le <hr />, je ne sais pas Smiley lol , j'avais commencer ca pour une raison obscure surement.
Sujet clos
Aller à