Bordo indesiderato Menu e Header

[absinthe90]

Salva a tutti, dopo qualche anno ho ricominciato a smanettare con CSS e HTML, dato che sto lavorando a un sito per un mio amico potreste darmi una mano con un problema che non riesco proprio a risolvere?

Uno screenshot vale più di mille parole:



Le zone "incriminate" sono quelle cerchiate in rosso. Quel piccolo bordo (o spazio?!) tra header e menu e quel piccolo bordo (o spazio?!) tra background nero del link attivo e parte inferiore del menù.

Immagino vogliate anche che alleghi HTML e CSS delle parti incriminate.

<div class="container">
	<div id="header">    	
        <h1>Titolo</h1>
        <h2>Sottotitolo</h2>
    	
    </div>
    <ul id="menu">[*]Home[*]Chi siamo
	[*]Le nostre produzioni[*]Dove siamo[*]Contattaci[/list]
  <div id="contenuto">
    <div id="fotohome">
    [img]img/fotohomedef.jpg[/img]
    </div>
    <div id="testohome">
    	<h3>Qui titolo paragrafo</h3>
        

Qui Testo</p>
    </div>
    </div>
    <div id="footer">
		<div class="container">
        

qui footer</p>
        

qui email</p>
        </div>
    </div>

</div>

CSS.

/* Per tutte le pagine: */
body {
		margin:0; padding:0;
		background-color:black;
	  }
#main {background-color: black;
}
#header {
			background-image:url(img/header.jpg); 
			background-repeat:no-repeat;
			height:125px;
			}
ul#menu {
			background-color:#f07238;
			text-align:center;
			margin:0;
			padding:0
			border:none;}
ul#menu li {
			display:inline;
			margin:0 15px;
			
			}
ul#menu li a {
				text-decoration:none;
				color:black;
				font-family: Arial, Helvetica, sans-serif;
				font-size:16px;
				font-weight:bold;
				margin:0;
				padding:0;
							border:none;


				}
ul#menu li a:hover {color:white;}
ul#menu li a.active {color:white; border:0px; background-color:black;}
	   
	   
#header h1, h2 {margin:0;
				display:block;
				text-indent:-9999px;}
		
#footer {
			background-color:black;
			color:white;
			text-align:center;
			font-size:10px;
			clear:both;
			}
#footer p {margin:0;
font-family:Arial, Helvetica, sans-serif}

/*Per Home */

.container {
width:780px;
			margin: 0 auto;
			
			}
#fotohome{
			
			float:left;
			margin: 30px;
			padding:0;			
}
#testohome h3{
color:#f07238;
font-size:24px;
font-weight:400;
}
#testohome {


color:white;
margin-top:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14/2.5;
text-align:justify;
overflow:auto;}

Grazie in anticipo

[storm363]

e' online il sito? puoi postare il link?

[absinthe90]

purtroppo non ancora. Comunque ho risolto alla radice evitando il colorarsi dello sfondo dei link (è anche più carino così). Comunque una possibile soluzione che sembrava funzionare era impostare le altezze dei div manualmente e riducendole di uno o due pixel ciascuna.
cioè impostando nell'header: height:124px;