CSS newbie question IE vs. Chrome

Question

I have a stylesheet that contains 10 selector definitions. When I view my website in IE and Chrome (I'm not including FF because it renders exactly like the way it does in Chrome), nine of the ten selector definitions work consistently across all browsers.

The one that doesn't work is defined as such:

a.dp-choose-date 
{
    /* border: 1px solid red; */
    float: right;
    width: 25px;
    height: 25px;
    padding-top: 5px;
    padding-left: 16px;
    position: relative;                  /* This is only needed for IE */
    top: -25px;                          /* This is only needed for IE */
    margin: 0px;
    display: block;
    text-indent: -2000px;
    overflow: hidden;
    background: url(../images/calendar3.png) no-repeat; 
}

As you can see, there are only two values that are necessary for IE. So I did some research on conditional CSS. I have now taken my style sheet and create a duplicate with the two additional entries for IE.

At the top of my document, I now have the following:

<!--[if IE]>
<link href="Styles/custom.css" rel="stylesheet" type="text/css" />
<![endif]-->

<![if !IE]>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<![endif]>

which is working, but can't I do the conditional statement at the selector level?

I also tried this in the CSS document which also didn't work.

[if IE] a.dp-choose-date {
    /* definitions here */
}

Does anyone have any suggestions?

Answer 1

One way to do this is:

<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="Styles/custom.css" rel="stylesheet" type="text/css" /> 

Notice than I do not have a conditional around the first style sheet.

Within the second style sheet just define the tag as:

a.dp-choose-date   {
    position: relative; /* This is only needed for IE */
    top: -25px;   /* This is only needed for IE */
}

Due to the way style sheets work, the browser will combine and apply both definitions.