Thursday, August 10, 2006

The Old Internet Explorer Disappearing Side Bar Problem

When viewed in Internet Explorer, the side bar of my blog disappears from the right-hand side of the page, only to reappear all the way down at the bottom. This is incredibly frustrating because regular visitors find the links that they want hard to find, and first time visitors don't know that the extra bells and whistles (my bio, links, etc.) are there. This is not news. Not only have I had this problem for months but numerous other food bloggers have ranted about this problem on the pages of this blog and numerous others have offered up extensive potential solutions in response. The problem is that the problem is still there. It won't go away! I can't get my side bar to actually appear on the side of my blog.

(NOTE before continuing on: This is only a problem in Internet Explorer. The blog looks just like it should in Mozilla, and I believe in Safari as well. This matter is further complicated by the fact that I can't seem to install IE properly on my computer--but I certainly have access to IE-running computers, so I can check the problem.)

I'm guessing that the problem has something to do with the coding in the blog's template. Someone also proposed that it could have something to do with adsense--I don't think that's the case, but I've removed adsense from my blog anyway. Another possibility is that a coding problem in one of the posts is screwing things up. While I don't rule out the possibility of coding snafus in my posts, someone pointed out this side bar problem to me as far back as March--at that point, the blog was only a few months old and there was very little coding in the posts, so I'm thinking that the template is the more likely culprit.

I took a look at the template today, but I think that this is a job for someone with expertise beyond my own adhoc knowledge of html conventions. I'm not sure what the etiquette is for this, but is there someone out there who would be willing to take a look at my template to see if they can locate the glaring problem (or to just generally help me clean up the mess made by my non-professional coding style)? If that's too much to ask, is there anyone out there who hires herself out for this type of work? Any and all suggestions are welcome. By all means, reply here, or contact me at EmilyStone200[at]hotmail[dot]com.

Before signing off, I'd just like to write a quick thanks to every one of you Food Blog S'cool members. I haven't been participating much recently, but I've certainly been reading along, and this group is amazingly helpful. Thanks!


This Post was written by Emily Stone from Chocolate in Context

12 comments:

Emily Stone said...

Hi Everyone (Me Again): I just noticed in a previous post on this same subject (http://foodblogscool.blogspot.com/2006/06/template-ie-views-template-changes.html#comments) that sometimes the width of photos can be the problem. Could some one tell me how to check/correct my photos? Thanks!

Kalyn said...

Hi Emily. You're sure having a busy day! To check the size of photos, right click and look at "properties". They can't be more than 400 wide for most templates in blogger. Once there is a photo that is too big, it will bump the sidebar down from that point on.

Kalyn said...

Emily, one more thing, here's an easy way to check in IE. Use the "previous posts" archive in your sidebar and just click on one post at a time (it moves down the list one post each time so it's easy to do. When you click each post, if that post doesn't ahve anything wrong, the sidebar comes back up. When you get to one where the sidebar stays down, there is either an html error, or a photo that's too big in that post. Italics at the end of the line can also do it. Hope this helps. (I've had to do this a lot on my student's blog!)

Emily Stone said...

Thanks, Kalyn. The problem is that the sidebar is always at the bottom, for every single post...

paul said...

You've got a few extra div tags that mess with the floats. For a quick fix, take out one of them right before the <!-- End #main --> comment in your code.

Other bloggers with this recurring Minima template problem may want to check out this solution which may or may not solve, or cause more problems.

The other thing you could do is change your DTD. It sounds like a pesticide from they banned in the 70's, but its' your Document Type Definition and it tells browsers how it should read your code. You're set on strict. Strict is how you are supposed to talk while in Sister Mary's 8th grade grammar class. Strict code must adhere to a very tight set of syntax rules. Unfortunately, your code is cursing up a storm.

So change your DTD to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

That's the transitional or 'loose' DTD, and sometimes browsers are a little more forgiving reading it.

Chris said...

Thanks for these suggestions. I'm having the same problem with my side bar dropping to the bottom of my blog on IE.

I removed AdSense from my blog and checked the photo widths, but it is still happening. I'll try these other tips now.

It also is happening for me on Food Blog Scool itself now. Are other IE users seeing the right side dropped for the Scool?

SusanV said...

Hi Chris, yes, the sidebar on foodblogscool is dropped down for me too, when I look at in in IE. It has been for a long time.

paul said...

Oh yea, when did that start?

This looks like it's caused by IE's bad math, but there is so code trouble too.

I'd recommend changing the widths of the #wrapper and main wrapper from 760 to 800. That should give IE's margin rendering errors some slack.

Chris said...

Hi Paul, I just adjusted my DTD and tried it in the Blogger preview . . . and I'm still seeing my sidebar way down at the bottom of the page in IE. Do you think I would need to push DTD to the live version of my blog to see this change?

paul said...

The DTD won't effect your sidebar problem, which is caused by an errant div tag:
....

<!-- Begin #main -->
<div id="main"><div id="main2">

</div>

....

Delete the last </div> in that code block and things should fall in place.

I think I've seen this error in lots of places where the Minima template is used. I'm not sure if it's something blogger generates by accident, but it's not in the original template code.

Chris said...

Paul -- you fixed it! It's fixed. I can't even tell you how happy this makes me. Thank you, thank you.

Emily Stone said...

Paul, you are my hero!!!