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

When my site is loaded in a narrow browser window, the site logo image and text, and also the top menu, are pushed all the way to the left, so far that they start to disappear behind the edge of the window. Does anyone know why this is happening, and how I could fix it? The site is at: mindfulnessangermanagement.com. Here is my css:

/*
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;
}
#wrapper {padding-left:23px;}
#site-info {padding-left:25px;}

purvesweb
purvesweb's picture
Offline
Regular
Scotland
Last seen: 2 years 11 weeks ago
Scotland
Timezone: GMT+1
Joined: 2011-02-15
Posts: 13
Points: 27

My Logo and top menu get pushed behind the left margin in small

Hi

You might want to put a width on your #header of 100% to give it a size then give it a min-width of 1000px the same as your #wrapper, this should then settle it in the middle and stop the header from moving.

Hope this helps.
Stevie (Purves Web)

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

Hey there, and thanks for

Hey there, and thanks for your help. Under my #header{
I added this code:

width: 100%;
   mind-width: 1000px;

but unfortunately it didn't have any effect. Any suggestion?

purvesweb
purvesweb's picture
Offline
Regular
Scotland
Last seen: 2 years 11 weeks ago
Scotland
Timezone: GMT+1
Joined: 2011-02-15
Posts: 13
Points: 27

Solution

It should do the trick, check your spelling of min-width also.

#header{
padding: 15px 0 14px 0;
overflow: auto;
background: #fff;
border-top: 8px solid #000;
margin-left: -55px;
min-width: 1000px;
width: 100%;
}

purvesweb
purvesweb's picture
Offline
Regular
Scotland
Last seen: 2 years 11 weeks ago
Scotland
Timezone: GMT+1
Joined: 2011-02-15
Posts: 13
Points: 27

margin-left: -55px?

The border at the top does not expand all the way to the edges due to the minus margin you have on the header, remove this and it will center nicely.

Checked on both IE7, 8, 9, FF, all OK.

Hope this helps!

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

Thanks very much for your

Thanks very much for your help. That did the trick, all good now.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 4 days 7 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2256

house7 wrote: mind-width:

house7 wrote:

mind-width: 1000px;

I've heard of expanding your mind but this is ridiculous. Tongue

I consider this a Triumph.