Página 1 de 11
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Problema de optimizacion de menu (problema IE)
Problema de optimizacion de menu
termashtots
Mensajes: 9
Reputación: 0
Mensaje Nº 1 | 2:39 AM
Hola a todos:
Estimados sabios ayúdenme por favor. En mi pagina coloque un menú horizontal y ahora tengo problema, en todos los browsers funciona menos en IE, leí mucho en los foros, pero no he podido encontrar la solución de mi problema, admito que posiblemente no busque lo suficiente en fin, alguien puede ayudarme??

Por ejemplo

http://mashtots.ucoz.es/ (con Mozilla Firefox perfectamente , abriendo con Internet explorer esta desordenado el menu )

Muchas Gracias
Post editado por termashtots - Viernes, 2012-04-20, 2:44 AM
Plantillasw
Mensajes: 277
Reputación: 6
Mensaje Nº 2 | 4:00 AM
humm ya veo tu problema..
otra cosa miralo en chrome, no sale!!!!.

si puedes enviame el css y trato de ayudarte.

PLW cool

Después de mi larga ausencia. Aquí estoy.
termashtots
Mensajes: 9
Reputación: 0
Mensaje Nº 3 | 8:44 AM
Hola mi estimado agradezco por tu tiempo y por tu atención: Probé casi en todos los browsers, pero cómo pudiste ver en IE es un desastre, fracaso y no me gustaría dejarlo en esa forma

/****************************

****************************/

#container {
width: 1080px;
position: relative;
margin:-4px auto -10px;
}

ul#nav {
list-style: none;
height: auto;
padding: 0;
margin-left:0px;
display: inline-block;
border: 1px solid #000;
position: relative;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

ul#nav li {
text-align: left;
}

ul#nav>li {
float: left;
border-top: 1px solid white;
position: relative;

background-repeat: no-repeat;
background-color: #608bd5; /* Old browsers */
background-image: -moz-linear-gradient(top, #618dd8 0%, #587bb7 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#618dd8), color-stop(100%,#587bb7)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #618dd8 0%,#587bb7 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #618dd8 0%,#587bb7 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #618dd8 0%,#587bb7 100%); /* IE10+ */
background-image: linear-gradient(top, #618dd8 0%,#587bb7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#618dd8', endColorstr='#587bb7',GradientType=0 ); /* IE6-8 */


-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}

ul#nav>li:hover {
background-position: 0 -10px;
}

ul#nav > li:hover ul{
-webkit-animation: anim .2s forwards linear;
-moz-animation: anim .2s forwards linear;
-ms-animation: anim .2s forwards linear;
-o-animation: anim .2s forwards linear;
animation: anim .2s forwards linear;
}

ul#nav>li:hover>a {
color: #FFF;
}

ul#nav>li:visited>a {
color: #000;
}

ul#nav>li>a {
padding: 10px 15px;
color: #FFF;
text-decoration: none;
font: 12px Arial;
border-left: 1px solid #FFF;
border-right: 1px solid #eee;
display: block;
line-height: 15px;

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}

ul#nav>li:first-child>a, ul#nav>li:first-child {
border-left: none;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}

ul#nav li:last-child a, ul#nav li:last-child {
border-right: none;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}

/* 2nd Level */

ul#nav > li > ul {
position: absolute;
list-style: none;
padding: 0;
background: #618dd8;
top: 55px;
width: 230px;
border-radius: 0 0 4px 4px;
border: 1px solid #b3b3b3;
overflow: hidden;
opacity: 0;
left: -999px;


}

ul#nav > li > ul > li {
padding: 10px 0 10px 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #efefef;

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}

ul#nav > li > ul > li:hover {
background: #6d9ef1;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
}

ul#nav > li > ul > li:hover a {
color: white;
}

ul#nav > li > ul > li:first-child {
border-top: none;
}

ul#nav > li > ul > li:last-child {
border-bottom: none;
}

ul#nav > li > ul > li > a {
color: #FFF;
text-decoration: none;
padding: 10px 20px 10px 15px;
font: 12px Arial;

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}

@-webkit-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

@-moz-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

@-ms-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

@-o-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

@keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 35px; opacity: 1}
}

.menu {padding-left:12px;padding-right:10px;


#gallery{
list-style-type: none;
height: 1%;
width: 500px;
margin: 0 auto;
font-size: 0.75em;
margin-bottom: 20px
}
#gallery:after{
content:"";
display:block;
clear:both
}
#gallery li{
margin:0 10px 10px 0;
float:left
}
#gallery li a{
position:relative;
display:block;
float:left;
width:110px;
height:110px;
text-decoration:none
}
#gallery li img{
padding:4px;
background:#f0f0f0;
border:solid 1px #ddd;
position:absolute;
left:0;
top:0;
-ms-interpolation-mode:bicubic
}
#gallery li span{
display:block;
padding:5px;
background:#f0f0f0;
color:#666;
position:absolute;
top:-35px;
left:-35px;
width:170px
}
Plantillasw
Mensajes: 277
Reputación: 6
Mensaje Nº 4 | 10:23 PM
bien voy a buscar el error.
Recuerda que para que un codigo css ducione en todos los navegadores se nacesitan varias sentencias mas, pero no te preocupes si no las tienes te las escribo.


PLW cool

Después de mi larga ausencia. Aquí estoy.
termashtots
Mensajes: 9
Reputación: 0
Mensaje Nº 5 | 11:33 AM
La verdad es que estaría muy agradecido, necesito que funcione bien y busque tanto.
Gracias de nuevo
Plantillasw
Mensajes: 277
Reputación: 6
Mensaje Nº 6 | 6:04 AM
claro con gusto y siempre para servirte.

Pues no se, el código esta bien hecho, y debería servir en todos los navegadores, no se que tendrá ???
Voy a examinarlo mucho mas wacko .

No habría la posibilidad de usar otro menú como ese.??

Sio te sirve aquí hay varias paginas que puedes visitar:

http://www.dynamicdrive.com/style/csslibrary/category/C1/
http://www.cssmenumaker.com/horizontal_css_menu.php

PLW™ B)

Añadido (2012-04-23, 6:04 AM)
---------------------------------------------
humm si de lago te sirve, en safari si se ve bien biggrin

$IMAGE1$

PLW™ B)

Después de mi larga ausencia. Aquí estoy.
Post editado por Plantillasw - Lunes, 2012-04-23, 6:05 AM
termashtots
Mensajes: 9
Reputación: 0
Mensaje Nº 7 | 7:48 PM
Muchas gracias por tu tiepo y por tu ayuda, voa a seguir buscando !!!!!
Plantillasw
Mensajes: 277
Reputación: 6
Mensaje Nº 8 | 2:46 AM
Yo tambien, cualquiera que encuentre te aviso biggrin

PLW™ cool

Después de mi larga ausencia. Aquí estoy.
termashtots
Mensajes: 9
Reputación: 0
Mensaje Nº 9 | 1:46 AM
gracias
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Problema de optimizacion de menu (problema IE)
Página 1 de 11
Búscar: