Wordpress Sidebars wrapping in SOME browsers

jimsowden · Mar 25, 2009

I'm having a problem with my new wordpress blog. In Safari 3 it looks great, but in most other browsers when I navigate to a blog post (note, not a content page) the sidebar gets wrapped down the the bottom. Here's the site: www.wearechoice.com

You'll notice the front page is fine, but when you click on an article, it will wrap those sidebars to the bottom. A weird tendency I noticed is that when I log into the wp-admin in firefox 3 (which normally wraps them to the bottom) and then go back the regular site, it stops.

Here's the bit of the site that pertains to the body and the sidebars to see if you guys have any ideas.

Code:

/************************************************
*	Content 					     		    * 
************************************************/

#content {
	width: 960px;
	margin: 10px auto 0px;
	padding: 10px;
overflow:hidden;
	}

#content p{
	padding: 0px 20px 20px 0px;
	margin: 0px;
	line-height: 20px;
overflow:hidden;
	}
	
#content h1 {
	color: #069DD5;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: 0px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-transform: uppercase;
	font-family: Helvetica, Sans-Serif;
overflow:hidden;
	}
	
#content h1 a  {
	color: #14181A;
	text-decoration: none;
	}

#content h1 a:hover {
	color: #525252;
	text-decoration: none;
	}
	
#content p img{
	float: left;
	border: none;
	margin-right: 15px;
	margin-bottom: 10px;
	padding-top: 7px;
overflow:hidden;
	}
	
#content h2 {
	color: #444444;
	font-size: 11px;
	font-weight:bold;
	padding: 0px 0px 5px 0px;
	margin: 10px 0px 5px 0px;
	border-bottom: 1px dashed #4C666A;
	text-transform: uppercase;
	}
	
#content h3 {
	color: #444444;
	font-size: 18px;
	font-family: Helvetica, Sans-Serif;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	}
	
#content img.wp-smiley {
	float: none;
	border: none;
	padding: 0px;
	margin: 0px;
	}

#content img.wp-wink {
	float: none;
	border: none;
	padding: 0px;
	margin: 0px;
	}
	
#contentleft {
	float: left;
	width: 540px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}
	
#contentleft ol{
	margin: 0px 0px 15px 0px;
	padding: 20px 0px 0px 0px;
	}
	
#contentleft ol li{
	margin: 0px 0px 15px 0px;
	padding: 20px 0px 0px 0px;
	}
	
#contentleft ul{
	margin: 0px 0px 15px 0px;
	padding: 20px 0px 0px 0px;
	}
	

	
#contentleft .single {
	margin: 0px 0px 15px 0px;
	padding: 20px 0px 0px 0px;
	}
	
blockquote{
	margin: 0px 25px 10px 25px;
	padding: 0px 25px 0px 10px;
	background: #333333;
	border-top: 1px solid #EFEFEF;
	border-bottom: 1px solid #EFEFEF;
	}
	
#content blockquote p{
	color:#fff;
	margin: 0px 0px 10px 0px;
	padding: 10px 0px 0px 0px;
	}

.date {
	color:#A97965;
	font-family: Helvetica, Sans-Serif;
}

.bt-links {
	background: #EFEFEF;
	border: 1px solid #DDDCDC;
	margin:10px 0px 10px 0px;
	padding:10px 0px 10px 15px;
	font-family: Helvetica, Sans-Serif;
}

/************************************************
*	Left Sidebar 					     	    * 
************************************************/

#l_sidebar {
	float: left;
	width: 130px;
	margin: 0px 0px 0px 0px;
	padding: 0px 20px 0px 19px;
	border-left: 1px solid #E2DDDE;
	font:11px/18px Helvetica, sans-serif; 
        word-wrap: break-word;
	}
	
#l_sidebar ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}


#l_sidebar ul li {
	background:transparent url("images/bullet.gif") 0px 11px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */
	display: block;
	padding: 4px 0px 0px 10px;
	margin: 0px;
	}

#l_sidebar a:link, #l_sidebar a:visited	{ color:#444; text-decoration:none; outline:none; }
#l_sidebar a:hover, #l_sidebar a:active	{ color:#444; text-decoration:underline; outline:none; }
	

#l_sidebar p{
	padding: 3px 0px 0px 0px;
	margin: 0px;
	line-height: 20px;
	}


#l_sidebar li {list-style: none; }	
/************************************************
*	Right Sidebar 					     	    * 
************************************************/
	
#r_sidebar {
	float: left;
	width: 180px;
	margin: 0px 0px 0px 0px;
	padding: 0px 19px 20px 19px;
	border-left: 1px solid #E2DDDE;
	border-right: 1px solid #E2DDDE;
	font:11px/18px Helvetica, Helvetica, sans-serif; 
        word-wrap: break-word;
	}

#r_sidebar ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	

#r_sidebar ul li {
	background:transparent url("images/bullet.gif") 0px 11px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */
	display: block;
	padding: 4px 0px 4px 10px;
	margin: 0px;
	}


#feed {
	background:  url("images/rss.gif") 183px 0px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */
	padding: 4px 0px 4px 10px;
}

#r_sidebar a:link, #r_sidebar a:visited	{ color:#444; text-decoration:none; outline:none; }
#r_sidebar a:hover, #r_sidebar a:active	{ color:#444; text-decoration:underline; outline:none; }
	
	
#r_sidebar p{
	padding: 3px 0px 0px 0px;
	margin: 0px;
	line-height: 20px;
	}

#r_sidebar li {list-style: none; }

jimsowden · Mar 26, 2009

Any ideas? It doesn't seem like it should be happening!

SrWebDeveloper · Mar 26, 2009

I checked your main page, saw the sidebars, viewed the first article listed named "Great Eight of '08..." and both sidebars on the right disappeared - but that may be programmatic.

Same for all latest versions of FF and Safari, and even true in MSIE 7. I am not sure if what you're calling 'wrap' is the same as I'm seeing, but to me not displaying is not the same as wrapping which means out of position but visible. Maybe a screenshot of what you're seeing would help.

So far I can't see much wrong with your CSS, i.e. the total content area is 960px wide, the two sidebars (130px and 180px respectively) plus the inner content area holding the article is 540px, so it all should fit even with padding, each floated as I would expect to see. The content area does include overflow: hidden, but I should still see the parts that fit. Validation of your CSS reveals minor issues such as "word-wrap" not existing and of course some CSS hacks the validator won't recognize.

I dunno. I'm not seeing what you're describing.

If anyone else is following this, did I miss something obvious??

-jim

angelwatt · Mar 26, 2009

If I'm seeing it right, on the front page, the sidebars are after the left content, but on article pages, they are inside the left content tag. That seems to be the issue.

SrWebDeveloper · Mar 26, 2009

That would do it.

When I said programmatic I thought maybe some code was setting display:none for that area, or some Javascript involved that changed the way the CSS behaves. Sometimes its as simple as div's being positioned in the wrong sequence in a template file - assuming this is the problem.

-jim

Mr.nix · Mar 26, 2009

For starters your side bars are <li> tags wrapped in <div>. You have have other html tag issues. I would start with fixing all those first.

SrWebDeveloper · Mar 26, 2009

Mr.nix said:
For starters your side bars are <li> tags wrapped in <div>.

Sure it's bad practice - but guess what, it's perfectly legal for the DTD type used here (XHTML transitional 1.0) and does not contribute to this problem being discussed which is my key point and why I am replying now. I mean no disrespect, but the CSS overrides the default behavior of list items in this particular case, it doesn't matter about what is nested nor even if the UL or OL parent tags are missing! All that matters is the selector is right.

As an aside, If you look at the W3C schools page for the li tag they even suggest "Use CSS to define the type of list and list item" and make clear the li tag renders fine by itself across all browsers for this DTD type.

I agree with the rest of your comment suggesting fixing HTML, of course and do not mean to hammer you here. It's just a resolution was given for this situation.

NOTHING PERSONAL!

-jim

Mr.nix · Mar 27, 2009

SrWebDeveloper said:
Sure it's bad practice - but guess what, it's perfectly legal for the DTD type used here (XHTML transitional 1.0) and does not contribute to this problem being discussed which is my key point and why I am replying now. I mean no disrespect, but the CSS overrides the default behavior of list items in this particular case, it doesn't matter about what is nested nor even if the UL or OL parent tags are missing! All that matters is the selector is right.

As an aside, If you look at the W3C schools page for the li tag they even suggest "Use CSS to define the type of list and list item" and make clear the li tag renders fine by itself across all browsers for this DTD type.

I agree with the rest of your comment suggesting fixing HTML, of course and do not mean to hammer you here. It's just a resolution was given for this situation.

NOTHING PERSONAL!

-jim

If you want to talk about valid XHTML, you probably should look at all the errors on his page first

I brought the div tags up because he has extra tags in there. His side bar div's are inside the content div. No reason digging though the css until the html is fixed.

Didn't take it personal because you sort of missed my point.

SrWebDeveloper · Mar 27, 2009

You missed the part when I said, "I agree with the rest of your comment suggesting fixing HTML" - and I even selectively quoted to ensure you my comments were only focused on one thing you said: "For starters your side bars are <li> tags wrapped in <div>" - not the rest. The OP has tons of HTML errors, but that isn't one of them is my point, was my point, and still is my point. Sounds like you are taking it personal!

I'm not upset, nor should you be, but I'm not retracting what I said because technically it's correct. I'll let you have the last word, but please don't use it to bash or flame, it's not nice.

-jim

Mr.nix · Mar 27, 2009

SrWebDeveloper said:
You missed the part when I said, "I agree with the rest of your comment suggesting fixing HTML" - and I even selectively quoted to ensure you my comments were only focused on one thing you said: "For starters your side bars are <li> tags wrapped in <div>" - not the rest. The OP has tons of HTML errors, but that isn't one of them is my point, was my point, and still is my point. Sounds like you are taking it personal!

I'm not upset, nor should you be, but I'm not retracting what I said because technically it's correct. I'll let you have the last word, but please don't use it to bash or flame, it's not nice.

-jim

Not trying to bash or flame. Just trying to help. I'm guessing on the original posters skill set so when I see <li> nested inside a <div> without the <ul> and there is an extra </div> breaking the layout I just assumed that's were it can from.

Search

Search

Wordpress Sidebars wrapping in SOME browsers

jimsowden

macrumors 68000

jimsowden

macrumors 68000

SrWebDeveloper

macrumors 68000

angelwatt

Moderator emeritus

SrWebDeveloper

macrumors 68000

Mr.nix

macrumors member

SrWebDeveloper

macrumors 68000

Mr.nix

macrumors member

SrWebDeveloper

macrumors 68000

Mr.nix

macrumors member

Our Staff