5 replies [Last post]
house7
house7's picture
Offline
newbie
Last seen: 2 years 28 weeks ago
Timezone: GMT-5
Joined: 2011-12-20
Posts: 7
Points: 9

On some browsers and computers my site is pushed all the way to the left, with the white space gone. When it happens i check a couple of my other sites and they never show the same problem.

I asked the developer who made the site to try and fix it and he can't find anything wrong. I hired another developer who checked it on a browser checker and said it is fine. But it isn't fine and I really want to get it fixed, because a large number of my site visitors are seeing a poorly designed site.

I'll attach my css here, and the site url is: mindfulnessangermanagement.com.

Any help would be much appreciated!

/*
Theme Name: Wisdom Anger Management
Description: A Child Theme of Twenty Ten
Theme URI: <a href="http://www.zoopmedia.com" rel="nofollow">http://www.zoopmedia.com</a>
Template: twentyten
Author: ZoopMedia
*/
@import url(../twentyten/style.css);
 
html {
  background: url('/wp-content/uploads/2011/05/foot_bgbot.png') repeat;
}
 
#wrapper{
	margin: 0px auto !important;
	padding: 0px;
	background-color: transparent;
	width: 1000px!important;
}
#primary, #secondary {
    width: 200px;
}
 
#header{
        padding: 15px 0 14px 0;
	overflow: auto;
    background: #fff;
    border-top: 8px solid #000;
    margin-left: -55px;
}
 
#footbg {
    background: url('/wp-content/uploads/2011/05/foot_bg.png') repeat-x;
    border-top: 1px solid #00008b;
    width: 100%;
}
 
#footer{
    color: #fff;
    height: 89px;
    margin: 0px 0 0 -32px;
}
#masthead{
	color: #ccc;
	display: block;
}
body{
	background-color: #fff;
	font: normal 12px/160% "Lucida Sans", Georgia, "Times New Roman", Times, serif;
}
 
#site-title {
        float: left;
	margin: 0px;
	width: auto;
	padding: 0px;
}
 
#site-description{
        float: left;
	width: 230px;
	font: italic 14px verdana,geneva;
	margin: 47px 0 0 65px;
    color: #3e74ac;
    text-transform: lowercase;
}
 
#site-title a{
	color: #fff;
	font: bold 32px/70px "Lucida Sans", Georgia, "Times New Roman", Times, serif;
}
 
#branding img{
	border: 0px;
        padding: 11px 0 0 0;
}
#access{
	width: 100%;
	float: left;
	margin: 0 0 0 0;
        border-top: 1px solid #3ca328;
        border-bottom: 2px solid #add8e6;
        background: url('/wp-content/uploads/2011/05/nav_bg.gif') repeat-x;
}
#access .menu-header, div.menu{
	margin: 0px auto;
	width: 1000px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
    border-left: 1px solid #fff;
    height: 45px;
}
#access .menu-header li, div.menu li{
	float: left;
}
 
#access a {
	color: #fff;
	font: normal 14px "Lucida Sans", Georgia, "Times New Roman", Times, serif;
	display: block;
	line-height: 45px;
	padding: 0px 20px;
	text-decoration: none;
        border-right: 1px solid #fff;
}
#access ul ul {
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: url('/wp-content/uploads/2011/05/nav-hov.gif') repeat-x;
        border-right: 1px solid #fff;
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
        background: url('/wp-content/uploads/2011/05/nav-hov.gif') repeat-x;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;
}
 
#main {width: 100%;}
 
#container{
	margin: 0 -340px 0 0;
	width: 100%;
}
 
#container a:hover{
	color:#4A86AC !important;
}
#content{
	margin: 0 340px 0 0;
        width: 690px;
        background: #fff;
 
}
 
h1, h2, h3, h4, h5, h6 {
	clear: none;
	font-weight: normal;
}
 
ul {
	margin: 0px 40px;
    list-style: url(img/list_bg.jpg) inside;
}
 
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	color: #333;
	line-height: 1.5em;
}
 
#content h1 {
    font-size: 19px;
    color: #787878;
    margin: 0 0 20px 0;
}
 
#content h2 {
    font-size: 18px;
    color: #3A6FAA;
    margin: 0 0 10px 0;
}
 
#content h2 a {
    text-decoration: none;
}
 
#content h2 a:hover {
    text-decoration: underline;
}
 
.one-column #content {
	margin: 0 auto;
	width: 1000px;
}
 
#content .entry-title {
	font-size: 21px;
	font-weight: normal;
	line-height: 1.3em;
	margin-bottom: 0;
	color: #4A86AC;
}
 
#content .entry-title a {
	color: #4A86AC;
}
 
#content p {margin-bottom: 20px;}
 
.entry-title{
	font: bold 24px "Lucida Sans", Georgia, "Times New Roman", Times, serif;
}
 
.hentry{
	border-bottom: 0px solid #ddd;
	padding-bottom: 15px;
	margin-bottom: 10px;
}
.entry-meta,
.entry-utility{
	font-size: 11px;
}
 
.entry-utility {
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
}
 
.entry-date {
    color: #933f02;
}
.entry-content, .entry-summary {
		font-size: 13px;
		line-height: 1.6em;
	}
 
.entry-content blockquote{
	background: url(img/quote.gif) no-repeat top left;
	padding-left: 30px;
        font-size: 18px;
        color: #787878;
}
 
#respond {
    border-top: 0px solid #fff;
	margin: 5px 0;
	padding: 5px 0 0 0;
	overflow: hidden;
	position: relative;
}
 
.form-allowed-tags{
	display: none;
}
#searchsubmit,
#submit{
	cursor: pointer;
	color: #fff !important;
	font: bold 12px "Lucida Sans", Arial, sans-serif !important; 
	border: 0px;
	background-color: #333;
	padding: 3px 10px;
	margin: 0 5px;
}
#searchsubmit:hover,
#submit:hover{
	background-color: #006699;
}
#primary, #secondary{
	width: 270px;
	margin: 0px;
}
#primary .widget-container,
#secondary .widget-container{
	padding: 0px;
}
#primary .widget-title,
#secondary .widget-title{
	margin: 0px 0px 10px 0px;
	padding: 0px 5px 4px 0px;
	color: #933f02;
	font: normal 18px "Lucida Sans", Georgia, "Times New Roman", Times, serif;
	border-bottom: 1px solid #721b38;
}
#primary .widget-title a,
#secondary .widget-title a{
	color: #333;
}
 
.widget-area ul ul {
	list-style: none;
	margin-left: 0em!important;
}
 
#colophon{
	padding: 20px 0 0 0;
	margin: 0px auto 0 auto;
	color: #aaa;
	font: normal 12px/160% "Lucida Sans", Georgia, "Times New Roman", Times, serif;
	border-top: 0px solid #fff;
}
#colophon a{
	color: #fff;
}
#colophon h3{
	font: bold 14px "Lucida Sans", Georgia, "Times New Roman", Times, serif;
	padding: 10px 0;
	color: #fff;
}
 
#site-info{
	font: normal 14px "Lucida Sans",Georgia, "Times New Roman", Times, serif;
    color: #fff;
    float: left;
}
 
#site-info a{
	color: #fff;
}
 
#soclinks {
    float: right;
}
 
a,
a:visited,
a:link{
	color: #006699;
}
a:hover{
	color:#4A86AC;
}
 
#footaccess{
	width: 650px;
	float: left;
    height: 30px;
    clear: both;
}
#footaccess .menu-header, div.menu{
	margin: 0px auto;
	width: 740px;
}
#footaccess .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
 
#footaccess .menu-header li, div.menu li{
	float: left;
	max-width: 110px;
}
 
#footaccess a {
	color: #fff;
	font: normal 14px "Lucida Sans", Georgia, "Times New Roman", Times, serif;
	margin: 0 10px 0 0;
	text-decoration: none;
}
 
#footaccess ul ul li {
	min-width: 180px;
}
#footaccess ul ul ul {
	left: 100%;
	top: 0;
}
#footaccess ul ul a {
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}
#footaccess li:hover > a,
#access ul ul :hover > a {
	color: #fff;
text-decoration: none;
}
#footaccess ul li:hover > ul {
	display: block;
}
 
/* Footer widget areas */
#footer-widget-area {
width: 1000px;
}
 
#footer-widget-area .widget-title {
font-size: 18px;
color: #555;
font-weight: normal;
padding: 5px 0 10px 0;
}
 
#footer-widget-area .widget-area {
width: 260px;
margin: 0px 10px 40px 0px;
padding: 15px 10px 15px 50px;
height: 320px;
}
 
#first {border-left: 1px solid #ddd;}
#second {border-left: 1px solid #ddd;}
#third {border-left: 1px solid #ddd;border-right: 1px solid #ddd;}
 
.delimiter {font-size: 10px;float: right;color: #fff;margin: 3px 10px 0 0;}
.sub-menu .delimiter {display: none;}
#menu-item-41 .delimiter {display: none;}
 
#homearticles {}
 
#homearticles h3 {
font-size: 19px;
color: #933f02;
padding: 0 0 0px 0;
}
 
#headwidget {
float: right;
width: 643px;
margin: 0px 0 0 0px;
}
 
#headwidget .widget-title {
font-size: 14px;
padding: 0px;
margin: 0px 0 0 0;
color: #444;
}
 
#headwidget p {
	font: italic 14px verdana,geneva;
	margin:27px 10px -25px 10px;
        color: #3e74ac;
        text-transform: lowercase;
float: left;
}
 
ul.xoxo {
list-style-image:none;
}
 
.archive-meta p {
font-size: 16px;
margin-top: -10px;
font-family: georgia,palatino; 
color: #787878;
padding-bottom: 20px;
border-bottom: 1px solid #bbbbbb;
}
 
.searchform {
float: right;
margin: 9px 75px 0 0;
}
 
#nav-below {
	margin: 10px 0 40px 0;
}
 
/* Bottom widget areas */
#bottom-widget-area {
width: 100%;
padding: 0px;
}
 
#bottom-widget-area h3 {
font-size: 18px;
color: #933f02;
padding: 5px 0 10px 0;
}
 
#bottom-widget-area .widget-area  {
width: 100%;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 25px 0px;
}
 
.bot-widgets {margin-top: 130px;} 
 
ul.bot {margin: 0px 0 0 0;}
 
ul.bot li {
width: 230px;
float: left;
margin: 0 10px 0 0px;
padding: 0px;
}
 
#bottom-widget-area .widget-area h3  {
font-size: 13px;
color: #555;
font-weight: normal;
padding: 0px 0 10px 0;
margin: 0px;
}
 
.wp-caption {
	background: #fff;
	line-height: 12px;
	margin-bottom: 2px;
	max-width: 632px !important; /* prevent too-wide images from breaking layout */
	padding: 0px;
	text-align: left;
}
.wp-caption img {
	margin: 3px 3px 0;
}
.wp-caption p.wp-caption-text {
	color: #888;
	font-size: 11px;
	margin: 5px 5px 0px 5px!important;
	padding: 0px;
}
 
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 15px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 15px;
	margin-top: 4px;
}
 
.alignnone, img.alignnone {margin-bottom: 20px;display: block;clear: both!important;}
 
.read-more {display: block;margin: 15px 0 0 0;}
 
img#wpstats {position: absolute;left: -999em;}
 
.programhead {position: absolute;margin: -30px 0 0 -10px;width: 717px;height: 570px;}
.programbuy {position: absolute; top: 298px; margin-left: 102px;}
.notsure {margin-left: 7px;padding-top: 20px;}
 
.testimonial {margin: 0 0 20px 0;border-bottom: 2px dotted #ddd;}
 
#primarypro {
	width: 310px;
	margin: 0px;
	margin-right: -50px;
	float: right;
}
#primarypro .widget-container {
	padding: 0px;
}
#primarypro .widget-title {
	margin: 0px 0px 10px 0px;
	padding: 0px 5px 4px 0px;
	color: #933f02;
	font: normal 18px "Lucida Sans", Georgia, "Times New Roman", Times, serif;
	border-bottom: 1px solid #721b38;
}
#primarypro .widget-title a {
	color: #333;
}
.news {
  color: #3e74ac; 
  font-size: 15px; 
  font-family: tahoma,palatino, serif;
  margin-top: 30px;
}
 
.news span {
  color: #3ca328;
}
.home .textwidget img.alignleft {
     float: none;
     margin-top: -1px;
}
.homelist {
    margin-left: 0px;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 48 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If the problem is on smaller screens

...with the logo getting pushed off left and the white background colour not going all the way to the right edge of the layout if you have to scroll horizontally, then adding min-width: 1000px to the body should help.

If that's not it, then you'll have to be more specific about which browsers and situations the problem occurs.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

house7
house7's picture
Offline
newbie
Last seen: 2 years 28 weeks ago
Timezone: GMT-5
Joined: 2011-12-20
Posts: 7
Points: 9

Thank you for your help! I

Thank you for your help!

I just had a major breakthrough in sorting this out. It turns out it's not a problem with browsers, but a problem when my site is displayed in narrow windows. I just made my window on my mac smaller and reproduced the problem! So that is great, it 'narrows' the problem down (pardon the pun).

Other sites still leave some white space on the left when I make the window narrower, but my site the content gets pushed all the way over to the left. Does that make sense?

house7
house7's picture
Offline
newbie
Last seen: 2 years 28 weeks ago
Timezone: GMT-5
Joined: 2011-12-20
Posts: 7
Points: 9

Here are two screenshots to

Here are two screenshots to show what I mean:

First is my site displayed in a narrow window, which has no white space on the left.

my site.png

Next is another site, which is how I would like mine to work. It has some white space on the left, even when displayed in a narrow window.

other site.png

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 48 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Padding-left

Looks like you need some padding-left on your main content area.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

house7
house7's picture
Offline
newbie
Last seen: 2 years 28 weeks ago
Timezone: GMT-5
Joined: 2011-12-20
Posts: 7
Points: 9

Thanks for this. I tried your

Thanks for this. I tried your suggestion and here's what I get. When I add padding-left it does fix the problem but it also compresses the text when displayed in a full sized window.

Is there a way to do it so that allows the site to be the same when in a full size window and to respond when the window is narrower?

Also, my site logo and menu are still pushed all the way to the left when displayed in a smaller window.