Defective Themes: Image Width

This article is aimed at WordPress theme designers. “Aimed” because there is a gun to your head. “Designers” because the issue relates to the specifications that all themes should follow. So take off your Artist hat, put on your Designer helmet and get ready to dodge bullets.

Activate a theme you made. Publish an entry with an image that is too wide for the post column. About 800px should do it for most themes. Now load up Internet Explorer 6. If it’s not a fixed-width theme, resize your browser window to 800×600. If your theme breaks in IE6 you just got your head blown off. Now regrow your head and repeat for every theme you’ve published.

If your themes passed this test, congratulations! You obviously don’t need to be reminded about overflow; carry on.

The rest of you need to be reminded of a few things:

• Internet Explorer 6 does not understand max-width.
• IE6 has no scruples about overflow busting your layout.
• IE6 is used by more people than you’d like to admit.
• WordPress does not know how wide your column is.
• You are responsible for the way your theme behaves in IE6.

What is overflow? Overflow is when a container is too small for its contents. Either the container expands or the contents won’t be contained. The default “physics” of web pages (the box model) dictates that the container expands. You can change the default. I’ll show you how.

Say your theme shows posts in a 400px-wide column and somebody posts a 450px-wide image. Ideally the image would be scaled to fit in the column. This is how Kubrick attempts it:

p img {
    padding: 0;
    max-width: 100%;
}

Firefox obeys max-width by shrinking any images that are too wide. IE6 does not obey. It expands the posts column to fit the contents. The way most 2-column, fixed-width themes are built, this forces the sidebar down the page. Does IE7 do this? It doesn’t really matter; IE6 will continue to enforce design constraints for years to come.

To achieve unbreakable column layout in IE6, you must tell the browser to hide anything that would overflow the column. IE6 won’t shrink anything; it’ll just display the part that fits and hide the rest. This will result in some ugly cropping but your layout will survive.

You have to tell IE6 where to put all those extra pixels. For that matter, you might as well tell every browser; people will post wide things of all types, not just images: long words, embeds, iframes, objects, tables, forms… Here’s some code you can adapt for your themes:

#header, #content, #footer, .widget {
    overflow: hidden;
}

Disclaimer: The author has debugged dozens of themes (and bugged some, too) but he is a terrible designer. He’s just trying to help. Solve the problem any way you like; just don’t ignore it.