Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Member
    Join Date
    May 2012
    Posts
    58
    Member #
    31696
    Liked
    5 times
    I'm getting this weird gap between the footer and the content for this webpage that I'm designing. I know it's something simple that I'm overlooking, but I can't put my finger on it.
    Here is the CSS

    Body, html
    {
    background-image:url('Images/space.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    }
    img
    {
    border-style: none;
    }
    #Container
    {
    margin: auto;
    width: 850px;
    height: 100%;
    }
    .HorizLinks {

    position: relative; top: 77px; left: 180px;

    }

    .HorizLinks ul {

    margin: 0px;

    }

    .HorizLinks li {

    margin: 0px 15px 0px 0px;
    list-style-type: none;
    display: inline;

    }

    #horizontalnav {
    margin-left:auto;
    margin-right:auto;
    width: 850px;

    }
    .navlinks {

    position: relative;
    top: 4px;
    left: 140px;

    }

    .navlinks ul {

    margin: auto;

    }

    .navlinks li {

    margin: 0px 18px 0px 0px;
    list-style-type: none;
    display: inline;

    }

    .navlinks li a {

    color: #99ff66;
    padding: 5px 12px 7px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    font-family: Verdana;

    }

    .navlinks li a:hover{

    color: #ffff00;
    text-decoration: none;

    }

    #Header
    {
    background-image:url('Images/headerbackground.jpg');
    width: 850px;
    height: 100px;
    position: relative;
    border-bottom: 1px solid #000000;
    }
    #body
    {
    width: 840px;
    padding: 10px 0px 0px 10px;
    background-color:#E0F8E0;
    }
    #footer
    {
    width: 850px;
    background-color: #A9F5A9;
    }

    .center
    {
    text-align: center;
    }
    .title
    {
    background-color: #003300;
    color: #ccff66;
    text-decoration: bold;
    width: 830px;
    }
    Here is the HTML
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <title>Kronos: Timing is everything!</title>
    </head>
    <body>
    <div id="Container">
    <div id="horizontalnav" class="navlinks"
    <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="About.html">About</a></li>
    <li><a href="Characters.html">Characters</a></li>
    <li><a href="Episodes.html">Episode Guide</a></li>
    <li><a href="mailto:jayfmoody@gmail.com">Contact</a></li>
    </ul>
    </div>
    <div id="Header"><a href="index.htm"><img src="Images/header.gif"></a></div>
    <div id="body">
    This website provides information to the TV show, Kronos.
    <br>
    <b>WARNING:</b> This website contains spoilers.
    <p class="center"><b>About the show</b></p>
    <p>
    Kronos is a Canadian sci-fi, teen drama which airs on the Syfy Network in the United States, and on SPACE in Canada. Kronos was cancelled after the first season due to low ratings. However, reruns still air on SPACE, and this show has a cult following!
    <P class="center">
    <b>Synopsis</b></p>
    <P>
    Greg Wiseman informs his son, Michael, that he is a sleeper agent from another planet. Michael uses this information for a webcomic. This resulted in the Wiseman family being tracked down by an intergalactic gang known as the Cold-Blooded Army. Their mission is to get their hands on a machine that controls time, and only Greg knows where it is. Michael's life was chaotic as it was. But now that he knows his father's past, Michael's life gets even more chaotic.
    <p class="center"><b>News & Updates</b></p>
    <p class="title">June 13th, 2012</p>
    <P>
    For the past month, SPACE has moved Kronos to the Friday Night death slot. But now, SPACE has announced they will completely remove the show from their schedule as of July 6th. However, I am happy to announce that the every episode of the series will be released on iTunes on July 30th.
    <P>
    rgmrwgptmwgrt
    <P>
    frefeqf
    </div>
    <div id="footer">
    Copyright 2012 - All Rights Reserved.
    </div>
    </div>
    </body>
    </html>

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Your last paragraph tag.

    1) You should always close your paragraph tag.

    2) If you don't want a margin or padding at the bottom of your paragraph, define a 0 bottom margin and padding. Mind you, you're going to have to find some other way to create a gap between two paragraphs.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by TheGAME1264, post: 237564
    2) If you don't want a margin or padding at the bottom of your paragraph, define a 0 bottom margin and padding. Mind you, you're going to have to find some other way to create a gap between two paragraphs.
    Or:
    Code:
    p:last-of-type{margin-bottom:0;padding-bottom:0;}
    And before you say it, IE can suck it.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Member
    Join Date
    May 2012
    Posts
    58
    Member #
    31696
    Liked
    5 times
    So I closed my last paragraph </P> and it didn't work.

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Justinfh2, post: 237568
    So I closed my last paragraph </P> and it didn't work.
    Try adding what I posted above to your CSS. Also, close all of your <p> tags.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Member
    Join Date
    May 2012
    Posts
    58
    Member #
    31696
    Liked
    5 times
    Quote Originally Posted by Ronald Roe, post: 237570
    Try adding what I posted above to your CSS. Also, close all of your <p> tags.
    Didn't work.

  8. #7
    Junior Member
    Join Date
    Nov 2011
    Posts
    21
    Member #
    30046
    It's not necessary to close.....

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Danish01, post: 237739
    It's not necessary to close.....
    Yeah, it is. I realize it will work a lot of times if you don't, but it will mess up a lot of stuff too. Also, it doesn't validate for HTML5, IIRC. Trust me on this...it is necessary
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Banned
    Join Date
    May 2011
    Location
    Fairfax, CA
    Posts
    2,036
    Member #
    28003
    Liked
    126 times
    Quote Originally Posted by Danish01, post: 237739
    It's not necessary to close.....
    Fail

  11. #10
    Member
    Join Date
    May 2012
    Posts
    58
    Member #
    31696
    Liked
    5 times
    The gap is only now appearing in Internet Explorer. Everything looks fine in Google Chrome, Firefox, and Safari.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:17 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com