...
PDA

Strange Gap on Left side

atwd
07-26-2012, 03:57 AM
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
<!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
<!--
#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;
}-->
atwd
07-29-2012, 07:12 PM
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.
SB65
07-29-2012, 07:18 PM
body{margin:0}
tempz
07-29-2012, 07:26 PM
This:

http://i.imgur.com/q4kpw.jpg


or

http://i.imgur.com/CWowx.jpg

STR = Stretch
atwd
07-29-2012, 08:38 PM
11406
Still not sure how to eliminate the gap. If you compare it to the old way furniturelandnj.com (http://furniturelandnj.com) it looks like it shifted over somehow.

btw tempz what browser you viewing in?
atwd
07-29-2012, 08:45 PM
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.
<!--
#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;
}-->
tracknut
07-29-2012, 08:45 PM
Did you try SB65's suggestion? That looks like the right answer, if I'm seeing the same gap you're talking about.

Dave
atwd
07-29-2012, 08:57 PM
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.
tracknut
07-29-2012, 09:04 PM
I put that in but there is no change.


You put in ".body {margin:0}"

Remove the "." in there.

Dave
atwd
07-29-2012, 09:09 PM
Made the change and it works well. Thanks so much.:thumbsup:

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum