problemas con direction: rtl en Google chrome

XtremeBook · #1 (**permalink**) 11/10/2011, 13:50

bueno amigos tengo problemas para direccionar un menu desplegable, que en vez de desplegarse a la derecha se despliegue a la izquierda, he logrado efectuar el cambio con exito en

Firefox
Internet Explorer
Opera

pero el que menos me imaginé Google Chrome se me puso rebelde y no me lee el direction:rtl; (Right to Left) en css ni en el div directo con la propiedad dir.

A ver si pueden ayudarme se los agradecería mucho amigos.

muchas gracias!

RafaRG · #2 (**permalink**) 11/10/2011, 16:19

si pusieses el código sería más fácil analizarlo y ayudarte. de todas formas puedes porbar a poner justo debajo de direction:rtl; (Right to Left) otro comando parecido, pero añadiéndole el prefijo -webkit-. osea, que quedaría así:
direction:rtl; (Right to Left)
-webkit-direction:rtl; (Right to Left)
espero que eso solucione tu problema. si no es así, te invito a que compartas el código.
un saludo

XtremeBook · #3 (**permalink**) 11/10/2011, 18:03

no amigo no funciona aqui te dejo el codigo lo que quiero es que el menu se desplegue hacia la izquierda en Google chrome en el resto de los navegadores funciona OPERA, INTERNET EXPLORER, FIREFOX

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
 
#top-bar-bg{
        position: absolute;
        margin-top: -8px;
        margin-left: -8px;
        margin-right: -13px;
        background-color:#96CE42;
        height: 40px;
        width: 100%;
        box-shadow: 2px 2px 5px #999;       
}
 
#top-bar-log{
        float:left;
        position: absolute;
        margin-top: 0px;
        margin-left:20px;
        padding-right:17px;
        background-image:url(../../images/top-bar/log-top-bar.png);
        background-repeat:no-repeat;
        width: 158px;
        height: 40px;   
}
 
#top-bar-log:hover{
        background-color:#AAEA71;
        
}
 
#top-bar-menu{
        position: relative;
        float:right;
        margin-top: 0px;
        margin-right:20px;
        width: 700px;
        height: 40px;           
}
 
 
#down-arrow{
        position: relative;
        float:right;
        margin-top: 8px;
        margin-right:-10px;
        width:7px;
        height:4px;
        background-image:url(../../images/top-bar/down-arrow.gif);
}
 
 
#down-arrow-log{
        position: relative;
        float:right;
        margin-top: 13px;
        margin-right:-17px;
        width:13px;
        height:13px;
        background-image:url(../../images/top-bar/down-arrow-log.gif);
}
 
#menu-wrapper ul{
        
        padding:0;
        list-style:none;    
        margin-top:0px;
        float:right;
        overflow:auto;
        direction:rtl;      
}
 
#hmenu > li{
        display:inline-block;
        font-family:Myriad pro,Verdana, Geneva, sans-serif;
        text-align:center;
        height:40px;    
        padding-left:5px;
        padding-right:5px;
        margin-right:5px;
        cursor:pointer;
}
 
#hmenu > li:hover{
        background-color:#AAEA71;   
    }
    
#hmenu > li:active{
        background-color:#AAEA71;   
    
    }
    
    #hmenu > li:focus{
        background-color:#AAEA71;   
    
    }
 
 
#hmenu > li > a{
        display:block;  
        padding: 10px 5px;
        padding-left:5px;
        padding-right:5px;
        width: auto;
        text-decoration:none;
        color:#FFF;
        font-size:15px;
        direction:ltr;
}
 
li ul{
        position:absolute;
        display:none;       
}
 
.sub-menu a{
        display:block;
        visibility:visible;
        padding:10px 5px;
        width:130px;
        color:#FFF;
        text-decoration:none;
        text-align:right;
        padding-left:10px;
        font-size:15px;
        direction:ltr;
        margin-right:0px;       
}
 
.sub-menu{
 
        margin-right:-5px;          
}
 
.sub-menu a:hover{
    
        background-color:#96CE42;   
}
 
#menu-wrapper li ul{
        background-color:#AAEA71;
        
                        
}
 
#menu-wrapper ul li:focus ul, #menu-wrapper ul li:active ul  {
        background-color:#AAEA71;
        display: block;                 
}

Código HTML:

Ver original<div id="top-bar-menu">
 
    <div id="menu-wrapper">
 
        <ul id="hmenu">
 
          <li tabindex="1"><a>Inicia&nbsp;Sesión
          <div id="down-arrow">
             </div>
          </a>
          
                <ul class="sub-menu">
            
                    <li><a href="#">prueba!</a></li>
                    <li><a href="#">probandito</a></li>
                    
                    </ul>
                </li>
        
          <li tabindex="2"><a>¡Regístrate!
          <div id="down-arrow">
             </div>
          </a>
             
             
                <ul class="sub-menu">
            
                    <li><a href="#">prueba!</a></li>
                    <li><a href="#">probandito</a></li>
                    
                    </ul>
                </li>
                
                
                <li><a>Videotutoriales</a></li>
        
                <li><a>Artículos</a></li>
        
                <li><a>Noticias </a></li>
        
                <li><a>Inicio </a></li>
</ul>
</div>

RafaRG · #4 (**permalink**) 12/10/2011, 07:10

he probado el código en gc y me sale de la siguiente forma:

(he tenido que cambiar el fondo porque no se veía bien)
entonces, yo veo que el menú verde se alinea a la derecha de su opción. si lo he entendido bien, ¿lo que quieres es alinearlo a la izquierda de dicha opción?
ayudaría también que pusieses una captura de cómo quieres que sea el resultado final.

PD: en ie8 no me funciona...

XtremeBook · #5 (**permalink**) 12/10/2011, 19:28

a mi no se me ve asi en el google chrome Que extraño. a mi se me ve asi:
PD1: lo probe en otra PC ademas de la mia con google chrome y se me ve tambien mal como muestro aqui, y quiero que se vea como a ti se te ve o como muestro abajo en la imagen de Internet explorer

y deberia de verse como la de abajo:

y en internet explorer se me ve perfectamente al igual que firefox y opera se ve como lo quiero.

PD2: amigo yo lo pruebo en ie8 y si me va la imagen es decir se ve bien aqui esta la prueba:

No entiendo po rque a ti si se te ve bien en Google Chrome :S
saludos

RafaRG · #6 (**permalink**) 13/10/2011, 06:26

pues la verdad es que es extraño... quizá el problema sea el direction:rtl;. pero no tiene sentido que a mí me funcione y a ti no (al menos en el gc). no sé si tendrá algo que ver, pero comprueba la configuración del navegador para que permita "cosas especiales" en la página. comprueba también la versión, ya que un navegador desactualizado puede dar este tipo de problemas.
como último recurso, yo cambiaría el código de la siguiente forma:
·en primer lugar, pon todos los div con un id, en vez de con un class. obviamente, tendrás que asociarle a cada div un css diferente. te cuento esto porque hace tiempo estaba haciendo una página y en un navegador no me funcionaba un efecto hover que tenía asociado al css con un class. pero cuando lo cambié al id, me iba perfecto. puede que parezca una tontería, pero me solucionó el problema. por ejemplo, si tienes:

Código PHP:

  <style type="text/css"> 
.menú { 
   propiedad-1:X; 
   propiedad-2:X; 
   propiedad-3:X; 
   } 
</style> 
<div class="menú">1</div> 
<div class="menú">2</div> 
<div class="menú">3</div> 
<div class="menú">4</div>

deberías poner:

Código PHP:

  <style type="text/css"> 
#menú1 { 
   propiedad-1:X; 
   propiedad-2:X; 
   propiedad-3:X; 
   } 
#menú2 { 
   propiedad-1:X; 
   propiedad-2:X; 
   propiedad-3:X; 
   } 
#menú3 { 
   propiedad-1:X; 
   propiedad-2:X; 
   propiedad-3:X; 
   } 
#menú4 { 
   propiedad-1:X; 
   propiedad-2:X; 
   propiedad-3:X; 
   } 
</style> 
<div id="menú1">1</div> 
<div id="menú2">2</div> 
<div id="menú3">3</div> 
<div id="menú4">4</div>

·si ése no es el problema, prueba a posicionar el submenú con unas coordenadas, en vez de especificar hacia qué lado mostrarse.

kseso? · #7 (**permalink**) 13/10/2011, 07:36

Hay quien tiene algún error de concepto y confunde la finalidad de alguna propiedad (qué hace y sobre qué elementos actúa).

Cita:

Direction:
Esta propiedad especifica la dirección básica de escritura de los bloques y la dirección de las incrustaciones y sustituciones (ver 'unicode-bidi') para el algoritmo bidireccional de Unicode. Además, especifica la dirección de la composición de las columnas en una tabla, la dirección del desbordamiento horizontal y la posición de una última línea incompleta de un bloque en el caso de 'text-align: justify'.

La propiedad que está buscando es /position/ complementada con /left-right/ y sus valores oportunos.
Quizás también con la alineación del texto.

Pero no es la dirección de la escritura (de derecha a izquierda o de izquierda a derecha).

Más información al respecto:
http://www.sidar.org/recur/desdi/tra...pdef-direction

IsaBelM · #8 (**permalink**) 13/10/2011, 07:42

y qué tiene que ver la propiedad direction con todo esto?? no sería usar position??