Hi,
I am using the Accordian_Slider for expandable/collapsible panels for FAQ's on our website. The problem is the text is appearing a bit pixialiated in IE8, especially when it uses the <strong> attribute. It's fine in Chrome and fire fox.
Here is what it looks like:
I want it to look like this:
This is the function that animates the banner state change that seems to be affecting it. When I remove it the text looks good but I loose the functionality of the expandable and collapsable panel.
-
function stepBanner(c,f)
{
//Function to animate the banner state change
var h = c.offsetHeight;
var m = c.mh;
var d = (f==1) ? m-h : h;
if (currentBanner.id =='banner1') finalddheight = dd1height;
else if (currentBanner.id =='banner2') finalddheight = dd2height;
else if (currentBanner.id =='banner3') finalddheight = dd3height;
else if (currentBanner.id =='banner4') finalddheight = dd4height;
else if (currentBanner.id =='banner5') finalddheight = dd5height;
else if (currentBanner.id =='banner6') finalddheight = dd6height;
if((finalddheight==0 || f!=1) && banner_counter==0)
{
state1 = 1;
c.style.height= (h+(Math.ceil(d/5)*f)) +'px';
c.style.opacity=h/m;
c.style.filter='alpha(opacity='+h*100/m+')';
if (h==m || ((m-h)==m) )
{
state1 = 0; //animation is done
state2 = 0;
}
}
When I insepct element in IE8 it's shwoing this inline attribute:
Here is the css I am using:
- <style type="text/css">
#accordian {
BORDER-BOTTOM: #333 0px solid;
BORDER-LEFT: #333 0px solid;
BORDER-TOP: medium none;
BORDER-RIGHT: #333 0px solid;
}
.accordian {
WIDTH: auto;
font:12px Arial, Helvetica;
}
.accordian DT {
BACKGROUND-IMAGE: url(/common/pages/UserFile.aspx?fileId=106288);
TEXT-ALIGN: left;
PADDING-BOTTOM: 10px;
PADDING-LEFT: 10px;
WIDTH: auto;
PADDING-RIGHT: 10px;
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: 98% 50%;
VERTICAL-ALIGN: middle;
BORDER-TOP: #ffffff 10px solid;
CURSOR: pointer;
FONT-WEIGHT: bold;
PADDING-TOP: 10px;
line-height: normal;
}
.accordian DT:hover {
BACKGROUND-COLOR: #558f26;
}
.accordian .open {
BACKGROUND-IMAGE: url(/common/pages/UserFile.aspx?fileId=106284);
}
.accordian DD {
MARGIN-LEFT: 0px;
OVERFLOW: hidden;
}
.c {
TEXT-ALIGN: left;
WIDTH: auto;
MARGIN-LEFT: 10px;
PADDING-TOP: 10px;
PADDING-BOTTOM: 20px;
}
#banner1 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner2 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner3 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner4 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner5 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner6 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner7 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner8 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner9 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner9 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner10 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner10 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner11 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
#banner12 {
BACKGROUND-COLOR: #e6e6e6;
COLOR: rgb(0,102,153);
}
.squarebox {
TEXT-ALIGN: left;
WIDTH: 98%;
MARGIN-LEFT: 10px;
OVERFLOW: hidden;
MARGIN-RIGHT: 10px;
}
.squareboxcaption {
PADDING-BOTTOM: 8px;
MARGIN-TOP: 10px;
PADDING-LEFT: 8px;
PADDING-RIGHT: 8px;
BACKGROUND: #e6e6e6;
COLOR: rgb(0,102,153);
FONT-WEIGHT: bold;
PADDING-TOP: 8px;
}
.squareboxcontent {
PADDING-BOTTOM: 10px;
MARGIN-LEFT: 10px;
OVERFLOW: hidden;
}
</style>
Would anyone know how to adjsut the .js so it displayes correctly in IE8 without loosing the accordian feature? If you require more information, please let me know. PLEASE HELP!!