28173 sujets

CSS et mise en forme, CSS3

bonjour,
j'ai un soucis de décalage entre FF et IE.
J'ai une barre noire qui sépare le haut et le contenu du site. Sous FF, tout est correctement "collé" alors que sur IE j'ai un décalage, un espacement.

Quelqu'un peut me conseiller pour corriger cet espacement?
Merci



body {
margin:0;
padding:0;
background:white;
color:black;
font-size:80%;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/departement-arriere-plan.gif);
background-attachment: fixed;
background-repeat:no-repeat;
background-position:center;
}


#header {
height:100px;
background:#137111 url(images/bandeau-haut-gites.gif) top left no-repeat;
}

#header img{
float:right;
margin: 5px 5px 0 0;
}

#header h1{
text-indent:-5000px;
margin:0;
line-height:0;
}

#menuhaut{
margin:0;
padding:0.1em 0.5em 0.1em 0;
list-style-type:none;
background-color:black;
color:white;
text-align:right;
}


upload/8282-img-pour-fo.jpg
Bonjour

Attention, je ne suis qu'un n00b en html alors, si quelqu'un te propose quelque chose de plus clean, n'hésite pas à oublier ce que je vais te dire.

Pour avoir eu ce même problème, je mets maintenant systématiquement tout dans des DIVs que je positionne avec top et left. Il n'y a alors plus de différence entre FF et ce Smiley fache d'IE...
Modifié par aCOSwt (04 Oct 2006 - 11:36)
Voila le debut de mon code html




<body>
<div id="header">
<img src="images/bandeau-droite.gif" alt="bandeau terroir" />
<h1>- Bienvenue-</h1>
</div>

<ul id="menuhaut">
<li><a href="accueil.php" accesskey="1">Retour à l'accueil</a> - </li>
<li><a href="#" onclick="MM_openBrWindow('form_contact.html','','width=600,height=600')">Contact</a> - </li>
</ul>

<div id="blockmenu">
<div id="menu">

<div id="menutitre">
<ul><li>Rubriques</li></ul>
</div>

<ul>
<li><a href="rub1.php">- 1</a></li>
<li><a href="rub2.php">- 2</a></li>
<li><a href="rub3.php">- Sites touristiques</a></li>
<li><a href="offices_massif_central.php">- 3</a></li>

</ul>
Bonjour et bienvenue c_moi_fanfan Smiley smile

Afin que tes messages soient plus lisibles, il faut placer tout ce qui est code entre les balises prévues à cet effet comme décrit dans les règles du forum Smiley cligne

Merci d'avance de bien vouloir éditer tes posts Smiley smile
desole comme je suis nouveau je vais essayer d'y remédier tout de suite

Mon html
[code]<body>
<div id="header">
<img src="images/bandeau-droite.gif" alt="bandeau terroir" />
<h1>- Bienvenue-</h1>
</div>

<ul id="menuhaut">
<li><a href="accueil.php" accesskey="1">Retour à l'accueil</a> - </li>
<li><a href="#" onclick="MM_openBrWindow('form_contact.html','','width=600,height=600')">Contact</a> - </li>
</ul>

<div id="blockmenu">
<div id="menu">

<div id="menutitre">
<ul><li>Rubriques</li></ul>
</div>

<ul>
<li><a href="rub1.php">- 1</a></li>
<li><a href="rub2.php">- 2</a></li>
<li><a href="rub3.php">- Sites touristiques</a></li>
<li><a href="offices_massif_central.php">- 3</a></li>

</ul>
perdu je refais un essai encore desole


Mon html

<body>
<div id="header">
<img src="images/bandeau-droite.gif" alt="bandeau terroir" />
<h1>- Bienvenue-</h1>
</div>

<ul id="menuhaut">
<li><a href="accueil.php" accesskey="1">Retour à l'accueil</a> - </li>
<li><a href="#" onclick="MM_openBrWindow('form_contact.html','','width=600,height=600')">Contact</a> - </li>
</ul>

<div id="blockmenu">
<div id="menu">

<div id="menutitre">
<ul><li>Rubriques</li></ul>
</div>

<ul>
<li><a href="rub1.php">- 1</a></li>
<li><a href="rub2.php">- 2</a></li>
<li><a href="rub3.php">- Sites touristiques</a></li>
<li><a href="offices_massif_central.php">- 3</a></li>

</ul>



CSS

body {
margin:0;
padding:0;
background:white;
color:black;
font-size:80%;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/departement-arriere-plan.gif);
background-attachment: fixed;
background-repeat:no-repeat;
background-position:center;
}

#header {
height:100px;
background:#137111 url(images/bandeau-haut.gif) top left no-repeat;
}

#header img{
float:right;
margin: 5px 5px 0 0;
}

#header h1{
text-indent:-5000px;
margin:0;
line-height:0;
}


/* ------- MENU HAUT ------ */

#menuhaut{
margin:0;
padding:0.1em 0.5em 0.1em 0;
list-style-type:none;
background-color:black;
color:white;
text-align:right;
}
Salut,

#header h1{

text-indent:-5000px;

margin:0;

line-height:0;

}

Le probleme est ci-dessus.Supprime le line-height ou met une autre valeur que 0.

+