From what I see by reviewing the DOM of the page whose link provided in the question, your problem is in CSS styles for the elements within each li of your slider .
Here's a list of changes to "normalize" the way you're manipulating elements so that across browsers you can achieve the same look:
The element that surrounds the content
In the div element that surrounds the content, in addition to defining the width and height of the content, you must indicate that the elements within it are all relative to it:
.slide {
height: 541px;
width: 912px;
position: relative;
}
The elements that divide the presentation
You have two div elements that try to arrange the text to the left side and the image to the right side. These elements must be occupying a certain space effectively without allowing mixtures between them:
/* Definições para ambas as DIV (nova declaração) */
.bxslider li .slide > div {
position:absolute;
top:80px;
bottom:40px;
}
/* Definições para a DIV do texto */
.slide_txt {
left: 60px;
color: #FFF;
font-family: Helvetica-nw;
font-size: 16px;
text-align: left;
width: 320px;
}
/* Definições para a DIV da imagem */
.slide_img {
right: 50px;
width: 460px;
}
This way you have the elements in an absolute position relative to their wrapper element that is div with the CSS class slide .
The image
Your image should be within the element that surrounds it in a controlled way, particularly due to IE8:
.slide_img img {
position: relative; /* relative e não absolute */
top: 25%;
width:100%;
}
Slider Background / Frame Color
Your borders are blank in Internet Explorer 8 because it does not recognize any declarations made and ends up applying:
background: none transparent scroll repeat 0% 0%
Where you are:
#slider {
background: #1d1d1d;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFkMWQxZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjMjIyMjIyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFlMWUxZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #1d1d1d 0%, #222222 6%, #1e1e1e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d1d1d), color-stop(6%,#222222), color-stop(100%,#1e1e1e));
background: -webkit-linear-gradient(top, #1d1d1d 0%,#222222 6%,#1e1e1e 100%);
background: -o-linear-gradient(top, #1d1d1d 0%,#222222 6%,#1e1e1e 100%);
background: -ms-linear-gradient(top, #1d1d1d 0%,#222222 6%,#1e1e1e 100%);
background: linear-gradient(to bottom, #1d1d1d 0%,#222222 6%,#1e1e1e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1d1d', endColorstr='#1e1e1e',GradientType=0 );
}
You should be:
#slider {
background-color: #1d1d1d;
}
All the effects are imperceptible given the little space to present them and if they want compatibility and coherence with old browsers, it assigns a background color and gives the subject a neat look.
Result
As you can verify by the screen capture below, if you make the changes I indicated by removing the styles I did not mention and applying the ones that are mentioned in this response in each one of the indicated elements, you get the subject resolved for the Internet Explorer 8!
Note: Image in the actual size, right click on it and choose to open it in order to view it in conditions. p>
Note Navigation arrows
The navigation arrows are exactly 30 pixels apart from other browsers.
If after the changes the only thing that is out of place is the arrows, let me know that this is also possible.
