problèmes d'affichage CSS

Version imprimable

Bonjour, je suis entrain de coder un design et j'ai 2 soucis:

Sous IE, le texte du contenu vert, descend quand j'ajoute du contenu au menu.
Image: http://openox.olympe-network.com/IE.jpg

Sous FF, quand j'ajoute du contenu à mon menu, eh bien le fond ne se répete pas, le contenu sort donc du site.
Image: http://openox.olympe-network.com/FF.jpg

Si vous pouviez m'aider à corriger cela ;)
Merci d'avance

EDIT: j'avais pas mis mon code xD

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#content
{
	width:702px;
	height:auto;
	background-image:url('design/content.png');
	background-repeat:repeat-y;
}
 
.menuLeft
{
	width:125px;
	height:auto;
	float:left;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:10px;  
}
 
.menuRight
{
	width:125px;
	height:auto;
	float:right;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:10px;
}
 
.contenu
{
	width:445px;
	height:auto;
	margin-left:128px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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" xml:lang="fr">
 
	<head>
		<title>iWebmaster » Annonces de recrutement gratuites pour webmasters.</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<link href="design.css" rel="stylesheet" type="text/css" />
	<head>
 
	<body>
 
		<div id="header"> <!--La bannière-->
		</div>
 
 
 
		<div id="barreHorizontale"> <!--La barre horizontale-->
		</div>
 
 
 
		<div id="content"> <!--Le conteneur principal: englobe menus + contenu-->
 
			<div class="menuLeft"> <!-- menu de gauche-->
			gauche <br/> marchi <br/> zehjph
			</div>
 
			<div class="menuRight"> <!-- menu de gauche-->
 
			</div>
 
			<div class="contenu"> <!-- le contenu du site-->
 
			</div>
 
		</div>
 
 
 
		<div id="footer"> <!--Le pied de page-->
		</div>
 
 
	<body>
 
</html>

et si tu essaie de mettre tes div dans un tableau ?

du genre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<table cellspacing="0" cellpadding="0">
   <tr>
      <td>
           <div class="header"></div>
     </td>
   </tr>
   <tr>
      <td>
           <div class="barre"></div>
     </td>
   </tr>
   <tr>
      <td>
           <div class="gauche"></div>
     </td>
      <td>
           <div class="contenu"></div>
     </td>
      <td>
           <div class="droite"></div>
     </td>
   </tr>
   <tr>
      <td colspan="3">
           <div class="footer"></div>
      </td>
   </tr>
</table>

je fais mes sites selon cette méthode, et ca marche à chaque fois, par contre le height: auto; ne sert à rien (selon moi) et tu peux ainsi oublier tes margin-left je pense..
si j'ai pu t'aider..;)

18/06/2008, 09h28
Er3van

Mauvais conseil à mon avis.

Les tableaux ne sont censés être utilisés QUE pour contenir des données de type tableau.

Le positionnement en float n'est à mon avis pas une bonne idée non plus, en tout cas, je ne m'en sers que très rarement, présentant trop de désagréments.

Tu peux opter pour un positionnement relatif...mais commence par fermer la balise <head>.
Et si tu veux créer un menu, les <br/> sont à proscire, tu peux sois faire une dl, soit une ul, c'est beaucoup plus logique.
18/06/2008, 11h32
romain_ci
Citation:

Envoyé par Er3van

Mauvais conseil à mon avis.

Les tableaux ne sont censés être utilisés QUE pour contenir des données de type tableau.

Le positionnement en float n'est à mon avis pas une bonne idée non plus, en tout cas, je ne m'en sers que très rarement, présentant trop de désagréments.

Tu peux opter pour un positionnement relatif...mais commence par fermer la balise <head>.
Et si tu veux créer un menu, les <br/> sont à proscire, tu peux sois faire une dl, soit une ul, c'est beaucoup plus logique.

:king:

De plus pour ton texte qui debord, utilise un min-height... mais attenion IE ne l'iterprete pas donc tu devra faire comme cela :
Code:

1 2 3 4 5 6 7 8 #Div { min-height : 100px; } * html>body #Div { height : 100px; }
voila en esperant t'avoir eclairé !