Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Problem in converting the default skin to RTL
 
Farhad Sakhaei
Jr. Member
 
Total Posts:  2
Joined:  2008-05-26
 

Hi to all Magento members ,

I am working on Magento RTL skin ,
I changed the \skin\frontend\default\default\css\menu.css to compatible the menu system for RTL (Right to Left) direction :

Here is my modified CSS file , It is working under FireFox properly , But under IE , the menu isn’t displaying

#nav { padding:0 20px; font-size:1.1em; z-index:999; } /******/

/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
#nav li {
    list-style:none;
    
position:relative;
    
text-align:right;
    
/******/
#nav li.over { z-index:99; } /******/
#nav li.active { z-index:98; } /* to prevent the li separator from showing through on mouseover on li */ /******/
#nav a { line-height:1.3em; } /******/
#nav a, #nav a:hover { display:block; text-decoration:none; } /******/
#nav span { display:block; cursor:pointer; white-space:nowrap; } /******/
#nav li ul span {white-space:normal; } /******/

/************ 1ST LEVEL  ***************/
#nav li { float:right; } /******/
#nav li.active a { color:#d96708; } /******/
#nav a { float:right; padding:5px 8px 6px 12px; color:#A7C6DD; font-weight:bold; } /******/
#nav li.over a, #nav a:hover { color:#d96708; } /******/


/************ 1ST LEVEL RESET ************/
#nav ul li, #nav ul li.active {
    
float:none;
    
margin:0;
    
padding-bottom:1px;
    
background:#ecf3f6 url(../images/nav_divider.gif) repeat-x 100% 100%;
    
/******/
#nav ul li.over {background:#d5e4eb url(../images/nav_divider.gif) repeat-x 100% 100%;} /******/
#nav ul li.last { background:#ecf3f6; padding-bottom:0; } /******/

    
#nav ul a, #nav ul a:hover {
    
float:none;
    
padding:0;
    
background:none;
    
/******/
#nav ul li a { font-weight:normal !important; } /******/


/************ 2ND LEVEL ************/
#nav ul {
    
positionabsolute;
    
width:15em;
    
top:25px;
    
right:-10000px;
  
border:1px solid #899ba5;
/******/

/* Show menu */
#nav li.over > ul { right:0; } /******/
#nav li.over > ul li.over > ul { right:100px; } /******/
#nav li.over ul ul { right:-10000px; } /******/


#nav ul li a { background:#ecf3f6; } /******/
#nav ul li a:hover { background:#d5e4eb; } /******/
#nav ul li a, #nav ul li a:hover { color:#2f2f2f !important; } /******/
#nav ul span, #nav ul li.last li span { padding:3px 15px 4px 15px;} /******/


/************ 3RD+ LEVEL ************/
#nav ul ul { top:5px; } /******/

Please help me to solve this problem smile
I attached the screenshot from IE & FireFox ...

Image Attachments
screenshot.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top