CSS Hack: Hide from IE

As I have been designing small-based, bear-minimum CSS design layouts I have just coded and been done with it. The past six months have been a learning experience and have come to love CSS for what it’s worth. Sometimes, though, designing gets hedious and I have to use hacks; for today, we aim one at Internet Explorer. Please note: This is yet another older piece of writing of mine. As it still probably holds value, I do try to stay away from CSS hacks, but sometimes, they really do come in handy.

There is one hack that I seem to come across more than I really should, but apparently it is one of the most important hacks of today, or should I say, of Internet Explorer? When designing the new layout for Dev-News, I had to use this once. What happened was, Internet Explorer wasn’t spacing bulleted items like ALL the other broswers were; even Opera.

To send different CSS rules to Internet Explorer, I had to use the child selector command, in which Internet Explorer can’t understand (figures). The child selector command involves two elements, one is the parent, and the other the child to the parent. So, the following refers to the child, body, contained within the parent, html:

CSS

html>body

Now let’s take a practical example from Dev-News (now, non-existant website):

CSS

#info ul li a {
           display:block;
           width:175px;
           background:url('path_to_image.gif') no-repeat left top;
           padding:0px 0 0 15px;
           margin-top:-5px;
           color:#fff;
}

html>body #info li a { margin-top:2px; }

Internet Explorer can’t understand the second CSS rule, due to the hack, so it will ignore it and use the first rule and all other browsers will use the second rule. This has really helped me out with designing a layout. I used to pull my hair out and just let it be. Now that I design compliant websites, I have no room for anything less than perfect - so to speak.

Enjoy, and have fun with your CSS.