Purpose of zoom, and why does google use it?

HTML & CSS
1

If I try to validate my site’s pages through the W3C validation system, I always get this one error.

“cse-branding-bottom, .cse-branding-right Property zoom doesn’t exist”

Below is the code that google has in this file http://www.google.com/cse/api/branding.css


.cse-branding-bottom,
.cse-branding-right {
zoom: 1;
}

This code is for Google’s Custom Search.

I’ve always had a problem with my Custom Search ad displaying as “Inactive” on my AdSense “Manage Ads” page. I’ve posted about that on the AdSense help forums, and was told it was just a bug.

I think this zoom thing might just be that bug, but I can’t seem to get anyone at google to respond.

Anyone here have any ideas as to what to do about this?

2

zoom is a proprietary CSS property used by Internet Explorer - it is one way of triggering haslayout without affecting other browsers.

3

Can you explain that in more detail? I’m a little fuzzy on the details of why I would want to trigger the haslayout property, and why it would affect other browsers if I did it some other way.

What were they thinking? :nono:

Couldn’t they just have put a conditional comment in there, something like
<!–if IE–>
.cse-branding-bottom,.cse-branding-right{zoom:1;}
<!–End If–>

4

You can read the full details of haslayout in the ultimate reference here where its is explained fully. In short elements in IE that don’t have haslayout are not responsible for their or their children’s boundaries and was a mechanism to help speed the page up apparently. The net result was that IE6 especially was a very buggy browser and these elements without haslayout were unreliable in action.

zoom is just a haslayout trigger but is proprietary IE code (non valid) but will do no harm. You could use a dimension such as the height:1% hack instead but there is a danger in using the height:1% when you don’t have control over other styles. If for example the element was overflow:hidden then the height:1% may clip the content.

(The height:1% hack works because IE6 treats height as if it were almost min-height and will expand a container to match its contents.)

The zoom hack is much safer because it has no impact on the element and doesn’t care what other properties are around. Zoom will actually zoom an element and if you used zoom:2.0 the element would be zoomed to twice the size. Zoom:1.0 has no effect because that’s the size it is already.

Read the link above for a more thorough description :slight_smile:

Couldn’t they just have put a conditional comment in there, something like
<!–if IE–>
.cse-branding-bottom,.cse-branding-right{zoom:1;}
<!–End If–>

[/quote]

Yes they could but it would need to be in style tags.


<!--[if lte IE 7]> <style type="text/css">
.cse-branding-bottom,.cse-branding-right{zoom:1;}
</style>

<![endif]-->
5

Your description was all I needed, thanks.

I may create my own css with the conditional comment, and load that with the @Import instead of google’s version. I’ll leave a comment in there explaining to google why I did it, just in case they come’a lookin.