Menu con immagini... maledetta riga in mezzo!

[buothz]

Ci sto uscendo pazzo!
Non riesco a capire da dove viene quella riga grigia tra l'header e il menù sul sito http://buothz.altervista.org/new/index.html

il codice è banalissimo

ul{
	margin:0;
	padding:0;
	}

contenitore che contiene tutto, l'header+menu

.header {
	width:auto;
	height:144px;
	text-align:left;
	background-color: #183954;
	color: #ffffff;
	}

contenitore menu

.menu {
    width: auto;
	height: auto;
    float: left;
    margin: 0px;
	padding: 0px;
}

lista

.nav_menu li{
    list-style:none;
	padding: 0px;
	float: left;
	margin: 0;
	
    }

<div class="header">
  <img src="img/menu/header.png" alt="i Giocattoli del Buothz"/>
  <div class="menu">
	<ul class="nav_menu">
	<li><img src="img/menu/menu.png" alt="Menu"/></li>
	<li><a href="http://buothz.altervista.org"><img src="img/menu/home.png" alt="Home"/></a></li>
...SALTO...	<li><a href="http://buothz.altervista.org/giocattoli/videogames.html"><img src="img/menu/menu3.png" alt="Menu"/></a></li>
	</ul>
	
  </div>
  </div>

dove sbaglio? grazie...

[dreadnaut]

Prova a vedere se aggiungendo un * { outline: 1px solid green; } riesci a capire di quale elemento si tratta. Hai azzerato margin e padding, ma magari ce n'è ancora qualcuno che ti è sfuggito.

[karl94]

Devi impostare la proprietà display dell'immagine dell'header su block. Ora è inline e "poggia" sulla linea di base, quindi il buco che vedi è lo spazio della riga di testo che ospita i tratti discendenti dei glifi.