Greasemonkey Script: Find images that are too wide and break your blog template

Ever try to stick a 550 pixel-wide image into a 500 pixel-wide space? Firefox will increase the space, but under Internet Explorer 6 (or lower) it will move the sidebar so that it comes AFTER the blog posts.

Figure 1: Crappy MSPaint drawing explaining what I’m talking about.

Blog themes come in two flavours. Fluid/liquid where the template stretches around the content to use the maximum width and fixed where the template will always be a certain number of pixels wide.

Problems can arise when using a fixed width template with images. If the image is too wide to fit it can stretch the fixed width section. This can break your sidebar in Internet Explorer 6 by pushing your sidebar so that it comes after all of your content.

As a Firefox user I don’t “test” my blog in Internet Explorer 6 very often (even though it still has 50% of the browser market share). So I needed a script that scans my blog and warns me if I’ve added an image that is too big and will break my blog template under IE 6.

What it does

• Warns if images are too big and will break your blog.
• Suggests dimensions for resizing images so they will fit.

Figure 2: Highlighting which image is too big and breaks the theme.

Find out more information and how to install/configure this Greasemonkey script.