[CSS] Probleme avec le contenu d'une boite avec IE

Question

Seth77

19 Jul 2006 à 09:15

Slu

j'essaie de faire une page avec 5 boites un header, footer le contenu et une pour le menu et une derniere qui contient l ensemble, voila mon css :

Code :


body { 
margin: 0; 
margin-top:10px; 
padding: 0; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size: 0.8em; 
background-color: #fff; 
} 

#conteneur { 
width: 970px; 
margin-left: auto; 
margin-right: auto; 
} 

#header { 
height: 50px; 
background-color: #99CCCC; 
} 

#menu { 
float:left; 
width: 150px;
height: auto; 
background-color:#CCCCFF; 
} 

#frame { 
position:static; 
margin-left: 150px; 
width: auto; 
height: auto; 
background-color:#9999CC; 
min-height:700px; 
padding:10px; 
} 

#footer { 
height: 20px; 
background-color: 
#99CC99; 
}

le probleme est que sous FF cela marche bien mais sous IE le contenu de la boite frame et decalle en verticale en fonction du contenu de la boite menu ...

thx @+
Modifié par Seth77 (19 Jul 2006 - 10:39)

fvsch

19 Jul 2006 à 10:38

Bonjour Seth77,

Merci de bien vouloir mettre en forme ton message conformément aux règles du forum. En particulier, il s'agit d'entourer le code que tu cites par les balises [ code] et [ /code] (sans les espaces). Tu peux éditer ton premier message grâce au bouton d'édition en haut à droite. Merci d'avance. Smiley smile

Sinon, tu fournis le code CSS mais pas le HTML correspondant. Or, les feuilles de style ne s'appliquent pas sur rien.

Enfin, et c'est un détail mais qui peut avoir son importance : je t'incite fortement à utiliser une famille de polices proches, et non pas des polices aussi différentes que Verdana et Arial (Arial est beaucoup plus petite et étroite que Verdana, et un texte conçu pour être lisible en Verdana pourra être trop petit en Arial). Tu peux utiliser la famille suivante :

font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;

Cf familles de polices pour le web.

Seth77

19 Jul 2006 à 10:50

Voici mon code html :


	<!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" lang="fr">	
		<head>
			<title>Site v2</title>
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
			<NOSCRIPT><meta http-equiv="refresh" content="0;URL=nojavascript.htm"></NOSCRIPT>
<!--  Prototype Window Class Part -->
						<script type="text/javascript" src="jswin/javascripts/prototype.js"></script> 
						<script type="text/javascript" src="jswin/javascripts/effects.js"></script>
						<script type="text/javascript" src="jswin/javascripts/window.js"></script>
						<script type="text/javascript" src="jswin/javascripts/debug.js"></script>		
					<!--  Doc Part-->
					
					<script type="text/javascript" src="jswin/documentation/js/application.js"></script>
					
					<script type="text/javascript">	
						var winPanier;
					
						function openWindow(addweb, title) {		
							var win = new Window(Application.getNewId(), {className: "alphacube", title: title, top:70, left:100, width:800, height:600, resizable: false, url: addweb, showEffectOptions: {duration:2}}) ;
							win.setDestroyOnClose();
							win.showCenter(true);				
						}			
						
						function openDialogModal(theTxt) {
							Dialog.alert(theTxt, {windowParameters: {width:350, height:120}, okLabel: "fermer", ok:function(win) {debug("validate alert panel"); return true;}});
						}
					</script>
<!--  Prototype Window Class Part -->
						<script type="text/javascript" src="jswin/javascripts/prototype.js"></script> 
						<script type="text/javascript" src="jswin/javascripts/effects.js"></script>
						<script type="text/javascript" src="jswin/javascripts/window.js"></script>
						<script type="text/javascript" src="jswin/javascripts/debug.js"></script>		
					<!--  Doc Part-->
					
					<script type="text/javascript" src="jswin/documentation/js/application.js"></script>
					
					<script type="text/javascript">	
						var winPanier;
					
						function openWindow(addweb, title) {		
							var win = new Window(Application.getNewId(), {className: "alphacube", title: title, top:70, left:100, width:800, height:600, resizable: false, url: addweb, showEffectOptions: {duration:2}}) ;
							win.setDestroyOnClose();
							win.showCenter(true);				
						}			
						
						function openDialogModal(theTxt) {
							Dialog.alert(theTxt, {windowParameters: {width:350, height:120}, okLabel: "fermer", ok:function(win) {debug("validate alert panel"); return true;}});
						}
					</script>			
			
			
		<link href="jswin/themes/default.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/spread.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/alert.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/alert_lite.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/debug.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/alphacube.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/darkX.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/mac_os_x.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/nuncio.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/theme1.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/documentation/stylesheets/login.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/default.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/spread.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/alert.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/alert_lite.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/debug.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/alphacube.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/darkX.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/mac_os_x.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/nuncio.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/themes/theme1.css" rel="stylesheet" type="text/css" />
			
		<link href="jswin/documentation/stylesheets/login.css" rel="stylesheet" type="text/css" />
			
		<link href="main.css" rel="stylesheet" type="text/css" />
	
			
		</head>
		
		<body>
			
			<div id="conteneur">
				<div id="header">		
					
	

	
	

				</div>
				
				<div id="menu">
					
    <a href="#">Menu</a><br/>
    <a href="#">Menu</a><br/>
    <a href="#">Menu</a><br/>
    <a href="#">Menu</a><br/>
    <a href="#">Menu</a><br/>
    <a href="#">Menu</a><br/>
    <a href="#">Menu</a><br/>
    <a href="#">Menu</a><br/>
    <a href="#">Menu</a><br/>
    <a href="#">Menu</a>

				</div>
				
				<div id="frame">	
					

	<table border=0 style="width:100%;">
			
			<tr>
				<td height="100%">
					<h4><a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/322268.html?r=/rss/actus.xml', 'progiciels - Infor, l\'auberge espagnole des applications')">progiciels - Infor, l'auberge espagnole des applications</a></h4>
				</td>
				<td>
					19.07.06
				</td>				
			</tr>
			
			<tr>
				<td colspan=2>
					La récente acquisition de SSA par Infor suscite des interrogations sur sa capacité à faire converger des logiciels relativement hétérogènes. Et à en développer de nouveaux. <a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/322268.html?r=/rss/actus.xml', 'progiciels - Infor, l\'auberge espagnole des applications')">[En&nbsp;savoir&nbsp;plus&nbsp;...]</a>
				</td>
			<tr>
			
			<tr>
				<td height=20px></td>
			<tr>
			
			<tr>
				<td height="100%">
					<h4><a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/322265.html?r=/rss/actus.xml', 'personnalité - Les 40 Français de la high-tech (3/5) : les chercheurs')">personnalité - Les 40 Français de la high-tech (3/5) : les chercheurs</a></h4>
				</td>
				<td>
					19.07.06
				</td>				
			</tr>
			
			<tr>
				<td colspan=2>
					Deuxième volet du feuilleton consacré par « 01 Informatique » aux 40 Français qui ont fait ou font encore l'informatique en France. <a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/322265.html?r=/rss/actus.xml', 'personnalité - Les 40 Français de la high-tech (3/5) : les chercheurs')">[En&nbsp;savoir&nbsp;plus&nbsp;...]</a>
				</td>
			<tr>
			
			<tr>
				<td height=20px></td>
			<tr>
			
			<tr>
				<td height="100%">
					<h4><a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/322278.html?r=/rss/actus.xml', 'service - La SNCF teste le billet sur l\'écran du téléphone portable')">service - La SNCF teste le billet sur l'écran du téléphone portable</a></h4>
				</td>
				<td>
					18.07.06
				</td>				
			</tr>
			
			<tr>
				<td colspan=2>
					Avec « Tikefone », les voyageurs se rendant en Bretagne pour les festivals d'été pourront recevoir leur titre sur leur mobile. <a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/322278.html?r=/rss/actus.xml', 'service - La SNCF teste le billet sur l\'écran du téléphone portable')">[En&nbsp;savoir&nbsp;plus&nbsp;...]</a>
				</td>
			<tr>
			
			<tr>
				<td height=20px></td>
			<tr>
			
			<tr>
				<td height="100%">
					<h4><a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/322266.html?r=/rss/actus.xml', 'e-commerce - A la Fnac, les commandes en ligne se retirent aussi en magasin')">e-commerce - A la Fnac, les commandes en ligne se retirent aussi en magasin</a></h4>
				</td>
				<td>
					18.07.06
				</td>				
			</tr>
			
			<tr>
				<td colspan=2>
					L'enseigne étend à tout son réseau le système permettant de réserver un produit en ligne et de le retirer en magasin. <a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/322266.html?r=/rss/actus.xml', 'e-commerce - A la Fnac, les commandes en ligne se retirent aussi en magasin')">[En&nbsp;savoir&nbsp;plus&nbsp;...]</a>
				</td>
			<tr>
			
			<tr>
				<td height=20px></td>
			<tr>
			
			<tr>
				<td height="100%">
					<h4><a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/321856.html?r=/rss/actus.xml', 'e-commerce - Petite saison pour les soldes d\'été en ligne')">e-commerce - Petite saison pour les soldes d'été en ligne</a></h4>
				</td>
				<td>
					18.07.06
				</td>				
			</tr>
			
			<tr>
				<td colspan=2>
					Les soldes estivaux ont démarré il y a plusieurs jours, dans les magasins physiques et virtuels. Une période de promotion moins cruciale pour les cybermarchands qu'en hiver. <a href="javascript:openWindow('http://rss.01net.com/www.01net.com/article/321856.html?r=/rss/actus.xml', 'e-commerce - Petite saison pour les soldes d\'été en ligne')">[En&nbsp;savoir&nbsp;plus&nbsp;...]</a>
				</td>
			<tr>
			
			<tr>
				<td height=20px></td>
			<tr>
					
	</table>	
	
	<center>Copyright &copy;1999 - 2005 Groupe Tests - 01net.<center>

				</div>
				
				<div id="footer">	
					
	<center><a href="#">footer</center>

				</div>	
			</div>
		</body>
	</html>
<center><strong>0.195 s</strong></center><br />

Sujet clos

CSS et mise en forme, CSS3

[CSS] Probleme avec le contenu d'une boite avec IE