SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Where's the whitespace coming from?!

    I've been trying to put together a template and no matter what way I code it, I continually run into a problem with extra whitespace. If you view the following page - http://www.acquiweb.com/fmnsoft/index2.htm - you will see that for the image under the menu and to the right of the logo theres exactly 3px of white space. I've split this design which is 770px wide into 2 with a left and right col. Both cols sit in a div with a border-left of 6px.

    The logo is 312px wide so the left col is then 318px leaving 452px for the right col. Only when I make the containing div 773px will the image appear under the menu, if I revert to 770px it jumps below the left hand content. I've margins, padding and borders all set to 0. At the moment I'm only testing in IE5.5, please tell me this is some weird quirk as I'm totally baffled! [img]images/smilies/frown.gif[/img]

    Here's the css behind the page above.
    Code:
    body {
    background-color: #ffffff;
    margin: 0px;
    padding: 0px;
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: 78%;
    color: #000000;
    }
    
    p, address, li {
    font-style: normal;
    font-size: 1.0em;
    padding: 0.3em;
    }
    
    h1 {
    font-family: verdana, helvetica, arial, sans-serif;
    font-weight: bold;
    font-size: 1.3em;
    padding: 0.5em;
    }
    
    #masthead {
    width: 770px;
    height: 37px;
    }
    
    #menu {
    width: 770px;
    margin: 0px;
    padding: 0px;
    border-left: 6px solid #495D75;
    }
    
    #menu ul {
    margin: 0px;
    padding: 0px;
    display: inline;
    }
    
    #menu ul li {
    margin: 0px;
    padding: 0px;
    display: inline;
    list-style: none;
    }
    
    #content {
    width: 773px;
    margin: 0px;
    padding: 0px;
    border-left: 6px solid #495D75;
    }
    
    .left {
    float: left;
    width: 312px;
    }
    
    .right {
    margin-left: 312px;
    width: 452px;
    }
    
    .logo {
    width: 312px;
    height: 97px;
    margin: 0px;
    padding: 0px;
    }
    
    ul.news li {
    padding: 0.2em;
    list-style-image: url(../pics/news-bullet.gif);
    }
    
    hr.newsdiv {
    background-image: url(../pics/news-divider.gif);
    width: 311px;
    height: 7px;
    text-align: left;
    }

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing all white space from your HTML code. This may not be your problem, but sometimes when a line of code spans multiple lines, IE interprets it as a space.

    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Andy, I tried that as I know with inline lists that can be a problem too but it didn't resolve it. I'm having to revert to tables which stinks

  4. #4
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe it might be your list causing the space. Try removing the margin (and any padding) from the UL

    Great work with the design BTW

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks platinum but menu doesn't have a margin or padding

    Code:
    #menu {
     width: 770px;
     margin: 0px;
     padding: 0px;
     border-left: 6px solid #495D75;
    }
    #menu ul {
     margin: 0px;
     padding: 0px;
     display: inline;
    }
    #menu ul li {
     margin: 0px;
     padding: 0px;
     display: inline;
     list-style: none;
    }


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
  •