Problème de boites en CSS?

Question

Bonjour
Voici mon problème :
Je souhaite réaliser une boite de menu, à gauche (

...

avec un élément graphique en fond, et une boite de texte (

Blabla

d'une largeur de 750px.

Je voudrais que la boite texte recouvre 1/3 de la largeur du menu : c'est à dire que du texte du "corps" recouvre l'image de fond du menu.

J'ai trouvé la solution suivante, qui fonctionne avec Firefox mais pas Internet Explorer. J'ai rajouté une 3e boite, "menu_corps" qui contient "menu" et "corps". C'est pour une question d'esthétique : le cadre et le fond de "corps" sont en fait définis dans menu_corps". Comme ça : le cadre est recouvert par l'image de fond de menu, qui est elle-même partiellement recouverte par le texte de "corps".
Merci pour vos idées...

#menu { padding: 8px;
color: #ffff99;
background-repeat: no-repeat;
opacity: 1;
background-image: url(style2/crane.png);
float: left;
background-position: left center;
height: 336px;
font-family: Times New Roman,Times,serif;
font-weight: bold;
font-style: italic;
text-decoration: none;
position: relative;
margin-left: -200px;
width: 300px;
}

#corps { border-style: none;
border-color: #ffffff;
padding: 20px 10px;
float: left;
font-family: Arial,Helvetica,sans-serif;
text-align: justify;
color: #ffff99;
margin-left: -100px;
width: 800px;
position: relative;
}

#menu_corps { border: 1px solid #ffffff;
background-color: #000000;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
display: block;
float: left;
clear: left;
margin-left: 200px;
}

Voila. Avec FF c'est tout joli, mais IE me reporte le bloc "corps" en dessous sans que je lui demande.
Malheureusement il y a encore beaucoup de monde qui utilise ce navigateur archaïque...

##################################
jfp : merci, c'est une bonne idée. mais je n'y arrive pas : * html #corps {...} ne change rien sur IE7. Une histoire de version.

Answer 1

Bon G pas essayé ton code mais poursuit en FireFox c'est ensuite plus facile pour le faire sur IE ensuite. J'utilise ensuite sur IE des exeptions pour IE seul du genre :
* html xxx { }
Comme * html est normalemnt vide pour tout les navigateurs sauf IE, les proprietés dans ce selecteur ne sont pas prise en compte par les autres mais pa IE seul.
Tu en déduit la possiblilité de "patcher" les CSS pour IE, en général la largeur des boites est en cause puisque IE ne la calcul pas de la bonne facon. Quelques réajustement de largeur et souvent ca passe...

Answer 2

Je n'ai pas vraiment saisi ton problème si ce n'est qu'apparemment notre cher navigateur de chez Microsoft fait encore des siennes en ne respectant pas les standards!

Je peux néanmoins te conseiller le site suivant qui contient quelques modèles de mises en pages CSS qui pourront je pense t'aider : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS