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.

52 thoughts on “Defective Themes: Image Width”

  1. Isn’t IE7 to be pushed out via Windows Update, thus implying the majority of IE6ers will be upconverted? I’d say that suggests the issue might go away sooner than you think.

    Not that I’m saying this isn’t an issue, but there’s hope, y’know? 🙂

  2. What about

    overflow: auto;

    It would add scrolling to the element, so you can still see the content, but you just have to scroll to see it.

    Also, if the width is fixed, then why doesn’t the fool just add

    width: 400px;

    instead of 100% like an ass.

  3. Right on, Andy. I normally include overflow:hidden in everything I design. However, there is a pitfall.

    I don’t have a Mac with which to test so I can’t confirm this, but I understand Internet Explorer 5.2 for Mac has a bug which causes it to interpret overflow:hidden very badly. Supposedly, any circumstance which creates overflow will cause the object to which overflow:hidden is applied to act as if visibility:hidden was applied instead. So if you apply overflow:hidden to #content and then create overflow with an overly large image somewhere within #content, the entire #content container will become hidden.

    Like I said, I do not have a Mac with which to confirm this.

    IE5.2 has got to be getting pretty scare out in the wild, but perhaps this bug may explain why there hasn’t been a huge push across the design community to adopt this style rule as a default.

  4. Re: IE7 being pushed out by Windows Update – yes, it will be, but MSFT is going to offer a blocking tool to enterprise clients. Home users won’t have a choice, but business environments will. Not that anyone reads blogs on their work time, right? right? Um, yeah, anyway… IE6 will be part of the ‘net ecosystem for a long time to come.

  5. About the flaws of IE6 and the promise of IE7: I haven’t tried this myself yet (since I don’t have access to a MS Windows computer with IE6 right now) but Dean Edwards IE7.js script try to make IE6 behave better.

    IE isn’t a browser, it’s a scream.

  6. BTW, the added support for stylesheet-only templates using sandbox in functions.php revision 57 in SVN brakes the support for custom skins. It end up executing the initial if clause not reaching the else if.

    Eh, was I intelligible? 😉

  7. I’m not a theme designer so feel free to ignore me, but if you want to know how many themes don’t work in IE6, then open it up and go visit

    Take a few for a test run and watch those sidebars drop and the layouts break. And that’s before you put it on your own blog with the too-big image that you forgot to downsize…

  8. If I am the background: #fff; guy, then Andy you are the overflow: hidden; guy.

    What? I thought I was the background-color police? Besides, plaintxt doesn’t have the bkg color set…

  9. I tend to think that people who are stupid enough to post 800px wide images in the body of their post, rather than posting a thumbnail and linking to the full-size image, deserve to have their themes break on them as a punishment for their lack of concern for dial-up users.

    If your content column is fixed at 400px, and you don’t want to mess up your theme, don’t post images that are 450px wide. It ain’t rocket science, and there is no reason why theme designers should be bullied into coding for your idiocy.

  10. Although width:expression(400 + “px”); can be used to force wax-width in IE div#content { width:expression(400 + “px”); }


  11. Sorry for the borkage. Missing is: Use conditional comment to call IE lte 6 specific stylesheet and define width in your image classes there. IE lte 6 treats width: as max-width: effectively.

  12. Wank: Harsh! And so wrong when you have seen so many support emails from people who do not understand their mistake. It’s not their job to understand the box model. Blogging is for everyone!

    Sam: Nice! How about a solution that doesn’t use @import or expression? Sorry to suggest hackery, but @import and expression are filtered out of Custom CSS on for security reasons. I just tried this and it works forces all images to 100%, which isn’t so good because small ones are expanded:
    * html img { width: 100%; }

  13. *kicks self in teh fase*

    i always mean to do that, and somehow always forget.

    but why do #header and #footer need it?
    i usually restrict the overflow on #sidebar, not .widget, though.

  14. Wank has a point, but not a strong one for people who use a service such as where there are no recommendations for max image size on each template (and the css is done via @import so I can’t see it, but as a blogger and not a designer, why should I have to???). I don’t use the visual editor and don’t want to mess around with manually creating the img tag and link url necessary to get a thumbnail linked to a full-size image. I would much prefer to know how big an image I can stick in there without breaking the flow, ya know?

    And while the gun is pointed, how about the WP admins fixing the img tag to give it some breathing room when you add the “align” attribute. Even in Firefox the text is flush against the img.

  15. Patch, that has nothing to do with WP. That’s your browser’s interpretation of the code. The designer should add the appropriate padding to keep that from happening.

  16. How about if you have a 400px wide column, you resize you damn image to 400px before posting. Problem solved.

  17. also, IE7 is being pushed out as a critical update, so in the near future, most web design will be less painful.

    nonetheless, overflow looks like crap in firefox as well, it just doesn’t wreck the sidebar. (other than by floating the stupid 800 pixel image under it)

    but really, a clipped image is no less of a support headache. people still want to know where cousin jerry went.

  18. Sorry, but the only valid way to do any kind of max-width is with an IE-only stylesheet or you get the results you mention. (By valid I mean it validates and it won’t break in IE7, etc.). M$ recommends the conditional comment method btw. Sounds like doesn’t allow multiple stylesheets?

  19. Sam: Thanks for the info. strips all comments from user-supplied CSS at this time. Of course a system-wide theme can use as many stylesheets as we care to audit 🙂

  20. Jonathon: it is the wp admins responsibility to fix the design because they have converted it from it’s original format to one that will work with the MU version at They aren’t mass-importing themes, so they should test those common things like image wrapping and fix them, imho. I haven’t seen an image wrap work on the couple themes I’ve tried. And the firefox comment was because I’ve seen IE choke when Firefox hums along fine, so I was pointing out that the issue is not browser related, but CSS related, which, back to square one, is the WP admins responsibility.

  21. This is why I don’t publish my themes… I am the only one who knows how *not* to break my themes. I would love to see a php image resizer built into WP allowing a one-time specification for maximum allowed width, but I know that would be dependent on certain php modules that might not be part of every hosts install so is unrealistic. And being a low-level php hack myself, I couldn’t hope to code a plug-in to do that for certain clients.

    I also designed and maintain MySpace pages for a couple of artists and know the frustration when some jackass (I mean, adoring fan, adoring fan!) posts a 1000px wide img stright off of photobucket, thus destroying my lovingly hand-crafted layout and sending me back to the drawing board.

    But alas, I also know it’s *my* job to make the design as bullet-proof as possible, not the fan’s (or client’s) job to accomodate me and my gorgeous layout.

  22. But it’s still not the WP admins’ fault, patch. They don’t make the themes; they make the software. Other people make the themes, and it’s their fault if something doesn’t fit right. Anyway, anal retentive point; it doesn’t matter since the images break the design regardless of who’s to blame. All I was saying is don’t point to Matt when he didn’t do it. :o)

  23. Okay, I haven’t tested it but I guess my own theme will miserably fail this test, BUT it’s not released to public AND according to my stats tool only 3 percent of my site visitors do have a screen resolution smaller than 1024×768. So no need to dodge for me, I’ll take the bullet 😉

  24. I think Chewxy was referring to putting a % width on each individual image. Richard Rutter talks about this technique at Clagnut. It’s an interesting a powerful technique, but really a pain unless you want every image to be the same size. Nevertheless I use to do it when I was using a liquid layout.

  25. I tried to modify a theme but got stuck when the sidebar moved below the article as soon as the browser window was reduced.. thats when i left it and hired a designer 😉

  26. Overflow:hidden looks horrid but I don’t have a better solution. I will say this however, as you brought the gun to the table!

    Practically anybody can use a gun – do we give them bullets that can’t harm them? No. Users need to be educated as well!

  27. I do not mind if users blow themselves up by publishing huge graphics. But if a blog is going to break I wish the breaking point was consistent across platform. The problem at WP is that the guy is using FF completely unaware he is borked in IE or vice versa. In Kubrick the defacto allowable width difference between the browsers is astonishing. Its just sloppy coding.

  28. I know this is an old post, but it has just resolved a problem that I’ve been having for months.



  29. I gave up on CSS when it first came out because of the lack of standards. I’m trying it again and recently developed my site using the K2 theme. Things looks great … in Firefox. When a friend who uses IE 6 mentioned about the sidebar missing, I realized that standards were still not in place.

    Anyway, thanks for this post because I wouldn’t have known where to start fixing my site. This type of info isn’t listed in any help files with WordPress or IE.

Comments are closed.