Search jQuery

jQuery Forum

Issue with Accordian Slider + alpha opacity not displaying properly in IE8

in Getting Started • 7 years ago

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>

Response title

Attachments

jQuery Forum

Issue with Accordian Slider + alpha opacity not displaying properly in IE8

Statistics

Tags

Actions