Pages

Friday 6 January 2006

Fix the Internet Explorer sidebar drop problem for BlogHerRoll etc






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: , , , , , , , , , , , , ,

16 comments:

Nancy White said...

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!

Amit Agarwal said...

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.

Improbulus said...

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="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.

Cheers
Imp.

dannyfresh said...

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????

Improbulus said...

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

the ink slinger said...

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?

Improbulus said...

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.

Anonymous said...

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.

Improbulus said...

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

Gary said...

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)

Improbulus said...

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).

nature photographer said...

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.
www.scrattyphotography.blogspot.com

nature photographer said...

Any help, improbulus?

Anonymous said...

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...

Improbulus said...

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.

Athol Foden said...

I have two major problems since someone hacked into my nameawards.com blog:
1 - Only main blog shows in IE (even IE7)with no sidebar or nav buttons at all (not even at bottom)
2- Style sheet doesn't work for text anymore...looks good when I post, but not when whole site viewed. Site looks proper (under Firefox anyway)for archives before August.
Help.. am using very basic Ocadia theme.