css troubleshoot: gaps between two divs

Hi,

I've some trouble with my CSS layout (check it out at http://www.grobanwire.com/lorem-ipsum/. At the moment, the navigation bar is in a div, but there seems to be a gap between the div below it and the image above it.

Here's a snippet of the HTML:

<div class="layout">

<div class="header">

<!--site banner--><a href="" class="imglink"><img src="uploads/images/layout/banner.jpg" alt="GrobanWire.com&raquo;" /></a>

<!--navigation bar--><div class="nav">

<ul>

<li>
<a href="news/" class="imglink"><img src="uploads/images/nav/news.gif" class="imgover" alt="news" /></a>
</li><!--the list goes on-->

</ul>

</div>

<!--so-called "line break"--><div class="line-break">
<img src="uploads/images/layout/line-break.jpg" alt="" />
</div>

</div>

<!--site content--><div class="body">

<div class="content">

<h1>Lorem Ipsum</h1>

<p>Lorem ipsum admodum intellegebat mea cu, quo ne quot graecis habemus, option timeam ea eam. Cum id rebum errem, his errem postulant pertinacia no, legere deterruisset vis cu. In diam dicam iuvaret vel, solet graeco inermis in per. Vix in tollit laboramus, ei vim putant molestiae constituam, ea dolore nonumy pri. Vero omnes corpora ad pri, his at meis veniam apeirian.</p>
</div>

</div>

</div>



And here's the CSS
.layout {
text-align: justify;
margin: 0 auto;
padding: 0;
/*position: relative;*/
width: 750px;
}

.header {
width: 750px;
position: relative;
margin: 0;
padding: 0;
}

.nav {
background-image: url(/layout5/images/layout/nav-bar.jpg);
height: 28px;
position: relative;
margin: 0;
padding: 0;
}

.nav ul{
padding: 0;
margin: 0;
list-style: none;
}

.nav li {
padding: 0;
margin: 0;
float: left;
}

.line-break {
height: 25px;
position: relative;
margin: 0;
padding: 0;
}

.body {
background-image: url(/layout5/images/layout/body-background.jpg);
background-color: #eacd7c; /* ? */
width: 750px;
position: relative;
padding: 0;
margin: 0;
}

Thanks for your help! :D

Hi there jaimebien,

try changing this rule...
img {
border: none;
}
...to this...
img {
display:block;
border: none;
}
Further reading:-
Eric A. Meyer article (http://devedge-temp.mozilla.org/viewsource/2002/img-table/)
coothead

Hi coothead,

Thanks so much! It works like a snap. Can't believe it's that easy. :P

Thanks again, and have a nice weekend.

Cheers!

No problem, you're welcome. ;)

Hey, I read the article you gave me, and I'm slightly confused. On htmldog.com, they saide block puts a line break before and after the element. (http://www.htmldog.com/guides/cssadvanced/display/). On Meyer's article though, he said that using display: block means that it no longer generates a line box, and so the problem goes away.

Also, I still can't figure out why for the the image in the div below the problematic div (that is, before using display-block) didn't have a mysterious gap.

Anyway, problem is truly solved. Just trying to clear up a few points here.

Thanks again. :P