Fix the Internet Explorer sidebar drop problem for BlogHerRoll etc

Deutsch | Español | Français | Italiano | Português | 日本語 | 한국어 | 简体中文

Is your sidebar dropping to the bottom of the window in IE - yet it looks fine in Firebox or other browsers? Usually that's because IE can't properly handle something that's too wide for a particular section of your webpage.

Where that section is your sidebar, which disappears to the bottom of the page in Internet Explorer, there's a possible fix. For example, say you display a blogroll in your blog sidebar e.g. (the BlogHerRoll in mine) by inserting some Javascript code in your template. Well, just one blog in the blogroll list which has too long a title for the width of the sidebar may make your entire sidebar drop to the bottom of the window, in Internet Explorer. (With the BlogHerRoll the culprit recently was a link showing up as http://p.feeddirect.com/page?bguid=677281&o=rss020&wiz=2289528). It's an IE-only problem, but it needs addressing as so many people use that browser.

Here's how to fix it for the BlogHerRoll (courtesy again of the Caesar of CSS, Truckspy/Kirk, thanks again pardner!). In your blog template, in the head section (just before the is fine), simply copy and paste the following code, save your template and republish your blog:

     .blogrollitem {
   word-wrap:break-word;
   }

Got a different type of blogroll? If you suffer the same displaced sidebar problem, view your blog in Firefox, try highlighting the blogroll title and first few entries, rightclick the selected bit and choose View Selection Source. With the BlogHerRoll section in my blog it looks something like this:

<li><h2>BlogHerRoll</h2>
<ul><li>
<a href="http://www.blogher.org/2005/07/how_to_add_the_.html">
(How to add the BlogHerRoll to your blog)</a>
</li></ul><br>
<script language="javascript"
src="http://rpc.bloglines.com/blogroll?id=blogher"
type="text/javascript"> </script>
<div class="blogrollmain">
<div class="blogrollitem">
<a href="http://www.2020hindsight.org">2020 Hindsight</a>
</div>
<div class="blogrollitem">
<a href="http://consumingexperience.blogspot.com">
A Consuming Experience</a>
</div>

Notice that that each blog title entry is wrapped in div tags with class="blogrollitem". That's what it is for the BlogHerRoll; with some other blogrolls it may well be class="somethingelse" - just check what it is. In that case you can still add the above code to your template in the same way, but change "blogrollitem" to whatever "somethingelse" is before you save, and if the problem was down to the blogroll, it should be fixed. (If it doesn't say class="something" for each entry - and that depends entirely on the blogroll provider - then tough luck, unless you can persuade the provider to change things at their end to output a class for each entry.)

The same approach might also help if other stuff in your sidebar (not just a blogroll) is causing the drop problem because it's too long or wide. Try giving the problem text a class (like "wrapyousucker") by adding class="wrapyousucker" (or whatever name you prefer) inside the opening tag for that text (like the div in the BlogHerRoll example), and then add the above code to your template's head section, changing "blogrollitem" to "wrapyousucker" (or whatever), save and republish. That may not solve the problem if there are other bits on the page which are too wide (and I won't go into the many other things that could go wrong there now, like big images), but it might be worth a try.

---

Technorati Tags: browsers, Internet Explorer, CSS, blog, blogs, blogging, tips, tricks, sidebar, BlogHerRoll, blogrolls, Improbulus, A Consuming Experience, Consuming Experience