Forums

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:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
	<title>nVisionary Design</title>
	    <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
</head>

<body id=\"home\">

	<div id=\"header\">
		
		<img src=\"images/header-top.jpg\" alt=\"Nvisionary Design Header\" />
	
	  <div id=\"nav\">
			<ul>
				<li><a class=\"home\" href=\"#\">Home</a></li>
				<li><a class=\"studio\" href=\"#\">Studio</a></li>
				<li><a class=\"blog\" href=\"#\">Blog</a></li>
				<li><a class=\"services\" href=\"#\">Services</a></li>
				<li><a class=\"showroom\" href=\"#\">Showroom</a></li>
				<li><a class=\"contacts\" href=\"#\">Contacts</a></li>
			</ul>
		</div>
	
    
        <h1 class=\"main-logo\">
            <a href=\"/\">
                <img src=\"images/logo.jpg\" alt=\"nVisionary Design - Your Vision, Our Solutions, Make Reality\" />                
                </a>                
                </h1>
        
        <img src=\"images/main-pic.jpg\" alt=\"Main Picture\" />
        
        <h1 class=\"how-replace\">
      		<a href=\"#\">
        		<img src=\"images/how-we.jpg\" alt=\"How We Can Help:\" />                
                </a>                
                </h1>
    </div>
	
<div id=\"page-wrap\">	
		
    <div id=\"main-content\">
            
            <p>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.</p>
    </div>
            
            <div id=\"sidebar\">
            </div>
	
</div>
	
	<div id=\"footer\">		
    </div>

</body>

</html>

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

treehouse : what would you like to learn today?

Forums

Can't remove space between images