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