Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Unwanted white space

Bottom of Page

1 to 3 of 3

  1.  
    • CommentAuthorvonatah
    • CommentTimeMay 21st 2008
     permalink
    I apoligize if this has already been discussed in a previous thread but I have searched the Internet for it and can't find anything. I am currently coding a site and I have a gray nav bar that has white space above it. I think it may be the list that is causing the issue because when I remove it, the bar moves up where it is supposed to be.

    Here is my code:

    CSS

    body {
    background-color: #FFFFFF;
    background-attachment: fixed;
    background-position: center;
    width: 760px;
    }

    #contain {
    margin: 0px auto;
    width: 760px;
    border: 1px solid #000;
    height: auto;
    }

    #head {
    background-image: url(../image/head.jpg);
    background-repeat: no-repeat;
    width: 760px;
    height: 60px;
    }

    #nav {
    color: #FFFFFF;
    background-image: url(../image/navbar.jpg);
    background-repeat: no-repeat;
    width: 760px;
    height: 20px;
    font-family: verdana, sans-serif;
    font-size: 12px;
    line-height: 150%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }
    /* Styles for navigation list */

    # nav ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }

    #nav li {
    display: inline;
    background: transparent;
    margin: 0 0 0 15px;
    padding: 0 0 0 20px;
    }

    #banner {
    background-image: url(../image/banner.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-color: #FFFFFF;
    width: 760px;
    height: 185px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }

    HTML

    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test Site</title>
    <link rel="stylesheet" type="text/css" href="style/screen.css" media="all" />
    <style type="text/css">

    #side {
    height: 470px;
    }

    #main {
    height: 470px;
    }

    </style>

    <script type="text/javascript">

    function LeaveTestSite(message,URL) {
    if (confirm(message)) {
    callupWindow = window.open (URL,"newwindow",config="height=380,width=617,left=80,top=80,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes,location=no,directories=no,status=no");
    }
    }
    </script>

    </head>

    <body>
    <!-- Container -->
    <div id="contain">


    <!-- Header -->
    <div id="head">
    </div>

    <!-- Navigation -->
    <div id="nav">
    <ul><li><a href=" ?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" style='text-decoration: none;' >Home</a></li>
    <li>|</li>
    <li><a href=" ?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" style='text-decoration: none;'>Personal</a></li>
    <li>|</li>
    <li><a href=" ?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" style='text-decoration: none;'>Youth</a></li>
    <li>|</li>
    <li><a href=" ?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" style='text-decoration: none;'>Business</a></li>
    <li>|</li>
    <li><a href=" ?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" style='text-decoration: none;'>About Us</a></li>
    </ul>
    </div>

    <!--Banner/Login-->
    <div id="banner">

    Thank you so much for taking the time to look at it for a newbie like me!
  2.  permalink
    As I can't be bothered to copy and paste this code to test it for you. It would be handy if you could upload a demo of this so I can see what you mean, but it seems to me like a simple fix.

    Try adding the below code to you body
    margin: 0px;
    padding: 0px;

    That should work, if it doesn't upload a demo of this and reply back and I'll take another look at it
  3.  permalink
    To avoid issues like this you could use a CSS reset which neutralizes all default browser values.

1 to 3 of 3

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page