Problème d'affichage sous firefox (css)

pestak · 25 Septembre 2006

Bonjour,

Mon site est découpé en 3 parties. Chaque page a pour hauteur la taille de la l'écran de l'internaute. Pour ce faire la partie centrale est de taille variable et scrollable. La partie "header" et "footer" ont une taille fixe. La partie centrale doit s'ajuster à la hauteur de l'écran moins les deux autres parties. Pour ce calcul j'utilise le javascript.

Sous IE cela fonctionne très bien mais sur firefox pas du tout. Firefox ne prend pas en compte la taille que j'affecte au div.

Si j'enleve la balise DOCTYPE, là par contre firefox réagit bien.

Voici ma css

html{
	margin:0;
	padding:0;
	font-family:"Lucida Sans Unicode",Verdana, Arial;
}

body{
 	margin:0;
	padding:0;
	width:100%;
	font-family:"Lucida Sans Unicode",Verdana, Arial;
	font-size:12px;
			 _height: 100%;
	min-height: 100%;
}

#base{
		background: transparent url(/commun/images/traitfond.png) repeat left top;
}

#header{
		background: transparent url(/utilisateur/images/logo.png) no-repeat left top;
		text-align: left;
}

#content{
		overflow: auto;
		text-align: left;
}

#footer{
		text-align: left;
}

Ma page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	  <title></title>
	  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
			 <script language="javascript" type="text/javascript">
	<!--
						   <? include("../commun/fonctions/fonctions.js"); ?>
			 -->
			 </script>

	<!--menu-->
	...
			 <!-- fin menu-->
			 <style type="text/css" media="screen">
				   _AT_import url(./style/screen.css);
				   _AT_import url(./style/administrateur.css);
			 </style>

</head>
<body>
	  <div id="base">
		 <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr >
<td width="100%" height="178px">
		   <div id="header">
				<br/>
				<div id="contentmenu">
					 <ul id="menu">
						 <li>
							 ....
						 </li>
					 </ul>
					 <ul id="menu">
						 <li>
							 ...
						 </li>
					 </ul>
				</div>
	   </td>
</tr>
<tr >
<td>
<script language="javascript">
		var hauteur_header_footer=251;
		var hauteur_utilisateur=70;
		var hauteur_habilitation=70;

		document.write('<div id=\"content\" style=\"_height:');
		document.write(calcul_hauteur_cellule_tableau(251));
		document.write('px; min-height: ');
		document.write(calcul_hauteur_cellule_tableau(251));
		document.write('px; height: ');
		document.write(calcul_hauteur_cellule_tableau(251));
		document.write('px;> \"');
</script>
		<!-- contenu de la page -->
			...
		<!-- contenu de la page -->

</div>
</td>
</tr>
<tr >
		<td width="100%" height="61px">
		   <div id="footer" >
			   ... 
		</td>
</tr>
		</table>
	 </div>
</body>
</html>

Je me doute que j'ai pas utilisé la bonne méthode, mais pouvez vous m'éclairer SVP.

Merci d'avance

Vikchill · 25 Septembre 2006

C'est faisable sans javascript, une des méthodes: http://www.cssplay.co.uk/layouts/basics2.html

pestak · 25 Septembre 2006

Merci pour ton aide , j'avais trouver cette solution.

Le problème c'est que la scrollbar ne doit etre que sur le content de ma page. En plus, j'ai besoin de connaitre sa hauteur pour d'autres calcul.

Quelsu'un orait une autre idée, mon code fonctionne pour IE et Opera mais pas Firefox.

PhY · 25 Septembre 2006

C'est faisable sans javascript, une des méthodes: http://www.cssplay.co.uk/layouts/basics2.html

merci pour ce lien ça peut toujours servir !

Monique · 25 Septembre 2006

Bonjour,

Je viens de soumettre ton code au validateur... je t'invite à en faire autant et à corriger les erreurs signalées.

Je ne suis pas experte en JavaScript mais j'ai bien l'impression que cela fait, ton problème pourrait disparaître.

A propos de JavaScript et Firefox, tu peux trouver des informations sur Référence du DOM Gecko.

pestak · 27 Septembre 2006

Merci Monique, je sais que mon code n'est pas encore "apte" a être validé. J'y travaillerai dessus dans un second temps.

Mais merci d'avoir pris le temps de regarder de ce coté.

pestak · 3 Octobre 2006

Bonjour,

Je vous remercie tous pour votre aide.

Mon problème venait du fait que IE et firefox n'utilise pas les même fonctions javascript

@+

Connexion

Problème d'affichage sous firefox (css)

Sujets conseillés

pestak

Vikchill

pestak

PhY

Monique

pestak

pestak

Veuillez vous connecter pour commenter

Parcourir

Activité