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.

Yes, it's rather embarrassing, but I admit it. I have a Facebook account. Though I resisted for a long time, I was recently convinced to join Facebook to participate in a birthday prank for a friend. Oh well, another social time sink.

On Facebook today, I was invited to join a group called "Blue Beanie Day." November 26th has been named Blue Beanie Day, in honor of Jeffrey Zeldman's photo, donned in a blue beanie, on the cover of his book, "Designing with Web Standards." It's a day to stand up and show our solidarity around accessible web development using Web Standards. And besides that, it'll just be plain fun!

Here's how it works:

1. Buy, beg, or borrow a Blue Beanie and take a photo in it. Heck, you can even take a picture with your camera phone at the mall trying one on if you don't want to buy it. Maybe you'll put a beanie on your head or change a black beanie to blue with Photoshop. Be imaginative. Take a cool group photo of you and your friends wearing Blue Beanies. The possibilities are limitless. Show your beanie creativity.
2. Post your photo, or photos to Facebook, the Flickr pool, and other social networks on November 26th, 2007. Remember to switch your profile photos that day on all your social networks, like Flickr, Twitter, Last.fm, iLike, Pownce, Dopplr... you name it.
3. Promote Blue Beanie Day in your blog or wiki starting today. Tell all your friends to get ready for Blue Beanie Day. If you have a Facebook account, join the group and invite all your Facebook friends to this event.

You can participate without a Facebook account too. Just grab a beanie, make it blue and join in! See you there.

I've just returned from over six weeks on the road (12 locations all over the globe). Needless to say, I've been scarce around these parts of late. I'm hoping to start remedying that.

While attending one of the conferences, I was discussing creative, problem-solving techniques with an attendee, and mentioned a method I'd recently employed for legends that won't wrap in some browsers. They mentioned that these types of creative tips should be blogged and, well, I'd truly intended to blog it here for others who run into the same problem. I found precious little written on it when I was searching for a solution. I figure it's better late than never. :)

Many of you understand the accessibility and organizational reasons for using the fieldset and legend elements. I was recently coding a site that had a large number of forms. I was using fieldset and legend to organize and group the information. The copy written was very off-the-cuff, conversational and fresh. I liked it. But occasionally, the amount written (and used as the legend) needed to wrap to a second line. Enter the problem.

I found that the wrapping behavior varies from browser to browser. On a Mac, legends wrap automatically in Opera, Safari, and Explorer. They do not wrap in Netscape, Mozilla, and FireFox (obviously the Moz-based browsers). On a PC, they don't wrap in Netscape, Mozilla, FireFox, or Internet Explorer. This means that you either have the div containing your legend pushed wider and overlapping your other divs, or, in the case of IE, it can cause float drop. You can place a break element into the legend to randomly force the text to a new line. However, once the text size is larger, and you're viewing with a browser that does allow the legend to wrap, you get a horrid stacking of the legend. It wraps automatically and then again where you placed the break element. Unsightly.

Several suggestions were made on a list I'm a member of. One was to put a width on the legend (which didn't work in all browsers). The other was to make the text within the legend extremely short and then place the longer question/comment directly below it before the form controls contained by the fieldset. That, however, isn't a good option either (even if I did want to change my clients interesting way of wording things). Once Assistive Technology (AT) enters forms mode, it doesn't read elements not marked as form elements (like paragraphs, lists and headings). So though it was an interesting idea, it was sub-optimal and nixed as well.

Finally, after much discussion, Mike Moore (on the WebAIM list) and my friend Derek Featherstone (by IM), put me on the right track. The answer lies in placing a span element directly inside the label element - <legend><span>Text within it</span><legend>. Then, create a rule (something like - #divName legend span) which includes display:block (since a span is inline by default), the width you need, along with your other styling. Works perfectly in all the major browsers. So there you have it with many hat tips to my friends. :)