Search code examples
jqueryinternet-explorerjscrollpaneright-to-left

Jscrollpane causese text to disappear on internet explorer

in my current site, i am using the new Jscrollpane in order to generate a scrollbar for a menu (not my descision but the designer's descision so i dont wanna get into how 90's that all looks like..).

my menu is based on a <UL> the <li> elements inside it have the attribute "text-align: right;".

my problem that on IE alone the menu text doesnt show when i apply the ScrollPane to the menu. when i delete the ScrollPane function from my code- the menu re-appears.

i checked the page with "microsoft Expression" DOM inspector in order to examine how IE sees my code and i can see the <li> elements there, only the text inside them is missing. when i disable the "text-align: right;" for the <li> in my CSS, the text shows again. i suspect this has something to do with the jScrollPane's containing which is relatively aligned but i cannot be sure..

can anyone suggest some fix for this problem?

a link to a page where you can see the problem is here: http://kaplanoland.com/index.php?option=com_content&view=article&id=2&Itemid=12

the problematic menu is on the right side of the page. on every browser but IE you can see the text. only on IE not. my CSS code for that menu (not including the jScrollPane CSS) is here: 

   div#menu2{
 position: absolute;
 top: 123px;
 right: 36px;
 width: 330px; 
 height: 150px; 
 }

div#menu2_scroll{ /*the actual scroller*/
 height: 150px; 
 }

div#menu2 div#menu2_contain{

}

div#menu2 li{
 text-align: right;
 }

div#menu2 li span{
 line-height: 18px;
}

div#menu2 a:link, 
div#menu2 a:visited{
 color: #808285 ;
 font-family: Arial, Helvetica, sans-serif ;
 font-size: 12px ;
}

div#menu2 a:hover, 
div#menu2 li#current a{
 color: #000000 ;
 font-family: Arial, Helvetica, sans-serif ;
 font-size: 12px ;
}

div#menu2 span.separator{
 display: block;
 padding-top: 12px;
 padding-bottom: 40px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #000000; 
}

div#menu2 span.separator span {
 padding-top: 12px;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #808285; 
}
Solution

  • Add .jspPane{left:0;}

    IE don't like when you're not setting left (and top) value while using position:absolute;

    Cheers

    G.