CSS positioning issue for IE 11 Suggestion required

[tridip]

i tried lot to figure out why a position specific issue is occurring for IE 11 but still i have no luck. here i am attaching a picture then you can understand how UI is looking at IE 11.

http://i.stack.imgur.com/GrkB8.png

this below CSS i wrote but still no luck.


.arrange_collection_today
{
width: 216px;
color: #fff;
font-size: 20px;
overflow: hidden;
display: block;
text-align: left;
height: 73px;
line-height: 23px;
text-decoration: none;
padding: 6px;
float: right;
background-color: #3ab54b;
margin-right: 181px;
border-radius: 1px;
margin-top: 60px;

_margin-top:-60px; /* Only works in IE6 */
*margin-top:-60px; /* IE6, IE7 */
+margin-top:-60px;/* Only works in IE7*/
*+margin-top:-60px; /* Only works in IE7 */
margin-top:-60px\9; /* IE6, IE7, IE8, IE9 */
margin-top:-60px\0; /* IE8, IE9 */
margin-top:-60px\9\0;/*Only works in IE9*/
}

.ie10 .arrange_collection_today
{
margin-top:50px;
} /* Only works in IE10 */

*::-ms-backdrop, .arrange_collection_today
{
margin-top:50px;
} /* IE11 */

this css i applied for IE 11 but not working

*::-ms-backdrop, .arrange_collection_today
{
margin-top:50px;
} /* IE11 */

this is my web site url http://www.bba-reman.com. if possible please visit my web site with IE 11 and select country UK from the first page and hit go button then you will be redirected to a page where you notice green button not looking good. any help would be appreciated.

thanks

[molendijk]

What you have online is different from what you gave us above. On your site you have:


<style>
.arrange_collection_today
{
width: 216px;
color: #fff;
font-size: 20px;
overflow: hidden;
display: block;
text-align: left;
height: 73px;
line-height: 23px;
text-decoration: none;
padding: 6px;
float: right;
background-color: #3ab54b;
margin-right: 181px;
border-radius: 1px;
margin-top: 60px;

_margin-top:-60px; /* Only works in IE6 */
*margin-top:-60px; /* IE6, IE7 */
+margin-top:-60px;/* Only works in IE7*/
*+margin-top:-60px; /* Only works in IE7 */
margin-top:-60px\9; /* IE6, IE7, IE8, IE9 */
margin-top:-60px\0; /* IE8, IE9 */
margin-top:-60px\9\0;/*Only works in IE9*/
}

.ie10 .arrange_collection_today
{
margin-top:50px;
} /* Only works in IE10 */

*::-ms-backdrop, .arrange_collection_today
{
margin-top:50px;
} /* IE11 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .arrange_collection_today { margin-top:-60px; } }

.arrange_collection_today span
{
padding: 4px 4px 7px 10px;
display: block;
border-bottom: 3px solid white;
border-top: 3px solid white;
margin-top: 4px;
}
</style>

Get rid of the line in red.