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 Coder
    Join Date
    Nov 2011
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    White space below website

    I have a problem.
    Below my website (http://www.i4-it.be) there is a big white space.
    But this is not in all browsers, but only in firefox i guess.
    Does someone have a solution for this problem?

    CODE:

    body {
    font-family:Tahoma, Geneva, sans-serif;
    margin:0;
    padding:0;
    }

    a:link, a:visited, a:hover, a:active; {
    text-decoration:none;
    }

    #body {
    width:100%;
    height:1000px;;
    background-image:url(img/background.gif);
    }

    #wrapper {
    position:relative;
    margin:auto;
    top:-231px;
    width:1024px;
    height:100%;
    }

    /* Header */

    #bannerbg {
    position:relative;
    top:33px;
    width:100%;
    height:231px;
    background-image:url(img/bannerbg.gif);
    }

    #bannerlogo {
    position:relative;
    top:26px;
    left:170px;
    width:120px;
    height:245px;
    background-image:url(img/logobanner2.gif);
    }

    /* Navigatie */

    #nav {
    position:relative;
    top:-212px;
    left:295px;
    width:444px;
    height:32px;
    }

    .home {
    width:73px;
    height:32px;
    float:left;
    }

    .about {
    width:80px;
    height:32px;
    float:left;
    }

    .services {
    width:94px;
    height:32px;
    float:left;
    }

    .portfolio {
    width:103px;
    height:32px;
    float:left;
    }

    .contact {
    width:94px;
    height:32px;
    float:left;
    }

    /* Footer */

    #bottombg {
    margin:0 auto;
    position:relative;
    top:-309px;
    width:100%px;;
    height:78px;
    background-image:url(img/bottom.gif);
    }

    #bottom {
    margin:0 auto;
    position:relative;
    topx;
    width:1024px;;
    height:78px;
    background-image:url(img/bottom.gif);
    }

    #sitemap {
    position:relative;
    top:13px;
    left:174px;
    width:238px;
    height:54px;
    font-size:9px;
    }

    #sitemap a:link, a:visited {
    color:white;
    text-decoration:none;
    }

    #sitemap a:hover, a:active {
    text-decoration:none;
    color:#009ee3;
    }

    #bottomadres {
    position:relative;
    top:-41px;
    left:715px;
    width:150px;
    height:54px;
    font-size:9px;
    }

    #bottomlogo {
    position:relative;
    top:-48px;
    left:86px;
    width:60px;
    height:56px;
    background-image:url(img/logo.gif);
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    It's caused by the numerous negative top value within your css.

    No quick fix to this I don't think. If you set #bannerbg to position:absolute and remove the top setting from #wrapper that's a start, then you need to work through your css and use float, margins and probably a bit more abolute positioning with the aim of removing all the top properties on your main elements.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    It's caused by the numerous negative top value within your css.

    No quick fix to this I don't think. If you set #bannerbg to position:absolute and remove the top setting from #wrapper that's a start, then you need to work through your css and use float, margins and probably a bit more abolute positioning with the aim of removing all the top properties on your main elements.
    and if i use negative values in 'margin-left' or 'margin-top' is that a problem?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    There shouldn't really be a need to use negative margins as a general solution to layout. If you're using it to pomove elements up so they are positioned side by side then float is a much better option.

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    There shouldn't really be a need to use negative margins as a general solution to layout. If you're using it to pomove elements up so they are positioned side by side then float is a much better option.
    Oke thank you very much!


  •  

    Posting Permissions

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