The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can’t remove space between images

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #23426

    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: 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:


    nVisionary Design

    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:

    /* 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 { width: 85px; background: url(images/nav-studio.jpg) bottom no-repeat; }
    #nav ul li { width: 85px; background: url(images/nav-blog.jpg) bottom no-repeat; }
    #nav ul li{ 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,
    body#blog #nav ul li,
    body#services #nav ul li,
    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; }


    Thank you in advance,


    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..


    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



    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.


    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


    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.