div, border-radius, overflow, entre otros

[eguitox]

Hola a tod@s.

Llevo ya vastante tiempo sin escribir en el foro.

Me encuentro realizando un sitio web de ofertas para mi país.

http://www.cupomakers.com/

Si van al enlace podrán ver lo que llevo.

Lo que busco primero es que al pasar el ratón sobre "Arica" se despliegue el menu de categorias de ciudades (esto sirve), sin embargo al desplegarse el menú el apartado de nombre de usuario se corre hacia la izquierda y no queda debajo del menú.

En internet explorer, no puedo hacer que la barrita de categoria quede pegada a la izquierda y en el CSS correspondiente a IE aplico el siguiente código.

#SelectCiudadIE {

position:absolute;
float: right;
margin-right: 50px;
margin-top: 40px;
padding-left:10px;
width: 160px;
height:20px;
border: 1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
overflow:hidden;
background-color:#ffffff;
z-index: 2;
behaviour: url(border-radius.htc);

}

#SelectCiudadIE:hover {

position:absolute;
float: right;
margin-right: 50px;
margin-top: 40px;
padding-left:10px;
width: 160px;
height:160px;
border: 1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
overflow:hidden;
background-color:#ffffff;
z-index: 2;
behavior: url(border-radius.htc);

}

El primero es como se ve sin pasar el ratón por ensima y el siguiente es el hover.

Y por ultimo, no puedo hacer que se vean los bordes redondeados en IE.He probado incluyendo un archivo htc sin resultados, pero si no mal recurdo hay un tag que se incluye en el head que soluciona el problema pero no recuedo cual es.

Si alguien me pudiese ayudar con estos detalles por favor.

Este tema puede quedar abirto para futuras consultas sobre mi sitio en desarrollo.

[martinmiranda90]

Hola eguitox, espero poder ayudarte. El problema de tua menu es el position,para que no se muevan el resto de elementos debes decirle al div en cuestión (en este caso el menu desplegable) que su posición sea "absolute" para que no hago caso al resto de elementos y puedas posicionarlo como tu desees. Luego solo sería cuestion de moverlo a tu gusto.
En el caso de border-radius, IE explorer no se lleva muy bien con el y no lo soporta en ninguna de sus versiones. Para ello tendrías que meterte con alguna libreria tipo Modernizr, aqui te dejo el link por si te interesa: http://modernizr.com/.
Te pongo tamién una página por si no la conoces que se llama "Caniuse", ahí puedes mirar las distintas características de css y sus correspondientes compatibilidades con los diferentes navegadores: http://caniuse.com/

Un saludo y espero haberte sido de ayuda

Edito: Me he fijado que en la etiqueta SelectedCiudadesIE(me imagino que sera para las de internet explorer), si tienes puesto position:absolute pero en la que utilizan los demás navegadores no, por eso en firefox o chrome te desplaza el menu.

[eguitox]

Muchas gracias.

Pero en un principio en IE el menu me desplazaba toda la barra de navegación hacia abajo, luego de añadir esta linea al header se soluciono, pero si pruebas mi pagina el menu no queda totalmente a la derecha aunque incluya un float.

esto es lo que añadi al head:
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->

El problema con el position:absolute me da problemas en la optimización de pantalla, como fijar un entorno de 1024px de ancho en el centro de una pantalla que no se su tamaño?

[martinmiranda90]

El menú te refieres al desplegable?. Quieres que esté pegado al borde del layout principal?. Un saludo

[gabrielaroo]

Prueba con estas lineas:

position: absolute;
float: right;
right: 160px; (depende del screen)

El inconveniente con la posición es que float y right tomara como referencia el tamaño del monitor, ahi tendria que trabajar la parte responsive. Espero te sirva de algo.