Monday, January 15, 2007

Grrrr Blogger (oops) Grrrr IE7

So I was all set to get cracking a a series of new security related posts.

For reasons I'm not sure about, I opened up my blog's page in Internet Explorer 7, instead of my preferred Firefox.

I was shocked.

Gone were the pretty dual-columns on the right hand side.

It was all a single column stretching downward.

I flipped Firefox open at it looked normal with the dual side-columns displaying nicely.

I didn't recall making any changes to the side-column, except adding in a new link for Secunia's Secunia Software Inspector. Maybe I blew something out.

So for the next four hours I have been tweaking and playing and messing with the template. All to no avail. I even downloaded Opera (portable) to see how it was rendering there as well.

Firefox and Opera were rendering the template just fine...IE7 was not.

I'll save you the details...but I eventually traced the problem to this post. It was the formatting of the leading quote causing (invisible) intrusion into the side-bar area. That then forced them to display as a single column. Once I dropped the font-size down a bit, IE7 stopped misbehaving and all was well again.


Lesson learned? If you use a custom Blogger template, and it utilizes "float" settings...even if they are (for all practical purposes) fixed, all it takes is an oversize photo, or element, or text that exceeds the element's width to shove the other elements out of the way. It appears to be just an IE thing as Firefox and Opera didn't bat an eye.

New Label Cloud.

I've been unhappy with the length of my default Blogger label widget item. It just seemed too long and forced other side-bar content down the side.

One solution would be to code the element to reduce the line spacing. I didn't really like this idea.

So I tried the Code for Beta Blogger Label Cloud hack instead after finding a few in use that looked pretty good.

It was a quick modification and I am much more pleased with the results now.

Only, stupid IE7 still is messing with the rendering again.

If you look at it in Firefox or looks centered and spread out in its column space.

If you look at it in IE looks centered, but is shoved to the right of its column space.

It's not that big a deal to care about trying to change it now.

I've also changed the hot-links in my blog header. One is now a link to RSS feed this blog. The other is a link to Mozilla's Firefox/Thunderbird download site.

I know the "profile" and "archive" links are working yet....that will be another day.



phydeaux3 said...

Heh, had to wrestle with IE more times than I care to remember myself. :-)

On the cloud difference in IE7, it looks like IE is taking it's margins for the cloud from the div that's holding both right sidebars, instead of it's own container...grrr is right.

Try this.
#labelCloud ul{list-style-type:none;margin:3px 0px;padding:0;}

That seems to make all the big 3 agree about as much as they will. Just changes the outside margins on the ul cloud from auto, and let's the text centering do all the work.

Claus said...


Thank you! Your perfect tip was an unexpected surprise this cold and icy morning down here in Houston, Texas!

I added the code and it now looks very, very good in IE7, and Firefox didn't bat an eye at the change. ;-)

I was just going to put off dealing with it until I had the patience to pick through the code elements (I'm still learning CSS and XHTML).

I really do enjoy (really!) the overall enhancements in the "new" Blogger. It's just taking me some time to get used to them. Your code tips are really helpful and as a fellow Blogger/blogger, I deeply appreciate your sharing of your work!

Dōmo arigatō!

webweaver said...

Hi Claus!

Thanks heaps for the link! Glad you liked the look of the Label Cloud on my blog, and that it inspired you to get the code from that genius phydeax3's site.

I checked my pages in IE7 after reading your post, and the label cloud looks fine on mine. It must be due to a difference between different blogger templates I guess.

I HATESSSS IE7! Bleagh! It throws up all sorts of bugs in the websites I build, and as yet there are sometimes no easy fixes to be found. *sigh*