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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2009
    Posts
    184
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Strange gap between elements

    Hi, I have an issue with two elements in a container that have a gap between them but I cannot see where the gap is coming from.

    Basically, I have a standard centered page layout, the relevant CSS for holding the elements (a banner and then a nav menu underneath) is:

    Code:
    body {
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    }
    
    #container {
    	width: 1024px;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: left;
    	background-color:#FFFFFF;
    }
    And the CSS for the elements is:

    Code:
    #topbanner {
    	width:974px;
    }
    
    #menubar {
    	width:974px;
    	float:left;
    }
    The banner goes across the top of the page and the idea is that the menubar (which contains a number of images and their rollovers) fits directly underneath without any gap. But there seems to be white space of about 5px in all browsers and I can't see why. I tried adding a clearfloat into the HTML, i.e:

    Code:
    .clearfloat { 
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    But this doesn't do anything.

    HTML is currently:

    Code:
    <body>
    <div id="container">
    <div class="topbanner"><img src="image/banner2.png" alt="banner" /></div>
    <div class="clearfloat"></div>
    <div class="menubar">(various button images)</div>
    <div class="clearfloat"></div>
    Any ideas as this has me stumped!

  • #2
    Regular Coder
    Join Date
    Sep 2009
    Posts
    184
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Don't worry... seems to be fixed now

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello galahad3,
    I'm sure you've discovered this by now but the CSS you've posted here is directed toward id's that are not in your markup. Your markup has classes instead.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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