[RESOLU]Remplissage non désiré sous I.E.

Bonjour à tous,

Je me permets une nouvelle fois de solliciter votre aide. J’ai eu beau suivre les indications que j’ai pu trouver sur divers sites, je ne comprends toujours pas ce qu’il se passe sur ma page lorsque je l’affiche sous I.E.



Comme vous pouvez le voir, il y a un remplissage qui se fait a l'intérieur de la classe qui contient ma bannière

J'ai donc initialisé les marges et les remplissages à 0 mais malheureusement rien ne change

Voici le CSS de cette classe

.ban {
	height: 130px;
	margin: 0px;
	padding: 0px;
	}

J'ai fait plusieurs essais, enlever la hauteur, enlever les remplissages, laisser la classe vide mais ça ne donne rien.

Quelqu'un aurait il une solution à ce problème ?

Merci
Modifié par poupsylo (28 Apr 2005 - 09:42)

C'est le truc blanc qui te gène ?

FAudrait nous montrer toute la page car ce n'est pas forcément ton entête qui crée ce problème.

Oops désolé :$, sinon en effet c'est bel et bien l'espace blanc qui me pose problème et j'avoue que ça m'arrive très fréquemment, je dois donc certainement faire quelque chose de travers

Voici comment se décompose la page :

<div class="ban">...</div>

<ul id="meninvi">
<li><a accesskey="2" tabindex="100" href="#menu">Aller au menu</a></li>
<li><a accesskey="0" tabindex="101" href="#contenu">Aller au contenu</a> </li>
</ul>

<div id="men">
<ul id="nav">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

<div class="princ">...</div>

Voici le code CSS de toute la page :

body {
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #E0E0F7;
}

.ban {

	height: 130px;
	margin: 0px;
	padding: 0px;
	background-repeat: repeat-x;
	
}
#men {
	background-color: #9999CC;	display: block;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#men a {
	display: inline;
	text-decoration: none;
	color: #ffffff;
	margin-right: 0.8em;
	font-size: 0.8em;
}
#men a:hover {
	display: inline;
	text-decoration: underline;
	color: #ffffff;
	margin-right: 0.8em;
	font-size: 0.8em;
}

.princ {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	background-color: #FFFFFF;
	margin: 0px 0px 1em;
	padding: 0px;
	
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color: #000000;
	margin: 0px;
	background-color: #D6D6F5;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding-left: 2em;
}
p {
	padding-right: 1em;
	padding-left: 1em;
	font-size: 0.9em;
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #000000;
	margin: 0px;
	background-color: #FFFFFF;
	padding-left: 1.5em;
	
	font-weight: bold;
	
}
a {
font-size: 0.9em;
	color: #333333;
}
a:hover {
font-size: 0.9em;
	color: #000000;
	text-decoration: none;
}
li {
	margin-bottom: 0.4em;
	font-size: 0.9em;
}

code {
	background-color: #ffffff;
	padding: 0.9em 50px 0.9em 0.9em;
	display: block;
	margin-left: 2.5em;
	margin-top: 4px;
	margin-right: 4px;
	margin-bottom: 4px;
	width: 650px;
	background-image: url(../design/code.gif);
	background-repeat: repeat-y;
}
table {
	border: 1px solid #000000;
	padding: 5px;
	margin: 5px;
}
th {
	border: 1px solid #000000;
	padding: 3px;
}
td {
	border: 1px solid #000000;
	padding: 3px;
}

.rapport {
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #000000;
	padding: 2px;
}

#contact{
	font-weight: bold;
	background-color: #ffffff;
	padding: 1em 0em;
	display: block;
	width: 650px;
	background-image: url(../design/contact.gif);
	background-repeat: repeat-y;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: outset;
	border-bottom-style: outset;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	margin: 0px 0px 0px 1em;
}
.pair {
	background-color: #D4D4F7;
	padding: 1em;
	margin: 0.5em;
}
.impair {
	background-color: #9999CC;
	padding: 1em;
	margin: 0.5em;
	color: #FFFFFF;
}
#contact p {
	margin: 5px;
	padding: 5px;
}#couleur {
	display: block;
	margin: 1em;
	padding: 0em;
} .gras {
	font-weight: bold;
}

img {
border:none;
}
img a{
border:none;
}

.styyle {
	margin: 1em;
	border: 1px solid #000000;
	padding: 0.5em;
	width:70%;
}

#nav{list-style-type: none;
	display: inline;
	margin:0px;
	padding:10px;

}
#nav li{
display: inline;
}
.princ p {
	width:70%;
}
.princ code {
	width:70%;
}
.princ ul {
	width:70%;
}#meninvi {
visibility:hidden;
position:absolute;
}

Comme j'imagine que lire tout cela doit être très lourd voici le lien

Il faut cependant changer de thème et prendre le thème "Centré : bleu ciel" pour voir le bug

A mon avis c'est ton visibility: hidden sur ton "meninvi" qui te provoque ça.

a écrit :

La propriété 'visibility' spécifie le rendu, ou non, des boîtes générées par un élément donné. Ces boîtes, bien qu'invisibles, influencent toujours la mise en forme du document (utiliser la propriété 'display' avec la valeur 'none' pour prohiber la génération d'une boîte, et ainsi toutes influences sur la mise en forme)

Malheureusement ce n'est pas cela
Mais quoi qu'il en soit merci quand même

Je me permet de reposter ici car malgré plusieurs changements, le problèmes persistent encore et toujours

Désolé d'être un peu collant avec ce problème la

Je pense qu'il s'agit simplement de la marge par défaut sur ton titre h1 ou h2 (celui qu'on aperçoit à peine dans ton exemple)

As-tu essayé la Méthodologie qui se trouve en post-it du salon CSS ? S'il s'agit d'un problème de marges par défaut, elle le résoudra

Merci Raphael, j'avais bien suvit la methodologie et ca n'avait rien donné.

Mais je viens de trouver mon erreur, alors au cas ou d'autre aurait le problème je vous note la solution même si elle parait vraiment byzarre je vous assure que ca vient de la :s:s:s

Voila comment était mon code :

<div class="ban">
<a accesskey="1" tabindex="200" href="../page/index.php"><img src="../design/banierebleuciel.gif" alt="Bani&egrave;re" title="StandAccess" width="769" height="130" /></a>

</div>

J'ai simplement supprimer l'espace qu'il y avait entre le </a> et le </div>
Et maintenant ça fonctionne

Voila j'espere que ca servira à quelqu'un

Merci a tout ceux qui ont tenté de m'aider
Modifié par poupsylo (28 Apr 2005 - 09:42)