Fix the Internet Explorer sidebar drop problem for BlogHerRoll etc
Friday, January 06, 2006Is 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>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.)
<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>
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
« Home | Previous Post »
Feed
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.
Cheers
Imp.
(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.
www.scrattyphotography.blogspot.com
(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