The Power Of ZOOM - Fixing CSS Issues In Internet Explorer

Posted September 18, 2008 at 9:02 AM

Tags: HTML / CSS

I think we've all experienced how frustrating it can be to do cross-browser testing with CSS-based web sites. Why is it that Internet Explorer (IE) never seems to play nicely with good, solid CSS markup?!? Anyway, I just thought I'd share one technique that I've found to be extremely helpful. When I have some CSS that just won't work in IE, I see if adding a ZOOM property of 1 (one) will help:

 Launch code in new window » Download code as text file »

  • div {
  • zoom: 1 ;
  • }

I have to say, 90% of the time, this fixes the display issues that I am having in IE... and, it does so without adversely affecting any of the other browsers (that I have tested). I guess you could call this an IE-hack since I believe the zoom property is only supported by Internet Explorer.

I am not exactly sure why this works, but it has something to do with what you are trying to accomplish and the concept of an element having a "layout". In IE, some elements have a "hasLayout" property that is true by default. This is required for many visual settings; for example, an alpha filter only works on an element that hasLayout. So, why does {Zoom:1} work? It gives the target elements the hasLayout property.

There's a bunch of other things you can do to fix rendering issues in IE, but I have found {zoom:1} to be the lowest hanging fruit. For a more in depth look at what it means for an element to hasLayout, click here.

Download Code Snippet ZIP File

Post Comment  |  Ask Ben  |  Other Searches  |  Print Page



Learning ColdFusion 9 - ColdFusion 9 tutorials, samples, examples, demos

Reader Comments

Sep 18, 2008 at 12:44 PM // reply »
1 Comments

Ben...

Personally, I rarely find the need to write hacks for IE. If you're coding to standards compliant xHTML, and are using the Strict doctype, then it's usually a matter of knowing how to write CSS code which won't require hacks.

At most I might have to write some tweaks to my CSS which adjust the differences between border interpretation between IE and the other browsers.


Sep 18, 2008 at 12:48 PM // reply »
7,212 Comments

@Andy,

I think we're on the same page. That's why I only mentioned Zoom here and not a bunch of other things. The propert Doc Type and nice markup are the best defense against hacks. However, I have found that some things just don't play nice.

The most recent example I ran across was applying an alpha filter to a Div. Worked fine in FireFox, but was ignored in IE because the DIV didn't have a set height and width (it has variable sized content). Howeer, when I added zoom:1, IE honored the alpha filter. I am not sure that any changes in the CSS or Markup would have fixed this?


Sep 18, 2008 at 3:28 PM // reply »
3 Comments

Here's a handy CSS rule to see if your layout problems are related to IE and not your CSS. This quickly sets these values, which seem to be at the root of most IE rendering issues, for all elements.

* {position: relative; zoom: 1;}


Sep 18, 2008 at 3:31 PM // reply »
7,212 Comments

@Steve,

While I like where you're going with that, I tend to shy away from mass-settings. It makes me feel more comfortable to fix issues as they are found, but that's a personal choice.


Sep 18, 2008 at 3:35 PM // reply »
3 Comments

@Ben,

Agreed. This is primarily a debugging setting only to see if the problem is an IE rendering issue.


Sep 18, 2008 at 3:36 PM // reply »
7,212 Comments

@Steve,

I can dig that idea :)


Sep 19, 2008 at 6:15 PM // reply »
125 Comments

Elements with layout are responsible for laying themselves out and their children.

The DOM is essentially a big tree:

html
...body
......div
.........p

If the <body> has layout it's responsible for laying itself out on the screen and then placing it's children and sizing them. If we gave the p layout, it would then be responsible for this, instead of letting the < body > element do it.

http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx

Note that you should always put hacks like this in a separate file and include it with conditional comments that target specific versions. Otherwise you might break badly in future versions of IE.


Sep 23, 2008 at 2:31 AM // reply »
3 Comments

Hi Ben,

I found this little hack for IE based Issues or say FF based issues too related to the CSS.

In this statement:

width:20px;#width:23px:_width:20px;

FF applies the first width; IE7 applies the second one and IE6 applies the third one. This method works on all the CSS attributes too.

It may be extra code, but when clients are mad of their page lookup in IE6 too[people still use IE6 !!!], this is a nice hack


Sep 23, 2008 at 8:05 AM // reply »
7,212 Comments

@Sanjeev,

Thanks for the tip.


Mar 26, 2009 at 1:57 PM // reply »
1 Comments

This just solved me a lot of trouble! Thanks, Ben!


Mar 26, 2009 at 2:00 PM // reply »
7,212 Comments

@Lindsay,

Glad to help!


May 17, 2009 at 10:20 PM // reply »
1 Comments

Thanks for the tip. IE is sooooo damn lame! The zoom trick fixed me right up and saved me a lot of time.


Jun 24, 2009 at 11:26 AM // reply »
1 Comments

I don't believe this simple code solved my problem*... and i don't believe i've never heard of this property before (and its use as a hack).

It's a life saver.

Thanks, Ben.

Cheers from Brazil!

* Some div content kept vanishing after using jQuery's slideDown animation method. Now solved with this simple hack. Internet Explorer keeps surprising me... :(


Jun 24, 2009 at 3:26 PM // reply »
7,212 Comments

@Iran,

Awesome dude! Glad to help.


Jul 3, 2009 at 6:23 AM // reply »
1 Comments

Ben, your post is interesting however! when using jQuery animate changing the opacity it seems to add a Zoom:1 into the inline style of the element this damages the element showing a double text effect as though the transition is only going 99% of the way.

This seems to be effecting a number of elements which use the fade or any other opacity transition the bug only happens in IE6.0 i have managed to fix this by removing the Zoom:1 using the css() functionality in jQuery.

is that a valid solution? i've noticed putting a background colour fix's it too! which is the best i have no idea!

Thanks
Dan


Jul 3, 2009 at 8:18 AM // reply »
7,212 Comments

@Daniel,

I think when it comes to weird bugs, whatever you can do to fix it is the "right" thing to do :)


Aug 5, 2009 at 6:34 AM // reply »
1 Comments

Hi Ben
I have used your code in my stylesheet and seems to work fine in IE but it seems to not like in my CSS code it shows the following error

Validation CSS 2.1 Zoom is not a known CSS property name

Can this bit of code be used in a stylesheet?
thanks


Aug 5, 2009 at 8:08 AM // reply »
7,212 Comments

@Angel,

Zoom is an IE-specific CSS property. As such, I don't think it will validate. However, it is ignored by browsers that don't use it.


Dec 10, 2009 at 8:11 AM // reply »
1 Comments

Fabulous!! thanks Ben for taking efforts and sharing this solution. It worked well for me.

Thanks a ton,
Rashmi


Dec 13, 2009 at 5:31 PM // reply »
7,212 Comments

@Rashmi,

Glad you're liking. I still use this all the time.


Jan 28, 2010 at 11:49 AM // reply »
1 Comments

the problem is that: ZOOM is a non standard property so you will no pass the W3C CSS check... especcialy with a DTD STRICT...
and on IE 6 blokcs the magnification of the text so it gives problems for accessibility...


Jan 28, 2010 at 10:09 PM // reply »
7,212 Comments

@Andrea,

I suppose for validation, you could always add a zoom class post-page-load with Javascript? As far as blocking the zoom functionality in IE6 - I'll be honest with you, I don't even know what zoom does. I've never seen anyone use it in real life.


bro
Feb 3, 2010 at 10:16 AM // reply »
1 Comments

If you use the conditional statements for IE it will validate just fine, if that concerns you. IE conditional statements are just comments as far as every other browser is concerned, which no validator should examine.
Browser support of CSS is so full of holes that I don't bother with trying to achieve 100% validation unless it's a showcase site where people are likely to check it out. That's just wasting my client's money in most cases. It's more important that a site works perfectly (if not exactly the same) in 99% of actual browsers in use than it is to pass validation in a system that isn't itself 100% well-defined. Using Strict doctypes is something I do as a matter of course, but it often isn't much more reliable than using none at all, and non-compliant browsers are everywhere. With all the phones and mobile devices in use the situation is getting worse, not better.
Figuring out the hasLayout behaviour of IE is worthwhile, even if it sometimes appears totally illogical. Unlike the earlier versions of Firefox and Safari, many people are actually still using IE6 and 7... I wish they weren't but it's just not going to go away any time soon. (Having said that, I spotted a user in my stats recently apparently still using Netscape!)


Feb 4, 2010 at 9:40 PM // reply »
7,212 Comments

@Bro,

Still using Netscape!!! That's just bananas!


Post Comment  |  Ask Ben

Recent Blog Comments
Feb 9, 2010 at 8:09 AM
Creating A "Remember Me" Login System In ColdFusion
@Nikos, Heck yeah! Glad you got things working smoothly. ... read »
Feb 9, 2010 at 8:05 AM
Creating A "Remember Me" Login System In ColdFusion
No probs :) anyway , Im good now :) ... read »
Feb 9, 2010 at 8:02 AM
Creating A "Remember Me" Login System In ColdFusion
@Nikos, I've seen people use the J2EE sessions, but I have not used them myself... yet. ... read »
Feb 9, 2010 at 7:57 AM
Ask Ben: Converting a Query to an Array
@Stju, Did you actually test this? I ask because there is a fatal flaw in it - you are using the same Row struct for every row. Since Structs are passed by reference, every subsequent update you ma ... read »
Feb 9, 2010 at 7:50 AM
Using jQuery's SlideUp() and SlideDown() Methods With Bottom-Positioned Elements
@Thomas, Not bad. I suppose you could do the same with Top as well as margin. ... read »
Feb 9, 2010 at 7:47 AM
Ask Ben: Creating A PDF And Attaching It To An Email Using ColdFusion
@Johan, I don't think I have one off hand. Basically, you'd just want to use the File attribute of CFDocument to save the PDF to disk. Then, you'd want to use the File attribute of CFMailParam to a ... read »
Feb 9, 2010 at 5:34 AM
Creating A "Remember Me" Login System In ColdFusion
Any change you could show how to take advantage how the J2ee session stuff in your code? http://kb2.adobe.com/cps/182/tn_18232.html ... read »
Feb 9, 2010 at 5:32 AM
Creating A "Remember Me" Login System In ColdFusion
This may help: http://bugs.farcrycms.org/browse/FC-79 Its the session variables' option being selected in the CF Admin ... read »