Нежелательное расстояние между divs

Question

Я знаю, что это было сделано много, я просмотрел множество вопросов здесь, но не смог найти решение для своей проблемы. Я знаю, что это действительно просто. В основном у меня есть оболочка, заголовок, навигационный div. Я хотел бы, чтобы заголовок и навигация были флешами, но прямо сейчас между ними есть пространство (несмотря на то, что они оба не имеют разницы). Я сделал JSFiddle, который, вероятно, более простым, чем мой код (http://jsfiddle.net/aqEzC/)

Вот часть моей HTML/CSS:

<div id="wrapper"> 
     <div id="header"></div><div id="nav"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Directory</a></li> 
       <li><a href="#">Submit a Profile</a></li> 
       <li><a href="#">About</a></li> 
      </ul> 
     </div> 

CSS:

div#header { 
    width: 960px; 
    height: 75px; 
    background-image: url('../img/banner.jpg'); 
    margin: 0; 
    padding: 0; 
} 


div#nav { 
    background-image: url('../img/nav_bg.jpg'); 
    background-repeat: repeat-x; 
    background-position: 25px; 
    height: 40px; 
    background-color: #003A70; 
    -moz-box-shadow: 0 0 8px #666; 
    -webkit-box-shadow: 0 0 8px #666; 
    margin: 0; 
    padding: 0; 
} 

Любая помощь будет оценена.

Answer 1

В теге ul есть запас на нем. Непосредственным решением является добавление ul { margin: 0; padding: 0 } в ваш css.

Вы можете легко проверить такие вещи с помощью средств разработки, таких как Chrome или IE (использовать, нажать F12).

Answer 2

Я не думаю, что ваша разметка очень хороша для этого, но вашей проблеме просто нужно установить переполнение этого элемента, вы не должны устанавливать высоты над элементами, если вы этого не хотите, особенно когда у вас будут дети элементы с высотами.

div#nav { 
background-color: green; 
background-color: #003A70; 
-moz-box-shadow: 0 0 8px #666; 
-webkit-box-shadow: 0 0 8px #666; 
margin: 0; 
padding: 0; 
overflow: auto;} 

Решение: http://jsfiddle.net/aqEzC/3/