Poster une réponse à un sujet: [CSS] - Bug IE d'espacement avec un float
Attention, ce sujet est un sujet ancien (7086 jours sans réponse)
Poire
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: :spamafote:](images/smileys/spamafote.gif)
englober le gauche ds le haut n'est pas satisfesant à mes yeux (question de logique)
Merci quand même
![:zoubi: :zoubi:](images/smileys/zoubi.gif)
pipo
![http://membres.lycos.fr/gordo13/grosolimou.gif http://membres.lycos.fr/gordo13/grosolimou.gif](http://membres.lycos.fr/gordo13/grosolimou.gif)
zion
![:totoz: :totoz:](images/smileys/totoz.jpg)
mais c'est...
![:totoz: :totoz:](images/smileys/totoz.jpg)
totozifiant
![:oh: :oh:](images/smileys/oh.gif)
Vivement IE28
![:ddr555: :ddr555:](images/smileys/ddr555.gif)
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: :spamafote:](images/smileys/spamafote.gif)
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
Je laisse sur le feu, j'y regarderai encore plus tard si j'ai une idée
![:oh: :oh:](images/smileys/oh.gif)
Je laisse sur le feu, j'y regarderai encore plus tard si j'ai une idée
![:sweat: :sweat:](images/smileys/sweat.gif)
Poire
J'ai fait un tas de tests aussi.
Je pige pas
Je pige pas
![:outch: :outch:](images/smileys/wam.gif)
zion
c'est balaud hein
bizarre, je fais qqs tests, j'y arrive pas non plus jusque là
![:oh: :oh:](images/smileys/oh.gif)
bizarre, je fais qqs tests, j'y arrive pas non plus jusque là
![:disappointed: :disappointed:](images/smileys/disapointted.gif)
Poire
CSS :
Sous FireFox pas de pb, sur IE il y a un petit espace entre le bloc de gauche et la barre horizontale
Une solution ?
Merci.
- * {
- 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;
- }
- <!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: :angry:](images/smileys/angry.gif)
Une solution ?
Merci.