Recently, I did a presentation at Webmaster Jam Session in Dallas. In my session, one of the things I showed were some faux column techniques. During the QA at the end, a problem was brought up that I hadn't run into. The statement/question was that, evidently, there's a reported bug in Internet Explorer 7 (OMG, imagine!) where background images are not zoomed with the rest of the page when the Page > zoom accessibility feature is used. So when you use a faux column technique on your web page to create the illusion of equal columns, your text can end up not being on top of the column color you want. In some cases, this can lead to some pretty major legibility problems. The attendee stated they had given up faux columns due to this issue. Talk about depressing! I use faux columns so regularly -- I just couldn't imagine I had to give them up!

I talked to a couple Microsoft people and yes, they said it was a known bug, but I couldn't get any information about a possible fix time frame. Now that I have IE7 on my computer (yay, VMWare!), I had some time to have a look (well, I didn't really have time, but due to something I was working on and with my curiosity piqued, I did some testing). What I found was actually so much better than what I expected. I'm sharing it for those out there that may have the same misconception I did -- along with a couple of workarounds I've discovered.

• Misconception: When using a background image to create the illusion of equal columns (faux columns), the background images don't zoom with the rest of the page causing legibility problems.
• Fact: The problem actually only occurs when you put the faux column on the body element (depending on the situation, sometimes I do, sometimes I don't).

Two Solutions for IE7's Zooming Issues

1. Place the faux column image on a div that wraps your entire page instead of the body element. This graphic will zoom with the rest of the page. Since many times, this is my preferred method, it's no wonder I hadn't run into the bug.
2. If the graphic must be place on the body element, don't lose hope. I found a workaround there as well. If there is a background property declared on the HTML element, the background image on the body element will zoom. This seems to work on the HTML element with both background images and background colors (I tested using the short property name background with both). I removed the background color from the body element and placed it on the HTML element instead. In all major browsers I tested, it worked perfectly.
3. Update! I should have thought of this when I was testing. This works where I've tested it (IE6, IE7, FFOX, Safari) but I've not been exhaustive across every browser due to other deadlines. It shouldn't cause any problems though and it gets Dreamweaver users around a rendering issue (where the color on the HTML element isn't rendered in the DW workspace). Keep the normal background properties on your body element -- background color and image. Simply add a background property on the HTML element as well:

   html { background: #FFF; }

   The body zoom still works properly in IE7, and due to the cascade, the html color is overridden by the background properties on the body selector. It's valid code. It's not a hack. It makes one of the handiest techniques in my arsenal work until IE7 is fixed (no bets on when that might be) and no harm is done. Only good. ;)

So don't give up hope on the fabulous faux column technique just because IE7 has some issues. Continue to use it all you need to -- just keep the above parameters in mind to decide what you need to do in your situation.