css - IE8 position bug

Question

All browsers works fine, except IE8. I have a slide, you can check out here: Left/Right arrow problem with position.

The code is this one:

#prev {
    background: url(img/set-esq.png);
    width: 62px;
    height: 117px;
    position: absolute;
    bottom: 50px;
    left: 150px;
    z-index: 2;
}
#next {
    background: url(img/set-dir.png);
    width: 62px;
    height: 117px;
    position: absolute;
    bottom: 50px;
    z-index: 2;
    right: 150px;
}

Works fine with all browsers, except with IE8. The arrow "glues" with the slide margin. I don't know how can I solve this problem anymore.

Can you guys give me a hint or a solution?

Answer 1

Yeah, It's working in all browsers except in IE8. But note to your .slide selector to give position: relative; and then only position your arrow with absolute position, this time you need to change the top, right, bottom or left value of absolutely positioned elements.

Answer 2

give it a try
put the a tags in the div with class=caroufredsel_wrapper
i put it before the ul
and then use this style

#prev {
background: url(img/set-esq.png);
width: 62px;
height: 117px;
position: absolute;
top: 191px;
z-index: 2;
}
#next {
background: url(img/set-dir.png);
width: 62px;
height: 117px;
position: absolute;
top: 191px;
right: 0px;
z-index: 2;
}