mimi mimi - 4 months ago 7
CSS Question

right property doesn't work in ie

one part of my website looks bad in IE, I just search here and other website like css trikes or github and try to using css hacks for IE, but css hacks doesn't work for my problem.
here is my website

you can see arrow problem in screenshot which I took, if you open website in chrome or firefox this part works well,

enter image description here

here is my CSS codes for this part

div.rightpanel ol.rlists li.active div div {
background-color : #f8f8f8 !important;

}
div.rightpanel ol.rlists li.active a:before{
display : block;
content : '';
background-image : url('../images/summary-box-arrows.png');
background-repeat: no-repeat;
width : 15px;
height : 49px;
z-index : 50;
left : -12px;
position :absolute;
}
/*----------------------------------position for firefox : firefox hack------------------------------------*/
@-moz-document url-prefix() {
div.rightpanel ol.rlists li.active a:before {
left :0px;
top : 15px;
right : 200px;
}
}
/*----------------------------------position for IE : internet explorer hack------------------------------------*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
div.rightpanel ol.rlists li.active a:before{
left :0px;
top : 15px;
right : 200px;
}

}

ol.rlists li.active a.ralist1:before{
background-position: 0 0;
}


here is my HTML codes for this part

<div class="best row">
<div class="title-pack col-md-12">
<span class=" pull-left line visible-sm-block"></span>
<span class="pull-left visible-sm-block tittle-style">ترین ها</span>
<span class=" pull-right line visible-sm-block"></span>
</div>
<div class="best-box col-md-12">




<div class="pull-right mh250 rightpanel">
<ol class="cover pull-right mr1 rlists">
<li onclick=" document.getElementById('train').style.top = '0px'; " class="rlist1 active">
<a class="ralist1">
<div class="ritem1">
<span class="bullet"></span>
<div class="rlist1ltem1">
<h4 class="item1text">تازه ترین ها</h4>
</div>
</div>
</a>
</li>
<li onclick=" document.getElementById('train').style.top = (624 * -1) + 'px' ; " class="rlist1">
<a class="ralist1">
<div class="ritem1">
<span class="bullet"></span>
<div class="rlist1ltem1">
<h4 class="item1text">پرفروش ترین ها</h4>
</div>

</div>
</a>
</li>
<li onclick=" document.getElementById('train').style.top = (1309 * -1) + 'px' ; " class="rlist1">
<a class="ralist1">
<div class="ritem1">
<span class="bullet"></span>
<div class="rlist1ltem1">
<h4 class="item1text">محبوب ترین ها</h4>
</div>

</div>
</a>
</li>

</ol>
</div>
<div class="pull-right overhid lcontent">
<div class="">
<section class="overhide rel slideshow">
<ul class="abs train" id="train" style="top: 0px;">
<li class="cover col-md-12">
<div class="col-md-12">
<div class="content-best">
<div class="img1">
<h4>پاییز فصل آخر سال است</h4>
<p>1300 تومان</p>
</div>
<div class="img2">
<h4>سرخ و سفید</h4>
<p>1000 تومان</p>

</div>
<div class="img3">
<h4>تراژدی تنهایی</h4>
<p>1700 تومان</p>
</div>
</div>
<div class="content-best">
<div class="img4">
<h4>نبودنت</h4>
<p>1300 تومان</p>
</div>
<div class="img5">
<h4>شوری در سر</h4>
<p>1000 تومان</p>

</div>
<div class="img6">
<h4>پاییز فصل آخر سال است</h4>
<p>1300 تومان</p>
</div>
</div>
</div>
</li>
<li class="cover col-md-12">
<div class="col-md-12">
<div class="content-best">
<div class="img1">
<h4>پاییز فصل آخر سال است</h4>
<p>1300 تومان</p>
</div>
<div class="img2">
<h4>سرخ و سفید</h4>
<p>1000 تومان</p>

</div>
<div class="img3">
<h4>تراژدی تنهایی</h4>
<p>1700 تومان</p>
</div>
</div>
<div class="content-best">
<div class="img4">
<h4>نبودنت</h4>
<p>1300 تومان</p>
</div>
<div class="img5">
<h4>شوری در سر</h4>
<p>1000 تومان</p>

</div>
<div class="img6">
<h4>پاییز فصل آخر سال است</h4>
<p>1300 تومان</p>
</div>
</div>

</li>
<li class="cover col-md-12">
<div class="col-md-12">
<div class="content-best">
<div class="img1">
<h4>پاییز فصل آخر سال است</h4>
<p>1300 تومان</p>
</div>
<div class="img2">
<h4>سرخ و سفید</h4>
<p>1000 تومان</p>

</div>
<div class="img3">
<h4>تراژدی تنهایی</h4>
<p>1700 تومان</p>
</div>
</div>
<div class="content-best">
<div class="img4">
<h4>نبودنت</h4>
<p>1300 تومان</p>
</div>
<div class="img5">
<h4>شوری در سر</h4>
<p>1000 تومان</p>

</div>
<div class="img6">
<h4>پاییز فصل آخر سال است</h4>
<p>1300 تومان</p>
</div>
</div>
</div>


</li>

</ul>
</section>
</div>
</div>





</div>
<div style="clear:both;"></div>
</div>

</div>


can any one help me for this problem?

Answer

Can you try the below fixes,

Add display: block; in the rule -

div.rightpanel ol.rlists li a {
  text-decoration: none;
  position: relative;
    display: block;
}

Also I think you can avoid the below rule in '---internet explorer hack---'-

div.rightpanel ol.rlists li.active a:before{
    left                :0px;
    top                 : 15px;
    right               : 200px;
}

Which version of IE are you using ?

Comments