Réponse - Informaticien.be

Poster une réponse à un sujet: [CSS] - Bug IE d'espacement avec un float

Attention, ce sujet est un sujet ancien (7272 jours sans réponse)

forum_emoticons.html

Courriel [email=nobody@nobody.org]Nom[/email]

Lien [url=http://www.website.com]Texte[/url]

Image [img]http://www.website.com/image.jpg[/img]

Aligné à gauche [align=left]Texte[/align]

Aligné à droite [align=right]Texte[/align]

Toute la largeur [align=justify]Texte[/text]

Mise en forme [highlight=pascal]Texte[/highlight]

Liste [list=square][item]BlaBla[/item][/list]

Liste Numérotée [list=decimal][item]BlaBla[/item][/list]

Spoiler [spoiler]James est le meurtrier![/spoiler]

Tout en majuscules [uppercase]Texte[/uppercase]

Tout en minuscules [lowercase]Texte[/lowercase]

[quote=%general:anonymous%,3146]CSS : 
[css]* {
	font-family: Trebuchet MS, serif;
}
body, h1 {	
	margin: 0;
	padding: 0;
}
#header {
	background-color: black;
	color: white;
	height: 71px;
	line-height: 71px;
	text-align: center;
}
#gauche {
	float: left;
	background: red;
	width: 173px;
	height: 500px;
	clear: right;
}
#haut {
	background: #B37D00;
	height: 2em;
	margin: 0;
	padding: 0;
}[/css]

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>test</title>
		<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
		<style type="text/css" media="screen">@import url(test.css);</style>
	</head>
	<body>
		<div id="header">
			<h1>Acceuil</h1>
		</div>	
		<div id="gauche">
		</div>	
		<div id="haut">
		</div>		
	</body>
</html>[/html]

Sous FireFox pas de pb, sur IE il y a un petit espace entre le bloc de gauche et la barre horizontale  :angry:

Une solution ?

Merci.[/quote]

Poire

Citation de: gizmo

bug connu. IE a du mal avec la gestion des flottants quand ils sont en "contact" avec des blocs externes. Englobe le gauche dans le haut et ton problème sera résolu.

J'ai changé le design :spamafote:

englober le gauche ds le haut n'est pas satisfesant à mes yeux (question de logique)

Merci quand même :zoubi:

pipo

http://membres.lycos.fr/gordo13/grosolimou.gif

zion

mais c'est...

:totoz:

totozifiant :oh:

Vivement IE28 :ddr555:

gizmo

bug connu. IE a du mal avec la gestion des flottants quand ils sont en "contact" avec des blocs externes. Englobe le gauche dans le haut et ton problème sera résolu.

zion

je l'ai viré ton h1, ca changeait que dalle sur le reste :spamafote:

Poire

pour le h1 il faut mettre le clear: both où pour pouvoir afficher un truc à côté ? C'est ptet ça qui merde :S

zion

Je vois pas :oh:

Je laisse sur le feu, j'y regarderai encore plus tard si j'ai une idée :sweat:

Poire

J'ai fait un tas de tests aussi.
Je pige pas :outch:

zion

c'est balaud hein :oh:

bizarre, je fais qqs tests, j'y arrive pas non plus jusque là :disappointed:

Poire

CSS :

Code:

* {
font-family: Trebuchet MS, serif;
}
body, h1 {
margin: 0;
padding: 0;
}
#header {
background-color: black;
color: white;
height: 71px;
line-height: 71px;
text-align: center;
}
#gauche {
float: left;
background: red;
width: 173px;
height: 500px;
clear: right;
}
#haut {
background: #B37D00;
height: 2em;
margin: 0;
padding: 0;
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import url(test.css);</style>
</head>
<body>
<div id="header">
<h1>Acceuil</h1>
</div>
<div id="gauche">
</div>
<div id="haut">
</div>
</body>
</html>

Sous FireFox pas de pb, sur IE il y a un petit espace entre le bloc de gauche et la barre horizontale :angry:

Une solution ?

Merci.