Problème Float IE

Bonjour, j'ai un problème assez génant sous Internet Explorer avec la propriété float. En effet, sous Mozilla, ça passe niquel mais sous Internet Explorer cela donne l'impression qu'il ne connait pas la balise float et empile la box floatée et la box qui suit. Le problème se situe au niveau de ma div 'news'.

Un exemple ici

Je joins à mon message le code css. (j'espère que ça ne sera pas trop long )

Merci d'avance pour votre lecture et pour votre éventuelle aide

PS: si cependant des choses sont suceptibles d'améliorations dans mon code, je suis preneur.
PS2: oui le rouge ça pique les yeux sur l'exemple mais c'est pour mieux voir où se situe ma div content

* {margin: 0; padding: 0;}

/*
 *
 * Body
 *
 */

body {
margin:0px;
padding:0px;
text-align:center;
font-family: verdana;
background: #FFF url(design/mainbg.jpg);
font-size: 1em;
}

/*
 *
 * Main
 *
 */

#main {
margin-left: auto;
margin-top:0px;
margin-right: auto;
width:740px;
background: #fff url(design/bgmain.jpg) repeat-y 0px -2px;
text-align:center;
}

/*
 *
 * Header
 *
 */

#header {
width:700px;
margin-top:-1px;
padding:0px;
margin-left: auto;
margin-right: auto;
height: 140px;
}

/*
 *
 * PreMenu
 *
 */
 
#premenu {
width:700px;
height:30px;
margin-left: auto;
margin-right: auto;
background-color: #800;
}

/*
 *
 * Menu
 *
 */

#menu {
width:602px;
margin-left: auto;
margin-right: auto;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#menu ul, li {
list-style-type: none;
margin:0;
padding:0;
display: inline;
}

#menu li a {	
float: left;
height: 30px;
width: 120px;
color: #FFF;
font-size: 0.8em;
text-decoration: none;
line-height: 30px;	
text-align:center;
background: #002 url(design/menu03.jpg) no-repeat;
}

#menu li a:hover {	
background-position: 0% -30px;
}



/*
 *
 * News
 *
 */

#news {
float:right;
margin:5px 25px 0px 5px;
font-size:0.8em;
text-align:left;
display:inline;
background-color:#00f;
}

#newsleft {
float:left;
font-size:0.8em;
text-align:left;
margin:5px 5px 5px 25px;
display:inline;
}

#newsheader {
height:45px;
width:180px;
margin-bottom:0px;
display: block;
}

#newscontent {
background: #fff url(design/newscontent.jpg);
width:180px;
display: block;
margin-top:-3px;
}

#news>newscontent {
margin-top:-3px;
}

#newsfooter {
height:15px;
width:180px;
display: block;
}

#newscontent a {
font-size:0.8em;
color:#600;
}

#newscontent a:hover{
font-size:0.8em;
color:#C00;
}

#newscontent ul {
margin: 0px 10px 0px 20px;
}

#newscontent li {
display: block;
}

/*
 *
 * Content
 *
 */

#content {
width:680px;
text-align:justify;
font-size:0.8em;
margin: 10px 30px 10px 30px;
background: #F00;
}

Merci pour la lecture les courageux
Modifié par BuNN (30 Jan 2006 - 10:01)

Bonjour,

- choisir un doctype (HTML4.01 transitional ou strict, d'après le code) et l'ajouter. Impérativement (ne pas travailler en mode de rendu Quirks : voir http://blog.alsacreations.com/2005/08/01/183 ).
- supprimer la largeur donnée au contenu qui suit le flottant (supprime l'effet de haslayout dans IE, voir http://test.blog-and-blues.org/haslayout/tests/float4.html )
- ajouter un display-inline sur le flottant (compense le bug de double marge du flottant dans IE)

Par ailleurs, il manque une meta http-equiv pour le type de contenu et le charset. Ainsi que des éléments de titrage pour structurer le contenu. Egalement, ne pas utiliser d'images d'arrière-plan CSS pour générer du pseudo-contenu : utiliser une image <img alt="news" src=...>
Modifié par Laurent Denis (30 Jan 2006 - 05:58)

Bonjour, j'ai effectué ces modifications mais cependant celà ne marche pas toujours.
J'ai eu un joyeux problème apparement de ce que l'on appelle le '3 pixel bug' sous IE du coup j'ai utilisé le sélecteur de child. Désolé si ce n'est pas propre

Je met à jour le code dans mon post précédent.

Le lien pour avoir un aperçu est toujours actif

merci encore de votre aide !
Modifié par BuNN (30 Jan 2006 - 10:02)

Bonjour, j'ai résolu mon problème.

Voilà pourquoi :

mon code se présentait de cette manière :

...
<div id="news>
    [...]
</div>
<div id="content">
    [...]
</div>
...

et je l'ai transformé comme celà :

...
<div id="content">
    <div id="news>
         [...]
    </div>
    [...]
</div>
...

Bonne continuation ! et merci pour l'aide!
Modifié par BuNN (30 Jan 2006 - 19:01)