Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:

    Code:
    <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
    Code:
    .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!

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there jaimebien,

    try changing this rule...
    Code:
    img {
    	border: none;
    	}
    ...to this...
    Code:
    img {
            display:block;
    	border: none;
    	}
    Further reading:-
    coothead

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    No problem, you're welcome.

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •