CSS Hacks with the Child Selector

Posted November 9, 2005

Rothe Blog CSS Logo
I am sure that this comes as a real shocker to most of you, but CSS isn’t supported consistently across browsers. Wow. Ok. Now that we got that out and on the table.

When I say browsers, usually the clients I deal with don’t have a strong need to do in depth testing for multiple browsers versions as well as many different browsers. I am able to get a good portion of the primary visiting audience by testing for Internet Explorer 6 and Mozilla Firefox (any version).

Lately I have been testing more with IE 5 and Safari, mainly because I am getting a lot better at laying out complex pages in CSS in a concise manner, with reusable and portable little sections of code, and because I just got that Mac in the last couple of months. But I do run into some things pretty consistently with IE 5, and I wanted to share one of them with you tonight.

Child Selector Hack - html>body vs. class > class

There are many “hacks” in CSS which are floating around the internet. Hack is a little more vulgar of a term then the actual code you are writing. What you are actually doing most of the time is exploiting a bug or a way the browser parses certain types and orders of code to make the browser render things the way you need.

Child Selectors are something that are written into the CSS 2.1 spec. Eric Meyer, a guru on CSS, has a write up on Child Selectors at his website for more information

If you are doing complex CSS layout, you will quickly find great use for targeting specific instances of selector when they occur in your document. The Child Selector is properly supported by Mozilla Firefox because of their painstaking attention to following the standards, but Internet Explorer does not.

What this means, is that you can write a rule specifically for Firefox, and IE will completely ignore it. There are many times where I find that IE and Firefox render pixels in margin and padding differently. Usually the margin that they are rendered differently is somewhere between 4-10 pixels. Now, if you are a true expert that lives and breathes CSS, there is probably a true explanation for this. I haven’t researched that much into it yet, so as of now I don’t know that that is.

Many times I will have something positioned using margins that are relative to each other. For example, let’s say I want a two column layout inside of my main .wrapper. Here is how I would write those styles;

.leftCol{

float:left;

margin:0 0 0 20px;

width:200px;

}

.rightCol{

float:left;

margin:0 0 0 10px;

width:400px;

}

Now, a lot of time I will need all of that real estate, and totaled up here it equals 600px. So my calculations can mess up when it is off by just a couple of pixels, the floats can shift the blocks down, all sorts of fun stuff.

So, when I have my .leftCol being rendered with a margin on the left of 20px in Firefox, but in Internet Explorer it is rendered with more like a margin of 30px on the left, that is a problem. In step child selectors

For the above rule, this is what I would write instead to fix this problem. Since it is 10px more in IE, I will subtract that from my first rule;

.leftCol{

float:left;

margin:0 0 0 10px;

width:200px;

}

Now, this targets IE. But for Firefox, I want it to be 20px, so I would write this rule specifically for that browser;

html>body .leftCol{

float:left;

margin:0 0 0 20px;

width:200px;

}

What this is saying, is that when the body directly follows the html element in a document, apply the .leftCol rule.

Now, I thought this was a weird format, html>body .class. It seemed unnecessary, when I could just write a child selector rule that would work when two classes were right by each other. In this case, let’s say that the .leftCol style is right inside the main .wrapper, which we didn’t define here, but would normally. I used to write the above rule like this;

.wrapper > .leftCol{

float:left;

margin:0 0 0 20px;

width:200px;

}

But as I found out the other day, Internet Explorer 5 doesn’t seem to like this. It will actually not ignore the rule, instead read it. But it does understand that it just needs to skip over the html>body version. Now, I read online the other night that spaces make a difference. So, you have to write html>body and not html > body. So I don’t know if the spaces mattered in my above example or not, but I have started to write html>body to make sure that I cover my bases for both Internet Explorer 5 and 6.

Hope this write up was helpful. I am always looking to expand my knowledge base, just time is limited. If you have answers for any of my thoughts above, please, comment and correct me. Let me know how Margin and Padding get calculated differently, or why two .class Child Selectors together doesn’t render right in Internet Explorer 5.