Question

I have a css rule. its job is to place the left column of my site template in it’s correct position. I’m trying to optimize my css.

* html #left { left:220px }

I would expect that the below css would work the same…It does not in Chrome or IE9

#left {left:220px}

However, explicitly defining the whole path as below…works correctly.

html body div div #left 

Only CSS being used on page. Verified in Chrome inspector.

html {
margin-left:auto;
margin-right:auto;
font-size:80%;
width:100%;
}


.ie7 {
font-size:80%;
width:100%;
}

.ie8 {
font-size:80%;
width:100%;
}

.ie9 {
font-size:80%;
width:100%;
}


body 
{
position:relative;
text-align:center;
font: .95em "Arial","Helvetica","Trebuchet MS","Verdana","Times New Roman","Sans-Serif"; 
min-width:960px;
max-width:960px;
margin: 0px auto auto auto;
padding:0px 10px;
}


        #header
        {
            text-align:left;
        }

        #container {
            padding-left: 220px;      /* LC width */
            padding-right: 30px;     /* RC width */
            overflow: hidden;
            min-height:100%;
            padding-bottom:300px; 
            background-color:White;
        }

        #container .column {
            position: relative;
            float: left;
            padding-bottom: 20010px;  /* X + padding-bottom */
            margin-bottom: -20000px;  /* X */           
        }



        #left {
            width: 200px;             /* LC width */
            padding:0 10px;
            right: 260px;             /* LC width */
            margin-left: -100%;


        }

    /*  #right {
            width: 200px;             
            padding:0px 10px;
            margin-right: -290px;               
        }
        */

                #center {
            width: 100%;
            background-color:#fff;
            padding: 10px 20px;         
        }

        #footer-wrapper
        {
            background-color:#fff;
        }

        #footer {
            clear: both;
            position: relative;
            background-color:#163748; 
            color:white;
            padding:0;
            text-align:center;
            /*border-top:1px solid #9fa8ac;*/
            height:150px; 
            padding-top:10px;                       
        }
        #footer p
        {
            text-align:center;
        }

#footer a
{
    color:White;

}

.clear
{
    clear: both;
}


#left 
{
    left:220px;
}       

Answer 1

The CSS you’re trying to optimise is this:

* html #left { left:220px }

The reason you’re having problems with is it because it’s actually a CSS hack, designed to work with specific browsers.

In a standards-compliant browser, there are no elements above html in the DOM, and therefore * html is meaningless and will not select anything.

However in certain versions of IE, this did actually work. Therefore, using * html in a selector is a CSS hack for code that you only want to work in those versions of IE.

From memory, this particular hack only worked in IE6, which means that the person who wrote that code was trying to fix a problem in IE6 that didn’t appear in other browsers by hacking around it. You’ll likely find that there’s another line setting the left property to something different for other browsers.

Clearly this isn’t code that you’re going to want to be run in IE9.

If you’re lucky, you don’t need to support IE6 any more, in which case you can throw this hack away entirely.

If you’re unlucky, and you need to continue supporting IE6, then just keep the code as is. It isn’t hurting anyone.

Hope that helps.