www.webdeveloper.com
Results 1 to 8 of 8

Thread: CSS or HTML Problem?

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184

    CSS or HTML Problem?

    I have a test page for a website where I am having problems positioning the "Content" area. The only thing in the content ares is an H1 tag. Because of this H1 tag, the content area is being pushed down 15 pixels. If I remove the H1 tag, the content area pops back into place.

    I have spent about a day deleting things from the web page and CSS file until I have the bare minimum to show the problem.

    I would sure appreciate it if someone could tell me what is causing this problem.
    Both the HTML and CSS code have been W3C Validated.

    Here is the website: http://www.lawrence-nv.us/Molly/test/

    Here is the HTML code:
    Code:
    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Molly Murphy - Henderson Symphony Orchestra</title>
        <meta name="description" content="Fine Art Director, Symphony Orchestra Director, Music Teacher, Henderson, NV, Las Vegas">
        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="../css/navstyle.css">
    
    </head>
        <body>
            <div id="top">
                <div id="page">
                    <div id="banner"></div>
                    <div id="navigation"> <!--#include virtual="../includes/nav2.html" --> </div>
                    <div id="content">
                       <h1>- Henderson Symphony Orchestra -</h1>
                    </div><!-- /content -->
                </div><!-- /page -->
            </div><!-- /top -->
        </body>
    </html>
    Here is the CSS code:
    Code:
    html {
    margin : 0;
    padding : 0;
    }
    
    #page  {
       height: 700px;
       width: 960px;
       position: relative;
       margin-left: auto;
       margin-right: auto;
       margin-top: 0px;
       margin-bottom: 0px;
    }
    
    body  {
       background-color: #444d75;
       background-image: none;
       margin: 0px;
       padding: 0px;
       height: 100%;
    }
    
    #banner {
      position: relative;
      left: 0px;
      top: 0px;
      width: 960px;
      height: 150px;
      background-image: url('../images/banner.jpg');
      background-repeat: no-repeat;
      z-index: 100;
    }
    
    #navigation {
      position: relative; left: 0px; top: 0px;
      height: 45px; z-index: 10;
      padding: 0px;
      border: 0px;
    }
    
    #content  {
       position: relative;
       left: 0px;
       top: 0px;
       z-index: 3;
       width: 959px;
       min-height: 500px;
       padding: 0px;
       border: 0px;
       margin: 0px;
       background-color: #d3c2b5;    
    }
    Larry

  2. #2
    Join Date
    Dec 2012
    Posts
    98
    It's a CSS problem, this'll fix it

    Code:
    h1 {
        margin: 0;
    }

  3. #3
    Join Date
    Aug 2006
    Posts
    1,906
    You're using the default margins for h1, which includes that 15px top margin you're seeing. If you change your h1 to margin-top:0 you'll eliminate it.

    ...then the answer to the next question is...

    Remove the forced 45px height on your #navigation div.

    Dave

  4. #4
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184
    Thank you both for solving my problem.

    My question now is why does the top margin of the H1 push the content DIV down rather than just moving the H1 down on the content page?

    I have never run into this problem before.
    Larry

  5. #5
    Join Date
    Aug 2006
    Posts
    1,906
    It has to do with "Collapsing Margins", though I confess I don't understand the whys and wherefores of it all...

    http://www.w3.org/TR/CSS2/box.html

    The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

    Dave

  6. #6
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184
    Quote Originally Posted by tracknut View Post
    It has to do with "Collapsing Margins", though I confess I don't understand the whys and wherefores of it all...

    http://www.w3.org/TR/CSS2/box.html

    The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

    Dave
    Thanks again Dave,

    I have designed about 30 or so websites over the past years and have never run into this problem before. I did a quick read of the link you provided and it is a little confusing. I am going to have to read this again to see if I can understand it.

    Edit: In reading the link again, I may not have run into this before because I have used a lot of absolute positioned boxes. On this website I thought I would see how far I could get by using relative positioning.
    Last edited by lkeeney; 04-04-2013 at 05:45 PM.
    Larry

  7. #7
    Join Date
    Apr 2013
    Posts
    135
    Yeh, I think iBeZi is right problem in css. You're using the default margins for h1, which includes that 15px top margin you're seeing. If you change your h1 to margin-top:0 you'll eliminate it.

  8. #8
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184

    Problem Resolved

    Yes, this was the problem and it works fine now. Thanks.
    Larry

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles