- This topic is empty.
-
AuthorPosts
-
October 18, 2008 at 2:04 am #23426
pauler
MemberI 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:
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:
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,
PaulerOctober 18, 2008 at 3:59 am #50630soap
ParticipantIt’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..
October 20, 2008 at 10:30 am #50660johnleigh
ParticipantHi 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!
October 20, 2008 at 4:45 pm #50664pauler
MemberThank 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.
PaulerApril 26, 2012 at 11:00 pm #101852tisha9878
MemberI 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
April 27, 2012 at 5:25 pm #101909noahgelman
ParticipantAnother answer which can work, the gap is caused by line-height. Set the line-height on the link to 0 and the gap disapears.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.