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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Strange Gap on Left side

    So I am trying to get the container to fill the entire web browser page and there is a strange gap on the left hand side. Confused because I tried specifying a bunch of positions and adding margins/padding to no avail.
    Web page http://www.furniturelandnewjersey.com/test.html

    HTML
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="keywords"  content="furniture nj, furniture, furniture store nj, funiture land,furniture nj, sofas, modern furniture, funiture store in nj"/> 
    <meta name="description" content="furniture nj, furniture store nj, furniture outlet nj, furniture warehouse nj, furniture new jersey, furniture store in nj, furniture"/>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="stylesheettest.css" />
    <style type="text/css">
    </style>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if IE]>
    <style type="text/css"> 
    Content, section { zoom: 1;}
    </style>
    <![endif]-->
    <title>Furniture Land: NJ's Premier Furniture Store</title>
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-1450128-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    </head>
    
    <body>
    
    <div class="container">
    <div class="wrapper">
      <header>
        <a href="http://www.furniturelandnewjersey.com"><img src="http://www.furniturelandnewjersey.com/image/images/logo3.png" alt="Furniture Store NJ" width="1000" height="116" style=" display:block; align:left;" /></a>
    
        <div id="menuheader">
    	<ul id="navlists">
    		<li id="item-first"><a href="http://www.furniturelandnewjersey.com" target="_top"><span>Home</span></a></li> 
    		<li><a href="http://www.furniturelandnewjersey.com/bedrooms1.html" target="_top"><span>Bedrooms</span></a></li>
    		<li><a href="http://www.furniturelandnewjersey.com/living-rooms1.html" target="_top"><span>Living Rooms</span></a></li>
    		<li><a href="http://www.furniturelandnewjersey.com/dining-rooms1.html" target="_top"><span>Dining Rooms</span></a></li>
    		<li><a href="http://www.furniturelandnewjersey.com/kids-bedrooms1.html" target="_top"><span>Kids Bedrooms</span></a></li>
            <li><a href="http://www.furniturelandnewjersey.com/coffee-tables1.html" target="_top"><span>Coffee Tables</span></a></li>
            <li><a href="http://www.furniturelandnewjersey.com/sofas1.html" target="_top"><span>Sofas</span></a></li>
            <li><a href="http://www.furniturelandnewjersey.com/sofa-beds1.html" target="_top"><span>Sofa Beds</span></a></li>
             <li><a href="http://www.furniturelandnewjersey.com/futons1.html" target="_top"><span>Futons</span></a></li>
    		<li id="item-last"><a href="http://www.furniturelandnewjersey.com/mattresses1.html" target="_top"><span>Mattresses </span></a></li>
    	</ul>
    </div> 
      </header>
      <div class="mainbody">
        <div class="sidebar1">
        <nav>
          <ul>
            <li><a href="http://www.furniturelandnewjersey.com/storehours.html">Store Hours</a></li>
            <li><a href="http://furniturelandnewjersey.com/contact.html"> Contact</a></li>
            <li><a href="http://maps.google.com/maps?q=160+Passaic+Avenue+B24,+Kearny,+NJ+07032">Directions</a></li>
            <li><a href="http://www.furniturelandnewjersey.com/prices.html">Prices</a></li>
            <li><a href="http://www.facebook.com/pages/Furniture-Land/103100306437927">Deals</a></li>
            <li><a href="http://www.furniturelandnewjersey.com/chairs1.html">Chairs</a></li>
            <li><a href="http://www.furniturelandnewjersey.com/entertainment1.html">Entertainment</a></li>
            <li><a href="http://www.furniturelandnewjersey.com/futons1.html">Futons</a></li>
            <li><a href="http://www.furniturelandnewjersey.com/mattresses1.html">Mattresses</a></li>
          </ul>
    	  <aside><hr width="183px" align="left"/>
         <table cellpadding="0" width="183" cellspacing="0"><tr>
    <td><a href="http://www.facebook.com/pages/Furniture-Land/103100306437927" target="_blank"><img src="http://www.furniturelandnewjersey.com/image/images/FaceBook_48x48.png" alt="Join Our Facebook Fan Page" width="32" height="32" border="0"></a></td>
    <td><a href="http://twitter.com/FurnitureLandNJ" target="_blank"><img src="http://www.furniturelandnewjersey.com/image/images/Twitter_48x48.png" alt="Follow Us On Twitter" width="32" height="32" border="0"></a></td>
    <td><a href="https://plus.google.com/117210824768404927418" target="_blank"><img src="http://www.furniturelandnewjersey.com/image/images/GooglePlus.png" alt="Add Us on Google Plus +" width="30" height="30" border="0"></a></td>
    <td><a href="http://twitter.com/FurnitureLandNJ" target="_blank"><img src="http://www.furniturelandnewjersey.com/image/images/Feed_32x32.png" alt="Follow Us On Twitter" width="32" height="32" border="0"></a></td>
    </tr>
    </table>
    <p>Like and Follow Us!</p>
        </aside>
        </nav>      <!-- end .sidebar1 --></div>
      <article class="content">
    
        <section><table width="780"  cellpadding="0">
        
        <td width="450" height="328"  align="center" valign="top" bgcolor="#FFFFFF"> 
    <h1>NJ's Premier Furniture Store</h1>
    <p><font style="font-family:Verdana; font-size:12pt; color:#c71f2e; text-align: right;"><b> Coming Soon: New Location in West Orange!</b></font style><br>
          <p> Furniture Land has been serving NJ for 
            over 20 years, providing our customers with unique furniture at discount prices. Visit our furniture showroom to see our entire selection! Additional colors, styles, and options are available in store. We will be glad to help you find the furniture for your needs, continuing our proud tradition of being the premier furniture store in NJ.<br><br> <b>Call 201-998-6656 for Prices!</b><br><br>
           Featured on HGTV's show "HOME RULES!" <br><br>
           Also featured in the independent short film "Open."</p>
        </td>
          <td align="left"> <img src="http://www.furniturelandnewjersey.com/image/bedroom/Jessica_sm.jpg" alt="Jessica Bedroom Set" width="296" height="233"/> 
    </td></table></section>
        <!-- end .content --></article>
    	<!-- end .mainbody --></div>
      <footer><table>
      <tr>
      <td>
      </tr>
      </table>
       <p1><a href="http://www.furniturelandnewjersey.com">Home</a> |<a href="http://www.furniturelandnewjersey.com/furniture-store-nj.html">Furniture Store NJ</a> |<a href="http://maps.google.com/maps?q=160+Passaic+Avenue+B24,+Kearny,+NJ+07032">Directions</a> |<a href="http://www.furniturelandnewjersey.com/storehours.html">Store Hours</a> |<a href="http://www.furniturelandnewjersey.com/mattresses-info.html">Mattress Info</a></p1><p>&copy;2012 Furniture Land, Inc. All Rights Reserved.| Furniture Land is a real furniture store and mattress outlet in NJ with a full showroom and warehouse. </p>
      </footer>
    <!-- end .wrapper --></div>
      <!-- end .container --></div>
    </body>
    </html>
    CSS
    Code:
    <!--
    #menuheader {
    position : relative;
    margin-left : 10px;
    margin-right : 10px;
    display : block;
    width : 1000px;
    height : 35px;
    margin : 0;
    padding : 0;
    font : 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    line-height : 35px;
    text-decoration : none;
    font-family : "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    }
    #menuheader-roundrect, #menuheader-fill {
    display : block;
    position : absolute;
    width : 900px;
    height : 35px;
    top : 0;
    left : 0;
    z-index : 2;
    }
    #menuheader #navlists {
    position : relative;
    display : block;
    margin : 0;
    padding : 0;
    }
    #menuheader #navlists li {
    display : inline;
    text-align : center;
    color : white;
    }
    #menuheader #navlists li a {
    float : left;
    height : 35px;
    overflow : hidden;
    background : url(http://www.furniturelandnewjersey.com/images/top_navigation.png) no-repeat;
    color : white;
    text-align : center;
    width : 100px;
    background-position : 100% 0%;
    outline : none;
    text-decoration : none;
    }
    #menuheader #navlists li a:link {
    cursor : pointer;
    }
    #menuheader #navlists li#item-first a {
    background-position : 0% 0%;
    }
    #menuheader #navlists li#item-first a.before {
    background-position : 0% -35px;
    }
    #menuheader #navlists li#item-first a:hover {
    background-position : 0% -70px;
    }
    #menuheader #navlists li#item-first a:active {
    background-position : 0% -105px;
    }
    #menuheader #navlists li a.before {
    background-position : 100% -35px;
    }
    #menuheader #navlists li a:hover {
    background-position : 100% -70px;
    }
    #menuheader #navlists li a:active {
    background-position : 100% -105px;
    }
    #menuheader #navlists li#item-last a {
    background-position : -100px 0%;
    }
    #menuheader #navlists li#item-last a.before {
    background-position : -100px -35px;
    }
    #menuheader #navlists li#item-last a:hover {
    background-position : -100px -70px;
    }
    #menuheader #navlists li#item-last a:active {
    background-position : -100px -105px;
    }
    #menuheader #navlists li a.current {
    background-position : 100% -140px;
    }
    #menuheader #navlists li#item-last a.current {
    background-position : -100px -140px;
    }
    hr {
    color : #ccc;
    background-color : #ccc;
    }
    .container footer p {
    font-family : Verdana, Geneva, sans-serif;
    font-size : 12px;
    font-style : normal;
    color : #999;
    text-align : center;
    }
    ul, ol, dl {
    padding : 0;
    margin : 0;
    }
    h1, h2, h3, h4, h5, h6 {
    margin-top : 0;
    padding-right : 15px;
    padding-left : 15px;
    font-family : Verdana;
    color : #333333;
    text-align : left;
    font-size : 20px;
    }
    p {
    margin-top : 0;
    padding-right : 15px;
    padding-left : 15px;
    font-family : Verdana;
    color : #666666;
    text-align : left;
    font-size : 16px;
    }
    a img {
    border : none;
    }
    a:link {
    color : #42413c;
    text-align : left;
    }
    a:visited {
    color : #42413c;
    text-decoration : underline;
    }
    a:hover, a:active {
    text-decoration : none;
    color : #c71f2e;
    }
    a {
    outline : none;
    }
    .container {
    width : 100%;
    height: 100%;
    overflow: hidden;
    background : #F0F0F0;
    margin : 0 auto;
    margin-top: -8px;
    margin-bottom: -8px;
    padding-left: 0px;
    padding-right: 8px;
    padding-bottom: 8px;
    }
    .wrapper {
    width : 1000px;
    height: 100%;
    overflow: hidden;
    background : #ffffff;
    margin : 0 auto;
    border: 1px solid; border-color: #e5e5e5 #dbdbdb #d2d2d2; -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; box-shadow: rgba(0,0,0,0.3) 0 1px 3px; 
    padding-left: 20px;
    padding-right: 20px;
    }
    
    .mainbody {
    width : 1000px;
    background : #ffffff;
    margin : 0 auto;
    }
    .content {
    padding : 10px 0;
    width : 780px;
    float : right;
    }
    .content ul, .content ol {
    padding : 0 15px 15px 40px;
    }
    nav ul {
    list-style : none;
    border-top : 0 solid #666;
    margin-top : 5px;
    margin-bottom : 15px;
    text-indent : 15px;
    font-size : 14px;
    font-family : Verdana, Geneva, sans-serif;
    }
    nav ul li {
    border-bottom : 0 solid #666;
    }
    nav ul a, nav ul a:visited {
    padding : 5px 5px 5px 15px;
    display : block;
    width : 160px;
    text-decoration : none;
    background : #ffffff;
    }
    nav ul a:hover, nav ul a:active {
    background : #eeeeee;
    }
    footer {
    padding : 0 0;
    background : #fff;
    position : relative;
    clear : both;
    }
    header, section, footer, aside, nav, article, figure {
    display : block;
    text-align : center;
    float : left;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    color : #666666;
    display: inline;
    }
    .sidebar nav aside hr {
    	width : 183px;
    	
    }
    .sidebar nav aside table {
    	width : 183px;
    	border: 0;
    }
    .sidebar nav aside table img {
    	border: 0;
    	
    }
    .container article table {
    border-left-width : 2px;
    border-left-style : solid;
    border-left-color : #c71f2e;
    margin-left : -22px;
    width: 780px;
    }
    .container footer table {
    border-top-width : 1px;
    border-top-style : solid;
    border-right-style : none;
    border-bottom-style : none;
    border-left-style : none;
    border-top-color : #999;
    border-collapse : collapse;
    font-family : Verdana, Geneva, sans-serif;
    font-size : 14px;
    font-style : normal;
    line-height : normal;
    color : #999;
    padding-left : 50px;
    padding-top : 0;
    text-align : left;
    width : 998px;
    }
    .container footer p1 a:hover, .container footer p1 a:active {
    background : #fff;
    color : #c71f2e;
    text-align : center;
    font-size : 13px;
    text-decoration : none;
    }
    .container footer p1 {
    font-family : Verdana, Geneva, sans-serif;
    font-size : 13px;
    color : #666;
    text-align : center;
    text-decoration : none;
    }-->

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    no one has any idea. There is a few pixel gap along the left between the grey background and the edge of your browser window, I need to figure out how to eliminate it. Please anyone have any ideas.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Code:
    body{margin:0}

  • Users who have thanked SB65 for this post:

    atwd (07-29-2012)

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    This:




    or



    STR = Stretch

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Strange Gap on Left side-screen-shot-2012-07-25-10.54.09-pm.jpg
    Still not sure how to eliminate the gap. If you compare it to the old way furniturelandnj.com it looks like it shifted over somehow.

    btw tempz what browser you viewing in?

  • #6
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I modified things and basically there is a gap around all sides of the grey. What is that from? it might be easier to figure out now.
    Code:
    <!--
    #menuheader {
    position : relative;
    margin-left : 10px;
    margin-right : 10px;
    display : block;
    width : 1000px;
    height : 35px;
    margin : 0;
    padding : 0;
    font : 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    line-height : 35px;
    text-decoration : none;
    font-family : "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    }
    #menuheader-roundrect, #menuheader-fill {
    display : block;
    position : absolute;
    width : 900px;
    height : 35px;
    top : 0;
    left : 0;
    z-index : 2;
    }
    #menuheader #navlists {
    position : relative;
    display : block;
    margin : 0;
    padding : 0;
    }
    #menuheader #navlists li {
    display : inline;
    text-align : center;
    color : white;
    }
    #menuheader #navlists li a {
    float : left;
    height : 35px;
    overflow : hidden;
    background : url(http://www.furniturelandnewjersey.com/images/top_navigation.png) no-repeat;
    color : white;
    text-align : center;
    width : 100px;
    background-position : 100% 0%;
    outline : none;
    text-decoration : none;
    }
    #menuheader #navlists li a:link {
    cursor : pointer;
    }
    #menuheader #navlists li#item-first a {
    background-position : 0% 0%;
    }
    #menuheader #navlists li#item-first a.before {
    background-position : 0% -35px;
    }
    #menuheader #navlists li#item-first a:hover {
    background-position : 0% -70px;
    }
    #menuheader #navlists li#item-first a:active {
    background-position : 0% -105px;
    }
    #menuheader #navlists li a.before {
    background-position : 100% -35px;
    }
    #menuheader #navlists li a:hover {
    background-position : 100% -70px;
    }
    #menuheader #navlists li a:active {
    background-position : 100% -105px;
    }
    #menuheader #navlists li#item-last a {
    background-position : -100px 0%;
    }
    #menuheader #navlists li#item-last a.before {
    background-position : -100px -35px;
    }
    #menuheader #navlists li#item-last a:hover {
    background-position : -100px -70px;
    }
    #menuheader #navlists li#item-last a:active {
    background-position : -100px -105px;
    }
    #menuheader #navlists li a.current {
    background-position : 100% -140px;
    }
    #menuheader #navlists li#item-last a.current {
    background-position : -100px -140px;
    }
    hr {
    color : #ccc;
    background-color : #ccc;
    }
    .container footer p {
    font-family : Verdana, Geneva, sans-serif;
    font-size : 12px;
    font-style : normal;
    color : #999;
    text-align : center;
    }
    ul, ol, dl {
    padding : 0;
    margin : 0;
    }
    h1, h2, h3, h4, h5, h6 {
    margin-top : 0;
    padding-right : 15px;
    padding-left : 15px;
    font-family : Verdana;
    color : #333333;
    text-align : left;
    font-size : 20px;
    }
    p {
    margin-top : 0;
    padding-right : 15px;
    padding-left : 15px;
    font-family : Verdana;
    color : #666666;
    text-align : left;
    font-size : 16px;
    }
    a img {
    border : none;
    }
    a:link {
    color : #42413c;
    text-align : left;
    }
    a:visited {
    color : #42413c;
    text-decoration : underline;
    }
    a:hover, a:active {
    text-decoration : none;
    color : #c71f2e;
    }
    a {
    outline : none;
    }
    .container {
    width : 100%;
    height: 100%;
    overflow: hidden;
    background : #F0F0F0;
    margin : 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    }
    .wrapper {
    width : 1000px;
    height: 100%;
    overflow: hidden;
    background : #ffffff;
    margin : 0 auto;
    border: 1px solid; border-color: #e5e5e5 #dbdbdb #d2d2d2; -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; box-shadow: rgba(0,0,0,0.3) 0 1px 3px; 
    padding-left: 20px;
    padding-right: 20px;
    }
    
    .body{margin:0}
    
    .mainbody {
    width : 1000px;
    background : #ffffff;
    margin : 0 auto;
    }
    .content {
    padding : 10px 0;
    width : 780px;
    float : right;
    }
    .content ul, .content ol {
    padding : 0 15px 15px 40px;
    }
    nav ul {
    list-style : none;
    border-top : 0 solid #666;
    margin-top : 5px;
    margin-bottom : 15px;
    text-indent : 15px;
    font-size : 14px;
    font-family : Verdana, Geneva, sans-serif;
    }
    nav ul li {
    border-bottom : 0 solid #666;
    }
    nav ul a, nav ul a:visited {
    padding : 5px 5px 5px 15px;
    display : block;
    width : 160px;
    text-decoration : none;
    background : #ffffff;
    }
    nav ul a:hover, nav ul a:active {
    background : #eeeeee;
    }
    footer {
    padding : 0 0;
    background : #fff;
    position : relative;
    clear : both;
    }
    header, section, footer, aside, nav, article, figure {
    display : block;
    text-align : center;
    float : left;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    color : #666666;
    display: inline;
    }
    .sidebar nav aside hr {
    	width : 183px;
    	
    }
    .sidebar nav aside table {
    	width : 183px;
    	border: 0;
    }
    .sidebar nav aside table img {
    	border: 0;
    	
    }
    .container article table {
    border-left-width : 2px;
    border-left-style : solid;
    border-left-color : #c71f2e;
    margin-left : -22px;
    width: 780px;
    }
    .container footer table {
    border-top-width : 1px;
    border-top-style : solid;
    border-right-style : none;
    border-bottom-style : none;
    border-left-style : none;
    border-top-color : #999;
    border-collapse : collapse;
    font-family : Verdana, Geneva, sans-serif;
    font-size : 14px;
    font-style : normal;
    line-height : normal;
    color : #999;
    padding-left : 50px;
    padding-top : 0;
    text-align : left;
    width : 998px;
    }
    .container footer p1 a:hover, .container footer p1 a:active {
    background : #fff;
    color : #c71f2e;
    text-align : center;
    font-size : 13px;
    text-decoration : none;
    }
    .container footer p1 {
    font-family : Verdana, Geneva, sans-serif;
    font-size : 13px;
    color : #666;
    text-align : center;
    text-decoration : none;
    }-->

  • #7
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 309 Times in 308 Posts
    Did you try SB65's suggestion? That looks like the right answer, if I'm seeing the same gap you're talking about.

    Dave

  • #8
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I put that in but there is no change.
    Structure is like this

    Wrapper
    Container with outline border
    The rest of the website content

    Out side the wrapper there is a a few pixel gap along all 4 sides so the wraper plus everything else appears to be centered.

  • #9
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 309 Times in 308 Posts
    Quote Originally Posted by atwd View Post
    I put that in but there is no change.
    You put in ".body {margin:0}"

    Remove the "." in there.

    Dave

  • Users who have thanked tracknut for this post:

    atwd (07-29-2012)

  • #10
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Made the change and it works well. Thanks so 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
    •