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
- 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.
- 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.
- 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.
{ 9 comments… read them below or add one }
Hey Stephanie,
It’s Deborah, fellow Community MX member who spoke with you before your presentation at Webmaster Jam Session. Glad to hear there’s a solution for faux columns in IE7. Is there any update on when the podcasts from the conference will be posted? I checked with J Cornelius last month, and he said soon.
Hi Deborah – yes, I remember you.
Hope you’re well!
I haven’t heard a thing from J about the podcasts. When I verified my link was correct on this post, the site still said, “Coming soon.” (I know we were told our video podcast interviews, from Voices That Matter, would take 2-3 months.) I guess these things take some time.
You don’t remember who the woman was that said in my session that she had given up faux columns, do you? I’m aggravated with my brain because it was someone I knew from a list or something… thinking… thinking… I wanted to point her to the fix.
ciao.
Hi Stephanie,
I believe the woman who made the comment about zoom in IE7 was Cheryl Wise from Houston. Her site is: http://by-expression.com/.
Cheryl and I had dinner (or was it lunch?) together with some Dallas usability professionals I met at the conference. If I remember correctly, she is an Expression Web expert.
Very interesting – it’s always something, isn’t it?
How are you liking VMWare so far? I am using Parallels and it is great so far, but I’ve heard VMWare has some speed improvements. I may not really need the speed since I only use it to see how bad things break in IE.
Looks like Adrian just posted the how to on the Community MX site for dealing with IE7 and zoom backgrounds.
@joe lewis – I like VMware better than Parallels, only ’cause it doesn’t seem to slow my computer down so much (but yea, I only use it for testing as well)…
@deborah – yea – JoJo told me he had wanted to write an article dealing with the same thing — and I said, “go for it, dude!”
The more information, the merrier web folks are.
Great post, Stef. I hadn’t run into this bug either because I almost always place my faux columns backgrounds on a div. This is good to know.
I don’t know why, but I was having the same problem even though my faux columns were in a div tag. your html fix worked great. Thanks so much for posting this!
It works! I kept the color and background image on the < body > and simply added a background property to the < html > a color only. Now everything zooms beautifully in IE7. Thank you for this tip.