SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2009
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange issue with 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. #2
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First thing i noticed is that your css selectors #topbanner and #menubar refer to element ids that don't exist in the markup.

    <div class="topbanner"><img src="image/banner2.png" alt="banner" /></div>
    <div class="menubar">(various button images)</div>

    you could either change the css to:

    Code:
    .topbanner {
    	width:974px;
    }
    
    .menubar {
    	width:974px;
    	float:left;
    }
    or the markup to:

    Code:
    <div id="topbanner"><img src="image/banner2.png" alt="banner" /></div>
    <div id="menubar">(various button images)</div>
    Maybe this is the issue?
    zbing

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    try *{margin:0;padding:0;} and/or img {vertical-align:bottom;}. Other than that your prob going to have to supply a link and then someone can tell you in two secs.

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2009
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric, vertical-align:bottom worked straight off.

    Bit of a strange one, it doesn't sound like an obvious style to try but it worked!

    Thanks again

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    O good your welcome. For your knowledge, her are all the ways to fix that issue. http://www.visibilityinherit.com/cod...ge-example.php


Bookmarks

Posting Permissions

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