This IE and IE6 hack with only CSS?

Question

<!--[if IE]>
    <style type="text/css">
        #botonHome .contButton p a span{ height:25px; }
        #botonHome .contButton p a span input{ position: relative; bottom:5px; }
    </style>
<![endif]-->

<!--[if IE 6]>
    <style type="text/css">
        #botonHome .contButton p a span input{ display: inline; margin:0px; padding:0px; bottom:0px; height:20px; }                                       
    </style>
<![endif]-->

Finally I was able to display properly a button in all browsers, but I would like not to use this inline code in my html file. How can I solve this different CSS implementations for IE using only CSS.

Answer 1

These conditional comments are very handy for IE workarounds. I would use them, but not to include the style element, but to include a css file instead. That way, you don't have to add the entire style to each page, and you are able to add other tweaks more easily.

Answer 2

to trick IE6 just put "_" before any property, for example

   #botonHome .contButton p a span input{  _display: inline; _margin:0px; _padding:0px; _bottom:0px; _height:20px; }

UPDATE:

follow this link for css IE hacks

Answer 3

For IE 6 use _ underscore symbol before each style, for IE 7 Use * star symbol before each style and for IE8 & IE9 use \0/ before closing the style with; semicolon symbol. See below for the code.

#botonHome .contButton p a span input {  

    /*For IE 6*/
    _display: inline; 
    _margin:0px; 
    _padding:0px; 
    _bottom:0px; 
    _height:20px;

     /*For IE 7*/

    *display: inline; 
    *margin:0px; 
    *padding:0px; 
    *bottom:0px; 
    *height:20px; 

    /*For IE 8 & 9*/

    display: inline\0/; 
    margin:0px\0/; 
    padding:0px\0/; 
    bottom:0px\0/; 
    height:20px\0/;
 }