IE10 Incompatibility with Yahoo Mail...or Vice Versa.

A couple weeks ago, a client with a new PC complained of an error message repeatedly appearing at the bottom of a page in Internet Explorer 10.  This happened particularly when using the latest version of Yahoo's web-based email. It was a constant irritant that covered part of the box for composing an email message and would reappear shortly after being dismissed.

The Offending Message

Now, I don't use IE unless absolutely necessary.  My Windows PCs all run XP or earlier with IE8 at best, and I run Fedora Linux on my main PC (which blessedly won't run IE).  So, I hadn't run into this non-Windows-standard message box before.  The client was also running Norton AntiVirus, and the message box matched Norton's color scheme.  So, naturally I assumed that Norton was somehow generating the message appearing in IE.

After much wheel-spinning, it came to light that IE itself was generating the messages.

The Compatibility Mode Button

I tried a few things suggested on the net, none of which worked. As a last resort that shouldn't have worked, I clicked IE's "Compatibility Mode" button. I say "it shouldn't have worked" since Compatibility Mode is intended to fix problems with old sites and Yahoo's site is supposedly modern. Obviously, one or the other is mucked up. You're invited to place your bets on which one. At any rate, that click solved the whole problem. (Anybody out there know of a text emoticon for rolling one's eyes?)

Here's hoping this helps someone save some time and avoid some frustration!

Reducing Image File Sizes in Blogger Posts

It was recently called to my attention (Thanks, Alan!) that Blogger has a 1MB page size limit when I was asked if there was any way to get around it, especially when including lots of pictures and video.

My first reaction was "Probably not" since Blogger likely imposed the limit to constrain server load and/or so blog viewers don't get the impression that the Blogger service is slow. I still think there's no way around the limit.  But, assuming that the size of linked content loaded with the page counts against the limit, it should be possible to fit more on a page than Blogger's simple controls sometimes directly allow.  In particular, the file size of image thumbnails can be changed.

I had originally intended to explain how one can create their own thumbnail images smaller in both dimension and file size, upload them, and change URLs in posts to point to the smaller images rather than the large ones that are just programmatically sized by the visitor's browser. However, it seems there's a much easier way.

As far as I've been able to tell, Blogger has a bug of sorts with the addition of images to a post. I don't know at this point whether it's related to the browser and/or operating system used while adding the image, to the template used, or to something else. But an easy hack will get around the problem.

The following block shows code similar to that added to a post by Blogger when an image is added to the post. The second block shows the same code reformatted to be a bit more "human readable."

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjirj9gGsjKWuOymg6tuZq6Fhy6rCPj7UcHdZyFX4yjRsHduqXWOluW7A3QkqQEwxG5wA-LW87cp9wArnJWSPIWSiC-JIbzY6AS18WLHBQ1G8s2VFQhVjNfa3X64K1ctKaEMC-_B-IXXFA/s1600/VL_dmesg_comparison.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjirj9gGsjKWuOymg6tuZq6Fhy6rCPj7UcHdZyFX4yjRsHduqXWOluW7A3QkqQEwxG5wA-LW87cp9wArnJWSPIWSiC-JIbzY6AS18WLHBQ1G8s2VFQhVjNfa3X64K1ctKaEMC-_B-IXXFA/s1600/VL_dmesg_comparison.png" width="200" /> </a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://.../8DWceGrCEqI/s1600/VL_dmesg_comparison.png" ... >
   <img border="0" height="150" src="http://.../8DWceGrCEqI/s1600/VL_dmesg_comparison.png" width="200" /> 
</a>
</div>

The URL between "<img" and ">" specifies the image to be displayed. The "height=" and "width=" attributes specify the size that the image is scaled to. But the highlighted bit can be adjusted to change the actual size of the image. This bit specifies the width of the image. The height is adjusted accordingly.

In some cases, if the a different size (e.g. "Small") is selected using Blogger's controls, the highlighted bit will be changed to s200. The actual image, and thus it's file size, will then be much smaller. In other cases, though, only the "height=" and "width=" values are changed. In the situation shown above, the full-size image happens to be 1600x1200, and the image was only scaled to be displayed smaller.

To change the actual image size while editing a post, all that's needed to to switch from "Compose" to "HTML" mode, find the code for the image of interest, find the "s" value in that code, and change it to the desired size. Assuming that a "width=" value is specified, you can use that value for the "s" value.

Incidentally, an image of the specified size is apparently generated on-the-fly. I tested for a weird size (s212) from an original 1600x1200 just to see, and it actually generated a 212x159 image! Note that the image is still scaled to whatever "height=" and "width=" values are specified.

To verify that the image actually is smaller, right click on the image on the post page after you've updated the post and select View Image Info, Image Properties, or the like.