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.

Next Post
Leave a comment

52 Comments

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

    Reply
  2. The author of this post stumped the author of this comment, so any outside help would be great. :)

    Reply
  3. 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? :)

    Reply
  4. Never considered the overflow hidden for my sidebar of the themes.

    Goes to put it in!

    Reply
  5. 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.

    Reply
  6. 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.

    Reply
  7. Joefish: that’s good to know. Is anybody out there still designing against MacIE5.2 constraints?

    Reply
  8. I use %… lol… it works in all browsers

    Reply
  9. Chewxy: what are the selectors? What is the property? Please post the whole ruleset.

    Reply
  10. 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.

    Reply
  11. Wigdet is supposed to be Widget
    Just a pointer for noobs

    Reply
  12. Good Explanation Andy, need to fix this naging problem on my site…

    Reply
  13. Fixed “wigdet” thanks to Sid.

    Reply
  14. 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.

    Reply
  15. 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? ;-)

    Reply
  16. 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 themes.wordpress.net.

    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…

    Reply
  17. Yes, I’m a serial commentator.

    I’ve created a patch to escape attribute strings correctly (using " instead of ') in the generated markup tags.

    Reply
  18. Realized that I maybe should have made my Sandbox related comments to a Sandbox related blog post. Sorry. :-(

    Reply
  19. 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…

    Reply
  20. He, he, he. Very clever, Dougal. ;-)

    Reply
  21. 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.

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

    (IE

    Reply
  23. 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.

    Reply
  24. 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 WordPress.com 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%; }

    Reply
  25. *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.

    Reply
  26. Wank has a point, but not a strong one for people who use a service such as WordPress.com 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.

    Reply
  27. 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.

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

    Reply
  29. 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.

    Reply
  30. 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 wordpress.com doesn’t allow multiple stylesheets?

    Reply
  31. Sam: Thanks for the info. WP.com 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 :-)

    Reply
  32. 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 wordpress.com. 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.

    Reply
  33. 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.

    Reply
  34. hey, i m so happy 2 join in wordpress, so all of u should give some tips abt wordpress like “how is it work?”

    Reply
  35. 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)

    Reply
  36. McShelby

     /  August 16, 2006

    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 ;)

    Reply
  37. 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.

    Reply
  38. 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 ;)

    Reply
  39. BM

     /  August 18, 2006

    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!

    Reply
  40. Thank you for writing this – I am not a designer but a user and I am going crazy trying to fix my theme – it works in IE but not in Firefox, funny enough and the designer cannot seem to fix it –

    check it out at:
    http://www.thingsinyourhead.com/?p=450#comments

    I don’t know if there is any advice you could give me but I am so frustrated right now

    Reply
  41. 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.

    Reply
  42. Hi Andy,

    since this is coming up again I thought I’d drop a link to a greasemonkey script I created for Firefox that people can use to find out if they’re breaking the box model for their theme on IE6:

    http://engtech.wordpress.com/tools/wordpress/findwideimages/

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

    Thanks,

    Luis

    Reply
  44. 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.

    Reply
  45. Thanks man. You fixed the theme I just installed (looked fine in Firefox!) with that simple code.

    Rex

    Reply
  1. serialdeviant.org(y) » ‘Defective’ WP themes // i wan to comprain
  2. WordPress Station » Blog Archive » Coding Images in Posts
  3. Note To Self - Defective WordPress Themes
  4. WP ThemePark » Image Overflow Issue
  5. Andy Skelton: Defective Themes: Image Width at SocialCode
  6. The Battle Between Image Width and Column Width « Lorelle on WordPress
  7. This is SmackFoo › chronology › revisionism of a theme

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,665 other followers

%d bloggers like this: