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 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2009
    Location
    United Kingdom...for now
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unwanted DIV behaviour

    I'm not sure what to say. I am rebuilding a website I made, but am using divs instead of tables, everything seemed fine, until I put something in the content div. Then it just went weird. It seems to have shifted down a bit, revealing the page background in between the content area and the navbar. I really have no idea what could be causing this, or why, so I am asking for help in tracking down and fixing the problem.

    Thanks.

    Attached is a screenshot demonstrating the problem. In Firefox, it only happens at the top, but in IE it happens at the top and the bottom.
    Attached Thumbnails Attached Thumbnails Unwanted DIV behaviour-untitled-1.jpg  

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    do you have a link to the page online.

    vineet

  • #3
    New Coder
    Join Date
    Dec 2009
    Location
    United Kingdom...for now
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    No, it isn't up yet.

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    ok, post your html and css to see whats wrong.

    vineet

  • #5
    New Coder
    Join Date
    Dec 2009
    Location
    United Kingdom...for now
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, the HTML is just a div with id="content".

    Here's the CSS for it:
    Code:
    #content {
    	width:770px;
    	margin-left:8px;
    	margin-right:10px;
    	background-color:#FFFFFF;
    	background-image:url(../images/backgrounds/paper.jpg);
    	background-repeat:repeat;
    	min-height:0px;
    }

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by johngreenwood View Post
    Well, the HTML is just a div with id="content".

    Here's the CSS for it:
    Code:
    #content {
    	width:770px;
    	margin-left:8px;
    	margin-right:10px;
    	background-color:#FFFFFF;
    	background-image:url(../images/backgrounds/paper.jpg);
    	background-repeat:repeat;
    	min-height:0px;
    }
    If you are looking for some help on your code, you need to show it- the complete HTML & CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Dec 2009
    Location
    United Kingdom...for now
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, HTML body section:
    Code:
    <body onload="stretchPage()">
     <div id="container">
      <div id="header"></div>
       <div id="navbar">
        <ul id="MenuBar1" class="MenuBarHorizontal">
         <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
          <ul>
           <li><a href="#">Item 1.1</a></li>
           <li><a href="#">Item 1.2</a></li>
           <li><a href="#">Item 1.3</a></li>
          </ul>
         </li>
         <li><a href="#">Item 2</a></li>
         <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
          <ul>
           <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
             <li><a href="#">Item 3.1.1</a></li>
             <li><a href="#">Item 3.1.2</a></li>
            </ul>
           </li>
           <li><a href="#">Item 3.2</a></li>
           <li><a href="#">Item 3.3</a></li>
          </ul>
         </li>
         <li><a href="#">Item 4</a></li>
        </ul>
       </div>
       <div id="content">
       <p>Lorem ipsum dolor sit amet, [ … ] rhoncus a urna. </p>
       </div>
       <div id="footer"></div>
    </div>
      <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
      </script>
    </body>
    Code:
    body {
    	margin:0px;
    	background-image:url(../images/backgrounds/wp_damask_002.gif);
    	background-repeat:repeat;
    	font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
    	font-size:10pt;
    }
    
    p {
    	margin-left:40px;
    	margin-right:40px;
    }
    
    #header {
    	width:770px;
    	height:140px;
    	background-image:url(../images/headerbg-1.jpg);
    	margin-left:8px;
    	margin-right:10px;
    }
    
    #navbar {
    	width:770px;
    	height:30px;
    	margin-left:8px;
    	margin-right:10px;
    	background-color:#444444;
    	border-top: solid 1px #666666;
    }
    
    #content {
    	width:770px;
    	margin-left:8px;
    	margin-right:10px;
    	background-color:#FFFFFF;
    	background-image:url(../images/backgrounds/paper.jpg);
    	background-repeat:repeat;
    	min-height:0px;
    	position:relative;
    }
    
    #footer {
    	width:770px;
    	height:90px;
    	margin-left:8px;
    	margin-right:10px;
    	background-color:#444444;
    	position:relative;
    }
    
    #container {
    	width:788px;
    	height:auto;
    	margin-left:auto;
    	margin-right:auto;
    	background-image:url(../images/shadow/shadowLong.png);
    	background-repeat:repeat-y;
    }
    Thank you.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try adding
    Code:
    *{margin:0;padding:0;}
    into your CSS, to reset all browser specific default values of margins and paddings from all elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    johngreenwood (12-20-2009)

  • #9
    New Coder
    Join Date
    Dec 2009
    Location
    United Kingdom...for now
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Perfect. the unwanted gap is closed and I may continue. 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
    •