28172 sujets

CSS et mise en forme, CSS3

Ligne indésirable entre deux images de fonds sous Firefox

Bonsoir,

J'ai fouillé les sujets du forum et les tutos et en essayant les solutions rien n'a résolu mon problème.

En fait entre le haut de mon menu et la partie basse il y a une ligne qui coupe le menu mais uniquement sous Mozilla Firefox, sous IE tout fonctionne.
Je pense que c'est un soucis dans le css mais j'ai déjà essayé pleins de trucs et je ne trouve pas...

Voici une copie d'écran de ce que j'ai sous Firefox :
http://img383.imageshack.us/img383/4628/bugaffichageza7.png

Mon code css : 

body{
	background:url("theme/fond.jpg") no-repeat top center white;
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:9px;; 
	background-attachment:fixed;
}

/*Bannière du haut*/
#top{
height:162px;
background:url(theme/haut.png) no-repeat top center;
display : block;
}

/*Le menu vertical à gauche*/
#accueil{
  background:url(theme/accueil.png) no-repeat top left;
  width:215px;
  height:78px;
  }

#menu{
  background:url(theme/menu.png) repeat-y  left;
  width:215px;
  height:295px;
}

#menu ul li{
font-family:Verdana, Geneva, sans-serif;
list-style:none;
float:left;
padding:0 0px;
}

#menu ul li a{
height:20pt;
width:140px;
font-size:14pt;
text-decoration:none;
text-align:left;
padding:0 0px;
background-position:top left;
display:block;
list-style:none;
color:black;
}

#menu ul li a:hover{
text-decoration:underline;
}

#menu ul li a:active { 
font-style : italic ; 
}

#menubas{
  background:url(theme/basmenu.png) no-repeat top left;
  width:210px;
  height:42px;
  float:left;
}


/*Le corps de la page*/
#haut{
background:url(theme/hautcorps.png) no-repeat bottom left;
height:17px;
width:814px;
font-size:14pt;
text-decoration:none;
text-align:left;
display:block;
background-repeat:no-repeat;
background-position:top left;
display:block;
list-style:none;
color:black;
}

#corps{
background:url(theme/corps.png) repeat-y left;
width:814px;
height:auto;
}



#bas{
background:url(theme/bascorps.png) no-repeat bottom left;
width:814px;
height:59px;
display:block;
font-size:12pt;
text-decoration:none;
text-align:center;
padding:0 25px;
background-repeat:no-repeat;
background-position:top left;
line-height:30px;
color:white;
display : block;
}

#bas a {
/*font-style : none ; */
color:white;
}

#bas ul li a:hover{
text-decoration:underline;
color:white;
}

 
#bas ul li a:active { 
/*font-style : none ; */
color:white;
}

/*conteneurs gauche(menu) et droite (corps)*/
body{width:1024px;margin:auto;}
.menu{width:209px;float:left; height : auto; }
.content{width:810px;float:right; height :auto ;
}


/* Affichage du contenu dans le corps de la page*/
#corps h1{
text-align:center;
font-size:20pt;
}

#corps p{
padding:0 30px;
font-size:10pt;
display : block;
}


#corps h3{
text-align:left;
padding:0 30px;
font-size:14pt;
}

#corps h5{
text-align:center;
padding:0 30px;
font-size:10pt;
}

#corps img {
display: block;
font-size: 1px;
line-height: 1px;
vertical-align: middle;
display:inline;
}

html{ height: 100%; }


Je ne pense pas que le code html soit utile vraiment mais je le met quand même :


<?xml version="1.0" encoding="UTF-8"?>
<!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">

<!--En tête-->
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link href="style.css" rel="stylesheet" type="text/css" /> 
        <title>Les Cobayes de la Zinsel</title>	
  </head>

<!--Corps de ma page-->  
<body>

<!--Le haut-->
<div class="header">

<?php
include ("haut.php");
?>

</div>


<!--Colonne de Gauche-->
<div class="container">

<?php
include ("menu.php");
?>

</div>

<!--Colonne de droite-->
<div class="content">

<?php
include ("corps.php");
?>

</div>
</body>
</html>


Merci d'avance
Bonjour,

À vue de nez, je dirais que c'est un problème classique de fusion des marges. Une petite recherche sur ce concept devrait t'éclairer.
Sujet clos
Aller à