Can’t remove space between images

[pauler]

I have search through the forum looking for a solution to my problem to no avail. I have two spaces (gaps) in my test site which I can not seem to get rid of. You can view the example at the following address: http://nvisionarydesign.com/test The first is above my navigation and the second is just below the main picture. I would appreciate your help regarding this issue.

Here is my xhtml code:

Code:

• Home
• Studio
• Blog
• Services
• Showroom
• Contacts

Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.

Here is my CSS:

Code:

/* RESETS & BASIC PAGE SETUP v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 0px;
font: 62.5% Helvetica, sans-serif;
background: url(images/body-bg1.jpg) top left repeat;
}
ol, ul {
list-style: none;
}
p { font-size: 1.6em; line-height: 1.2em; margin-bottom: 1.2em; font-family: Georgia, serif; }
a img { border: none; display: block; }
h1 { font-family; Georgia, serif; font-size: 2.4em; font-weight: normal; color: #ffffff; }

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
/* END RESET */

/* TOOLBOX */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* END TOOLBOX */

#header { width: 955px; height: 440px; margin: 0 auto; }

#nav { height: 30px; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
#nav ul li a { display: block; height: 30px; float: left; text-indent: -9999px; border: none; }
#nav ul li a.home { width: 433px; background: url(images/nav-home.jpg) bottom no-repeat; }
#nav ul li a.studio { width: 85px; background: url(images/nav-studio.jpg) bottom no-repeat; }
#nav ul li a.blog { width: 85px; background: url(images/nav-blog.jpg) bottom no-repeat; }
#nav ul li a.services{ width: 85px; background: url(images/nav-services.jpg) bottom no-repeat; }
#nav ul li a.showroom { width: 85px; background: url(images/nav-showroom.jpg) bottom no-repeat; }
#nav ul li a.contacts { width: 182px; background: url(images/nav-contacts.jpg) bottom no-repeat; }
#nav ul li a:hover { background-position: center; }
body#home #nav ul li a.home,
body#studio #nav ul li a.studio,
body#blog #nav ul li a.blog,
body#services #nav ul li a.services,
body#showroom #nav ul li a.showroom,
body#contacts #nav ul li a.contacts { background-position: top; }

#main-logo { padding: 0 0 0 0; width: 955px; height: 111px; overflow: hidden; background-image: url(images/logo.jpg); background-repeat: no-repeat; }

#how-replace { padding: 0 0 0 0; width: 955px; height: 41px; overflow: hidden; background-image: url(images/how-we.jpg); background-repeat: no-repeat; }

#page-wrap { width: 955px; margin: 0 auto; background: url(images/content-bg.jpg) repeat-y; }

#main-content { padding: 0px 150px 30px 150px; color:#FFFFFF }

#footer { height: 79px; width: 955px; margin: 0 auto; background: url(images/footer.jpg) no-repeat; }

/* END STRUCTURE */

Thank you in advance,
Pauler

[soap]

It’s a bit gimmicky, but if you put a -3px margin-top on #nav it works. Should work too for the other thing, either top or bottom margin. Tired..

[johnleigh]

Hi Pauler

I would recommend simply to declare the header image as "block" like this below:
#header img{display:block;}

This should sort you out

cheers!

[pauler]

Thank you soap and johnleigh for your solutions. I ended up using the #header img{diplay:block;} solution and it work perfectly. Thank you both for your time and knowledge.
Pauler

[tisha9878]

I just wanted to say THANK YOU for this answer!!! The #header img{display: block} just worked for me with an assignment I have been working on for a week now :) Thanks

[noahgelman]

Another answer which can work, the gap is caused by line-height. Set the line-height on the link to 0 and the gap disapears.

[Author]

Posts