SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Purpose of zoom, and why does google use it?

    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

    Code:
    .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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    zoom is a proprietary CSS property used by Internet Explorer - it is one way of triggering haslayout without affecting other browsers.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    zoom is a proprietary CSS property used by Internet Explorer - it is one way of triggering haslayout without affecting other browsers.
    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?

    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DocType View Post
    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.
    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

    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.

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

  5. #5
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Read the link above for a more thorough description
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •