WP Sidebar problems

[Albone]

Hello all,

I am having a problem with my site. I have a webcomic on the left side, a sidebar on the right, and underneath, are blog posts.

Right not in IE, the sidebar gets kicked below the webcomic and blog posts, but in Firefox and Safari, everything looks great. Can anyone tell me what I'm doing wrong that IE is not liking what I'm doing? This sidebar bumping is happening on every page as well.

http://www.rivalangels.com

 

[Albone]

*edit*
The first page works correctly in IE, but any previous pages do not.

 

[ChicoWeb]

I don't see what you are talking about? IE 6>?

 

[Albone]

IE 7 to be exact.

If you click on Previous or First, the sidebar (with the calendar and all) gets knocked to the very bottom. It also pushes the footer down with it.

I don't know how to make a screen capture on the PC or else I'd post it.

 

[angelwatt]

There's a lot of CSS there, and my eyes are tired from work, so I'm just going to make an educated guess based on your description of the problem. IE and "all" other browsers calculate things differently when dealing with width. Namely, giving IE an element with a width of 200px and margin of 5px and padding 10px will have an overall width that is different than other browsers. I think it makes it wider. It looks like your site is using fixed width for the content area and the sidebar so this is where the problem is "I think." IE is calculating a larger width than you have allowed for so it falls beneath.

Some light reading on the width calculation difference, http://www.slideshare.net/teamphp/box-model/

This is my educated guess. It's pretty easy to check to. Use some smaller widths on the content area and see if it starts showing up correctly in IE. If my eyes start working again later tonight I'll take another look to see if I can anything else.

 

[Albone]

Thanks for the cool link and the explanation on IE. The thing is, I'm not sure where to start because it behaves on the index page, but not any other page. Would I start reducing the sidebar or something else?

 

[cookie1105]

...The thing is, I'm not sure where to start because it behaves on the index page, but not any other page....

Your theme probably has two different templates; index.php and page.php.

page.php probably has it's own css and it's this that you need to look at fiddling with.

Here's a link from the codex on how to create your own page templates.

 

[Albone]

Your theme probably has two different templates; index.php and page.php.

page.php probably has it's own css and it's this that you need to look at fiddling with.

Here's a link from the codex on how to create your own page templates.

Well the main body is set to 1000px, and when I had the page set at 750px, the sidebar would get knocked below on every page. I switched page to 1300 and it works now on the front-index page, but it still misbehaves in IE on any other page. I tried making my comic image thinner and even brought the sidebar more to the left and it didn't work.

plugging away....

 

[Albone]

I did fix the index page, but if you hit First, or Previous in IE7 will knock the sidebar down.

I have my body at 1000px. The comic is 750px and the side bar is 150px. With all of the padding, this comes to 932px. Again, it shows up fine on the front page, but it gets screwy on any previous page.

Here's the code in case you want to take a look:

/*  
Theme Name: ComicPress
Theme URI: http://mindfaucet.com/comicpress/
Description: A customizable theme for publishing comics.
Version: 2.0 BE
Author: Tyler Martin
Author URI: http://mindfaucet.com/

	ComicPress 2.0 BE (Blogging Edition)
	 http://mindfaucet.com/comicpress/

	This theme was based on the WordPress default Kubrick theme.
	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

/* MAIN SECTIONS */

body {
margin: 0 auto;
  width: 1000px;
  background: #000000;
  color: #333;
  font: 10px verdana,arial,helvetica,sans-serif;
  text-align: center;
  }
	
#header {
  
  margin: 0 auto;
  width: 1000px;
  background: #333333;
  }
	
#headerbar {

  margin: 0 auto;
  width: 1000px;
  height: 25px;
  background: #454545;
  }

#comic {
margin: 0px 0 0 0px;
  width: 700px;
  background: #000000;
  border-bottom: 2px solid #C0C0C0;

  }

#page {
margin: 0px;
  width: 1300px;
  background-color: #000000;
  text-align: left;
color: #FFFFFF;
  }
    
#sidebar {
  margin: 0 0 0 770px;
  padding: 30px 0 200px 30px;
  width: 150px;
  border-left: 2px dotted #C0C0C0;
color: #FF0000;
  }
  
#footer {
  margin: 0;
  width: 1000px;
  background-color: #000000;
  clear: both;
color: #FDFF2F;
  }

#footer p {
  padding: 20px 0;
  border-top: 1px solid #C0C0C0;
  text-align: center;

  }

#comicarchiveframe {
  margin: 20px 0 10px 0;
  padding: 5px;
  border: 2px dotted #C0C0C0;


  }


/* POST STRUCTURE */

.narrowcolumn {

  margin: 0 ;
  padding: 5px 0 0px 10px;
  float: left;
  width: 550px;

  }
  
.blogheader {

  margin: 10px 0 0px 0;
  padding: 40px 0 0px 180px;
  float: left;
  width: 445px;
  border-top: 2px dotted #C0C0C0;

  }

#leftcontainer {
  margin: 0;
  padding: 0;
  float: left;
  width: 445px;

  }

.post {
  margin: 0;
  text-align: justify;

  }

.narrowcolumn .postmetadata {
  padding-top: 5px;

  }

 
/* FONTS */

a, .entry p a:visited {
  color: #FF0000;
  text-decoration: none;
  }

a:hover {
  color: #fffc00;
  text-decoration: underline;
  }
  
h2 a:hover, h3 a:hover {
  color: #FF0000;
  }

.headernav {
  margin: 4px 0 0 0px;
  float: right;
  font-size: 12px;
  font-weight: bold;

  }

.headernav a {
  color: #fdff2f;
  }

.headernav a:hover {
  color: #FF0000;
  text-decoration: none;
  }
  
.headerbarlinks {
  padding: 4px 0 0 10px;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
  letter-spacing: 4px;
  }

.headerbarlinks a{
  color: #999999;
  letter-spacing: 0;
  }

.headerbarlinks a:hover{
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: 0;
  }

.comicnav {
  padding: 3px 0 0 0;
  font-size: 15px;
  float: right;

  }

.comicnav a {
  color: #fdff2f;
  }

.comicnav a:hover {
  color: #FF0000;
  text-decoration: none;
  }

.comicdate {
  font-size: 15px;
  font-weight: bold;
color: #FF0000;
  }
  
#content {
  font-size: 12px;
  }

.narrowcolumn .postmetadata {
  text-align: right;
width: 445px;
color: #FF0000;
  }

.alt {
  background: #F7F7F7;
  border-top: 1px solid #7D7D7D;
  border-bottom: 1px solid #7D7D7D;
  }
  
#sidebar {
  font-family: Verdana, Sans-Serif;
  font-size: 10px;
  }
  
#sidebar h2 {
  font-family: Verdana, Sans-Serif;
  font-size: 12px;
  }
  
small {
  font-family: Arial, Sans-Serif;
  font-size: 11px;
  }

h2, h3 {
  font-family: 'Trebuchet MS", Tahoma, Arial, Verdana;
  font-weight: bold;
  }

h1 {
  color: #FFFFFF;
  font-family: Times, Serif;
  font-size: 50px;
  font-weight: normal;
  text-align: left;
  letter-spacing: -2px;
  }

h2 {
  font-size: 19px;
  }

h2.pagetitle {
  font-size: 19px;
  }

h3 {
  font-size: 16px;
  }

.post h3 {
  border-bottom: 2px solid #7D7D7D;

  }

h1, h1 a, h1 a:hover, h1 a:visited {
  color: #FFFFFF;
  text-decoration: none;

  }

.description {
  color: #555555;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 2px;
  text-align: left;
  }

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
  text-decoration: none;
color: #FDFF2F;
  }

.commentlist li, #commentform input, #commentform textarea {
  font-family: Arial, Sans-Serif;
  font-size: 11px;

  }
  
.commentlist li {
  font-weight: bold;
  overflow: auto;

  }

.commentlist cite, .commentlist cite a {
  font-weight: bold;
  font-style: normal;
  font-size: 12px;

  }

.commentlist p {
  font-weight: normal;
  text-transform: none;

  }

.commentmetadata {
  font-weight: normal;

  }

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
  color: #FF0000;
  }
  
code {
  font-family: 'Courier New', Courier, Fixed;
  font-size: 12px;
  }

acronym, abbr, span.caps {
  font-size: 10px;
  }

.latestcomics {
  font-family: Arial, Sans-Serif;
  }
  
  
/* TEXT MARGINS */

h1 {
  margin: 0;
  padding: 0 0 0 10px;
  }

.description {
  margin: -3px 0 0 0;
  padding: 0px 0 10px 30px;
  }

h2 {
  margin: 0 0 0 0;

  }

h2.pagetitle {
  margin: 10px 0 0 0;
  padding: 0 0 5px 0;
  text-align: left;
  }

#sidebar h2 {
  margin: 5px 0 0;
  padding: 0;
color: #FDFF2F;
  }

h3 {
  margin: 30px 0 0;
  padding: 0;

  }

h3.comments {
  margin: 40px auto 20px ;
  padding: 0;

  }

p img {
  padding: 0;
  max-width: 100%;
  }

.navigation {
  margin: 10px 0 30px 0;
  text-align: center;
  display: block;
  }


/* LISTS */

html>body .entry ul {
  margin-left: 0px;
  padding: 0 0 0 30px;
  list-style: none;
  padding-left: 10px;
  text-indent: -10px;

  } 

html>body .entry li {
  margin: 7px 0 8px 10px;
  }

.entry ol {
  margin: 0;
  padding: 0 0 0 35px;

  }

.entry ol li {
  margin: 0;
  padding: 0;
  }

.postmetadata ul, .postmetadata li {
  display: inline;
  list-style-type: none;
  list-style-image: none;

  }
  
#sidebar ul, #sidebar ul ol {
  margin: 0;
  padding: 0;
  }

#sidebar ul li {
  margin: 0 0 15px 0;
  list-style-type: none;
  list-style-image: none;
  }

#sidebar ul p, #sidebar ul select {
  margin: 5px 0 8px;
  }

#sidebar ul ul, #sidebar ul ol {
  margin: 5px 0 0 10px;

  }

#sidebar ul ul ul, #sidebar ul ol {
  margin: 0 0 0 10px;
  }

ol li, #sidebar ul ol li {
  list-style: decimal outside;
  }

#sidebar ul ul li, #sidebar ul ol li {
  margin: 3px 0 0;
  padding: 0;
  }


/* FORMS */

#commentform textarea, #s, #author, #email, #url, select, textarea {
  padding: 2px;
  background: #FFFFFF;
  color: #555555;
  border: 1px solid #BBBBBB;
  }
  
#commentform #submit, #searchsubmit, #searchsubmitclear, #sortsubmit {
  color: #7F0000;
  background: #DDDDDD;
  border: 1px solid #BBBBBB;

  }
  
#commentform #submit:hover, #searchsubmit:hover, #searchsubmitclear:hover, #sortsubmit:hover {
  color: #FF0000;
  background: #7F0000;

  }

#searchsubmitclear {
  margin: 0 0 0 3px;
  }

#commentform #submit {
  margin: 0;
  float: right;
  }
  
#commentform input {
  margin: 5px 5px 1px 0;
  padding: 2px;
  width: 170px;
 display: block;
  }

#commentform textarea {
  width: 450px;
 display: block;
  }

#commentform p {
  margin: 5px 0;

  }

#sidebar #searchform #s {
  padding: 2px;
  width: 108px;
  }

#sidebar #searchsubmit {
  padding: 1px;
  }

.entry form { /* This is mainly for password protected posts, makes them look better. */
  text-align: center;
  }

select {
  width: 130px;

  }

#sidebar form {
  margin: 0;
  }


/* COMMENTS */

.alt {
  margin: 0;
  padding: 10px;
color: #000000;
  }

.commentlist {
  padding: 0;
  text-align: justify;

  }

.commentlist li {
  margin: 15px 0 3px;
  padding: 5px 10px 3px;
  list-style: none;

  }

.commentlist p {
  margin: 10px 5px 10px 0;

  }

.nocomments {
  margin: 0;
  padding: 0;
  text-align: center;

  }

.commentmetadata {
  margin: 10px 5px 10px 0;
  display: block;

  }


/* CALENDAR */

#wp-calendar a {
  text-decoration: none;
  }

#wp-calendar caption {
  padding: 15px 0 0 0;
  width: 100%;
  color: #FDFF2F;
  font-family: Verdana, Arial, Sans-Serif;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  }

#wp-calendar th {
  font-style: normal;
  text-transform: capitalize;

  }

#wp-calendar {
  margin: 0 auto 0;
  width: 155px;
  empty-cells: show;
color: #FFFFFF;
  }

#wp-calendar #next a {
  padding-right: 10px;
  text-align: right;
  }

#wp-calendar #prev a {
  padding-left: 10px;
  text-align: left;
  }

#wp-calendar a {
  background: #005F5D;
  display: block;
  }

#wp-calendar a:hover {
  background: #7F0000;
  }

#wp-calendar td {
  padding: 0;
  text-align: center;
  border: 1px solid #ff0000;
  }

#wp-calendar td.pad:hover { /* Doesn't work in IE */
  background-color: #fff; }


/* VARIOUS */

hr {
  height: 2px;
  background-color: #7D7D7D;
  color: #7D7D7D;
  border: 0px;
  }

a img {
  border: none;
  }

.center {
  text-align: center;
  }

acronym, abbr, span.caps {
  cursor: help;
  }

acronym, abbr {
  border-bottom: 1px dashed #999;
  }

blockquote {
  margin: 15px 30px 0 10px;
  padding-left: 20px;
  border: 1px solid #ddd;
  border-left: 5px solid #ddd;

  }

blockquote cite {
  margin: 5px 0 0;
  display: block;
  }

/* END */

Thanks!

 

[angelwatt]

I found some problems in the HTML you have both a body and a style tag inside your main body tag. This is "illegal" and could be causing issues. There's no defined way for a browser to handle this so IE may not be to blame (even as much as I like blaming IE). These extra tags are in that sidebar toward the bottom part of the Comic Archive section.

Also is your CSS #page is given width of 1300px, but its parents body only has 1000px width. This is a case of square peg fitting into a round hole, though not likely to be the cause of your current problem.

Again, not sure if this'll fix the problem, but they are problems. Running the page through a validator reveals other small problems too, though not necessarily related to your current problem.