A Consuming Experience

Thoughts on my experiences as a consumer of products, services, people (well maybe not that last one...), from reviews to raves, rants and random thoughts - concentrating on technology, gadgets, software, product usability, consumer issues, customer service. Including some introductory guides and tips on various subjects (like blogging!) which stumped me until I figured them out. And the occasional ever so slightly naughty observation.

Add this blog to Del.icio.us, Digg or Furl | Create Watchlist for this blog

Add this blog to my Technorati Favorites!

Fix the Internet Explorer sidebar drop problem for BlogHerRoll etc

Friday, January 06, 2006
Deutsch | Español | Français | Italiano | Português | 日本語 | 한국어 | 汉语

Add this post to Del.icio.us, Digg or Furl | Create Watchlist

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 {
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:
<a href="http://www.blogher.org/2005/07/how_to_add_the_.html">
(How to add the BlogHerRoll to your blog)</a>
<script language="javascript"
type="text/javascript"> </script>
<div class="blogrollmain">
<div class="blogrollitem">
<a href="http://www.2020hindsight.org">2020 Hindsight</a>
<div class="blogrollitem">
<a href="http://consumingexperience.blogspot.com">
A Consuming Experience</a>
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: , , , , , , , , , , , , ,

Links to this post on:

Create link here by posting on Blogger

15 Comment(s):

Can I say I just love what you write? Everytime I come here I learn something useful in a way that I can understand. You ROCK!

(By Nancy White, at Saturday, January 07, 2006 5:01:00 AM)  Edit Comment

This is a an excellent fix to one of the most common problems faced by IE users.

But what happens in the case when you have a wide picture that extends beyond the width of the div tag ?

Thank you.

(By Amit Agarwal, at Saturday, January 07, 2006 5:30:00 AM)  Edit Comment

Nancy, thanks for your kind comment, my basic aim to be useful and comprehensible, so I'm delighted that you think I'm getting there!

Amit, thanks for the comment. With a wide picture you need to resize it. As the ever knowledgeable Kirk says, you could make the physical image smaller in a photoediting program, or tweak the image tag itself, e.g. <img src="/2006/01/blah.gif" style="width:10px" /> or use CSS. There is a CSS max-width property, though IE doesn't support it yet. For more on that and the workarounds, see Kirk's post on max-width.


(By Improbulus, at Sunday, January 08, 2006 9:34:00 PM)  Edit Comment

i tried to paste into the template the html that you suggested but all of my contriuters, links, archives etc. are still all the way at the bottom of the page when viewed through ie????

(By dannyfresh, at Tuesday, January 24, 2006 11:24:00 PM)  Edit Comment

Dannyfresh, your blogs look fine to me in IE, can you give any specific examples?

(By Improbulus, at Sunday, February 05, 2006 5:21:00 PM)  Edit Comment

I have a different problem, the precise opposite, in fact.

OK, so here's the scoop.

My blog is fine in Frefox but, viewing it in IE, the first post appears about 2/3 of the way down the page, near the bottom of the sidebar, making the page appear blank to users who don't scroll down looking for posts.

Any suggestions?

(By lucien de la peste, at Sunday, February 12, 2006 12:22:00 PM)  Edit Comment

Alignment all looks fine to me, inkslinger, in both Fox & IE - but your page is taking an age to come up, at least 20 or 30 seconds even on my 2 MB connection. You ought to take a look at it, e.g. blogtopsites.com may be slowing it down.

(By Improbulus, at Friday, February 17, 2006 5:07:00 PM)  Edit Comment

Actually even if there is a link or any single word that is quite long in the post or header the same happens. Wordwrap doesnt work then in IE for some reason.

(By Woke, at Wednesday, July 19, 2006 8:51:00 AM)  Edit Comment

True, woke - but hopefully it's not often that we use single words that are "too" long for IE.

(By Improbulus, at Sunday, July 23, 2006 11:27:00 PM)  Edit Comment

Hi improbulus, I really appreciate you addressing this frustrating issue. Yet, I am still trying to figure out how to fix this problem for my blog (IE users get the messed up screen). Any clues? I've tried pasting the code you mentioned but it still looks messed up in IE. Cheers.
(I'm testing this on my test blog gdoginkorea first before I make any changes to my real blog)

(By Gdog, at Friday, September 01, 2006 2:19:00 AM)  Edit Comment

Gdog, I can't see the word-wrap:break-word; code in your template at all? Not for that blog or your test blog (assume it's on Blogspot).

(By Improbulus, at Friday, September 01, 2006 2:54:00 PM)  Edit Comment

I can't get it to work. Even when I remove the entire column except for the recent posts and archives, it is still pushed to the bottom.

(By Ariel Lepor, at Wednesday, October 11, 2006 1:53:00 AM)  Edit Comment

Any help, improbulus?

(By Ariel Lepor, at Friday, October 13, 2006 4:06:00 AM)  Edit Comment

Soy alegre porque IE7 no tiene este problema. :)

If everyone switched to IE7, there would be no need for this thread. I'm glad Microsoft considers it such an important update...

(By Ariel, at Friday, November 10, 2006 1:41:00 AM)  Edit Comment

Ariel, sorry I wasn't able to reply earlier, but I see you've sorted it out, as in IE6 your blog looks fine now.

It'll take a while for people to switch to IE7 though, I think.

(By Improbulus, at Sunday, November 26, 2006 9:34:00 PM)  Edit Comment

Post a Comment | Subscribe to Post Comments [Atom] | Subscribe to all comments on all posts

| Previous Post »
| Previous Post »
| Previous Post »
| Previous Post »
| Previous Post »
| Previous Post »
| Previous Post »
| Previous Post »
| Previous Post »