Jscrollpane causese text to disappear on internet explorer

Posted by Crippletoe on Stack Overflow See other posts from Stack Overflow or by Crippletoe
Published on 2010-12-29T14:49:54Z Indexed on 2010/12/29 14:54 UTC
Read the original article Hit count: 233

Hello all, 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; 
}

thank you all so much.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about internet-explorer