28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bloc "indésirablement" centré sous IE

Salut à tous,

- J'ai un léger problème concernant l'alignement quand je passe de Mozilla à IE: les blocs du conteneur page sont centrés sous IE (d'ailleurs pourquoi pas les autres blocs?) comment rectifier ça? j'ai essayé les propriétés de marge et d'alignement mais rien n'y fait...

- d'autre part, sous Mozilla, ma page est entouré d'une bordure

 border: 1px solid grey;


pourquoi ne s'affiche-t-elle pas sous IE? Y-a-til un moyen d'y remédier?

Voici mon code HTML, ce serait sympa de votre part de le tester et de voir si vous avez la solution. Merci d'avance!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>La Plateforme Android</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->
</head>
<body>
<!-- L'entête de la page, affiché tout en haut de l'écran : -->
<div id="entete">
<h1>La Plateforme Android</h1>
<!-- Le menu principal du site, affiché horizontalement: -->
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<!-- La page en elle-même : -->
<div id="page">
<!-- Le sous-menu, affiché dans une colonne sur la gauche du site : -->
<ul id="sous-menu">
<li>La Plateforme Android</li>
<ul>
<li><a href="">Pr&eacute;sentation g&eacute;n&eacute;rale</a></li>
<li><a href="">Architecture</a></li>
<li><a href="">Interface, fonctionnalit&eacute;s</a></li>
</ul>
<li>Communaut&eacute;/Concurrence</li>
<ul>
<li><a href="">Etat de l'art</a></li>
<li><a href="">Comparaisons, compatibilit&eacute;s</a></li>
</ul>
<li>Enjeux et strat&eacute;gie de Google</a></li>
<ul>
<li><a href="">Positionnement</a></li>
<li><a href="">Bataille des fr&eacute;quences</a></li>
<li><a href="">Un m&eacute;dia pour la publicit&eacute;</a></li>
</ul>
</ul>
<!-- Le contenu utile de la page : -->
<div id="contenu">
<h2>Pr&eacute;sentation g&eacute;n&eacute;rale</h2>
<h3>L'id&eacute;e</h3>
<p>Android veut être le point de ralliement des développeurs, des opérateurs et des fabricants de terminaux
</p>
</div>
<!-- Le pied de page : -->
<div id="pied">
Paragraphe de copyrights...
</div>
</div>

</body>
</html>


Et la feuille CSS qui s'y rattache:


body {
	background: white;
	margin: 10px 250px;
	font-family: sans-serif;
	font-size: small;
}
#entete{
	width : 600px; 
	background: #97C024;
	border-bottom: none;
}
h1{
	background: #97C024;
	color: white;
	word-spacing: 1em;
	letter-spacing: 3px;
	height: 150px;
	line-height:150px;
	text-align: center;
	font-size: xx-large;
}
#menu {
	background: #458EFF;
	list-style: none;
	margin: 0; 
	padding: 0;
	height: 30px;
	line-height:30px;
}
#menu li {
	float: left;
	margin: 0 2px;
}
#menu a {
	text-decoration: none;
	color: blue;
	cursor: pointer;
}

#page {
	width : 598px;
	background: white;
	border: 1px solid grey;
}
#sous-menu {
	height: 450px;
	background: #EEEEEE repeat-y;
	float: left;
	width: 198px;
	margin-top:0;
	padding:5px;
}
#sous-menu a{
	text-decoration: none;
}
#sous-menu > li{
	font-weight: bold;
	color: #666666;
	margin-top: 30px;
	list-style: none;
	text-indent: 0px;
	padding-left: 3px;
}
#sous-menu ul{
	margin-top: 20px;
	list-style: none;
	text-indent: -35px;
}
#contenu{
	margin-left: 220px;
	padding: 15px;
}
p{
	text-align: justify;
}
#pied{
	clear:both;
	border-top: 1px solid grey;
}

Modifié par remenems (12 Feb 2008 - 23:39)
Sujet clos
Aller à