Foros del Web » Creando para Internet » CSS »

Más problemas con CSS en Explorer...

Estas en el tema de Más problemas con CSS en Explorer... en el foro de CSS en Foros del Web. Hola muchachos, este problema ya es recurrente, he visto varios post con el mismo problema y es realmentre complicado, sobre todo si no hay conocimientos ...
  #1 (permalink)  
Antiguo 28/10/2010, 14:47
 
Fecha de Ingreso: octubre-2010
Mensajes: 8
Antigüedad: 7 años, 1 mes
Puntos: 0
Más problemas con CSS en Explorer...

Hola muchachos, este problema ya es recurrente, he visto varios post con el mismo problema y es realmentre complicado, sobre todo si no hay conocimientos avanzados de css.

lei casi todo, días leyendo en la web!!! y no he podido solucionar mi problema... ojalá alguien me ayude, lo agradeceré hasta el fin de los días.


Hice un menú...que funciona impecable en mozilla, pero en explorer se deforma completamente, demostración:

Mozilla:



Se ve ordenadito, impecable!! pero en...

Explorer:



es un fiasco... se ve horrible!!


Muestro el código, aunque sea latero leerlo... agradecería que se dieran el tiempo de revisarlo, salvarán 1 vida.
En la web tengo el sgte código:

Código:
<div id="art-main">
        
           
<div class="art-nav">

                	<div class="l"></div>
                	<div class="r"></div>
                	<ul class="art-menu">
                		<li><a href="/ADSNSite/mantencion/list/" class="{ActiveItem}"><span class="l"></span><span class="r"></span><span class="t">Mantenimiento</span></a></li>
                		<li><a href="${createLink(uri: '/preguntas/front/')}"><span class="l"></span><span class="r"></span><span class="t">Procedimientos</span></a>             		</li>
                		<li><a href="${createLink(uri: '/preguntas/construccion/')}"><span class="l"></span><span class="r"></span><span class="t">Bajas Programadas</span></a></li>
                		<li><a href="${createLink(uri: '/noticia/list')}"><span class="l"></span><span class="r"></span><span class="t">Noticias</span></a></li>
                		<li><a href="${createLink(uri: '/preguntas/list/')}"><span class="l"></span><span class="r"></span><span class="t">Faq</span></a>
                                  
                                <ul>
                				<li><a href="${createLink(uri: '/preguntas/front/')}">FAQ (vista usuario)</a>
                                                  <li><a href="${createLink(uri: '/preguntas/list/')}">FAQ (Back-end)</a>
                                                
                                                </li>

                			</ul>

                                </li>
                                <li><a href="${createLink(uri: '/administracion/index')}"><span class="l"></span><span class="r"></span><span class="t">Administracion</span></a></li>

                                
                                
                                <g:link class="logout" controller="login" action="logout"><div align="right"><font color=#c0c0c0 >Log Off</font></div></g:link>
                	</ul>
                        
                </div>

<link rel="stylesheet" href="${resource(dir:'css',file:'style.css')}" />
<!--[if IE 6]><link rel="stylesheet" href="${resource(dir:'css',file:'style.ie6.css')}" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="${resource(dir:'css',file:'style.ie7.css')}" /><![endif]-->

Como se puede ver... hay un "style.css" que funciona siempre... y un "style.ie7.css" que funciona cuando el usuario entra con explorer.


El código del "style" es el siguiente:

Código:
/* begin Menu */
/* menu structure */


.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
	text-align:left;
	text-decoration:none;
	outline:none;
	letter-spacing:normal;
	word-spacing:normal;
}

.art-menu, .art-menu ul
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.art-menu li
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	background:none;
        
}


.art-menu li:hover
{
	z-index: 100000;
	white-space: normal;
        

}

.art-menu li li
{
	float: none;

}

.art-menu ul
{
	visibility: hidden;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background:none;
       
}

.art-menu li:hover>ul
{
	visibility: visible;
	top: 100%;
}

.art-menu li li:hover>ul
{
	top: 0;
	left: 100%;
}

.art-menu:after, .art-menu ul:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.art-menu, .art-menu ul
{
	min-height: 0;
}

.art-menu ul
{
	background-image: url(../images/spacer.gif);
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}





/* menu structure */

.art-menu
{
	padding: 8px 4px 0px 4px;
}

.art-nav
{
	position: relative;
	height: 33px;
	z-index: 100;
        

}

.art-nav .l, .art-nav .r
{
	position: absolute;
	z-index: -1;
	top: 0;
	height: 33px;
	background-image: url(../images/nav.png);

}

.art-nav .l
{
      /* STA SIRVE PARA DAR UN MARGEN AL MENU -BARRA- */
	left: 0px;
	right:0px;

}

.art-nav .r
{
	right: 0;
	width: 100%;
	clip: rect(auto, auto, auto, 1023px);
}


/* end Menu */

/* begin MenuItem */
.art-menu ul li
{
	clear: both;
}

.art-menu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 25px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 3px;
	margin-left: 3px;
       /* STA SIRVE PARA DAR UN MARGEN AL MENU -TABS- */
        left: 0px;
	right:0px;

}


.art-menu a .r, .art-menu a .l
{
	position:absolute;
	display: block;
	top:0;
	z-index:-1;
	height: 75px;
	background-image: url(../images/MenuItem.png);
}

.art-menu a .l
{
	left:0;
	right:3px;
}

.art-menu a .r
{
	width:406px;
	right:0;
	clip: rect(auto, auto, auto, 403px);
}

.art-menu a .t
{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	padding: 0 15px;
	margin: 0 3px;
	line-height: 25px;
	text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
	top:-25px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
	top:-25px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
	top:-25px;
}
.art-menu a:hover .t
{
	color: #393E37;
}

.art-menu li:hover a .t
{
	color: #393E37;
}

.art-menu li:hover>a .t
{
	color: #393E37;
}



/* end MenuItem */

/* begin MenuSubItem */
.art-menu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	height: 20px;
	width: 180px;
	overflow:hidden;
	line-height: 20px;
	margin-right: auto;


	background-image: url(../images/subitem-bg.png);
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 0px;
	border-style: solid;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 20px;
	color: #F5F3EB;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}

.art-menu ul ul a
{
	margin-left: auto;
}

.art-menu ul li a:hover
{
	color: #625932;
	background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
	color: #625932;
	background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
	color: #625932;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
	color: #625932;
}


/* end MenuSubItem */

Y el "style.ie7.css" es el siguiente:

Código:
/* begin Menu */
.art-nav .r
{	clip: rect(auto auto auto 1023px);
}
/* end Menu */

/* begin MenuItem */
.art-menu a .r
{
	clip: rect(auto auto auto 403px);
}
/* end MenuItem */
Estaré atento a cualquier comentario, ayuda, sugerencia... cualquier información la agradeceré muy bien,

j.-
  #2 (permalink)  
Antiguo 29/10/2010, 09:06
 
Fecha de Ingreso: octubre-2010
Mensajes: 8
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Más problemas con CSS en Explorer...

buuuu parece que el tema es complicado... voy a tener q esforzarme el doble y sacar este problea!!! o morir en el intento.-

gracias de todas formas,

j.-
  #3 (permalink)  
Antiguo 29/10/2010, 15:06
 
Fecha de Ingreso: octubre-2010
Mensajes: 155
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Más problemas con CSS en Explorer...

El css podes colocar eso



Código:
ul#menu {
	ba
  margin: 0;
  border: 0 none;
  padding: 0;
/*  width: 500px;*/ /*For KHTML*/
width:960px;
  list-style: none;
  height: 20px;
  border:1px solid #eee;
  padding-bottom:5px;
  margin:auto;
}

ul#menu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 20px;
}
ul#menu li{
	padding-bottom:5px;
}
ul#menu li:hover{
	background:#ddd;
}

ul#menu  ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 25px;
  left: 10px;
  background: #eee;
  border: none;
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
}

ul#menu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#menu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#menu a {
  padding: 5px 15px 5px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #9fcf21;
  text-decoration: none;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
/*  border-right:1px solid #818181;*/
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#menu a:hover,
ul#menu li:hover a,
ul#menu li.iehover a {
color: #003300;

}

/* 2nd Menu */
ul#menu li:hover li a,
ul#menu li.iehover li a {
  float: none;
  border:none;
}

/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
 background:#ddd;
  color: #003300;
}

/* 3rd Menu */
ul#menu li:hover li:hover li a,
ul#menu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */

ul#menu li:hover li:hover li a:hover,
ul#menu li:hover li:hover li:hover a,
ul#menu li.iehover li.iehover li a:hover,
ul#menu li.iehover li.iehover li.iehover a {
background:#ddd;
  color: #FFF;
}

/* 4th Menu */
ul#menu li:hover li:hover li:hover li a,
ul#menu li.iehover li.iehover li.iehover li a {
background:#ddd;
  color: #666;
}

/* 4th Menu Hover */
ul#menu li:hover li:hover li:hover li a:hover,
ul#menu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#menu ul ul,
ul#menu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul,
ul#menu li:hover ul ul ul,
ul#menu li.iehover ul ul,
ul#menu li.iehover ul ul ul {
  display: none;
}

ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
  display: block;
}
ul#menu .selected{
	color: #003300;
}
y puedes armar tu lista de la siguiente manera

Código:
<ul id="menu">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Desplegable</a>
		<ul>
			<li><a href="#">Desplegable 1</a></li>
			<li><a href="#">Desplegable 1</a></li>
                        <li><a href="#">Desplegable 1</a></li>
                        <li><a href="#">Desplegable 1</a></li>
           

		</ul>
</ul>

Espero que te sirva

Última edición por gamau6; 29/10/2010 a las 15:08 Razón: falto las etiquetas
  #4 (permalink)  
Antiguo 04/12/2010, 14:58
 
Fecha de Ingreso: diciembre-2010
Mensajes: 1
Antigüedad: 7 años
Puntos: 0
Respuesta: Más problemas con CSS en Explorer...

Bueno parece que estás usando una plantilla creada con Artisteer.

El primer punto es que los menús desplegables 100% CSS no funcionan en NINGUNA versión de IE, y también Mozilla es algo laxo cuando hay problemas de codificación en el lado html de la página (pero eso es harina de otro costal) Para hacer funcionar cualquier menú desplegable en IE es necesario la ayudita de un poco de JavaScript


1) Verifica que en tu menú todas las etiquetas li y ul estén cerradas donde estén debido (la mejor forma de saberlo si tu código no está muy bien identado, es usar el validador de w3c, ayuda muchísimo para ese tipo de problemas)


2) Copia junto con tus archivos .css el archivo javascript.js (o según la versión de artisteer que uses, el archivo jquery.js)

Tu thread en el foro ya tiene algo mas de un mes, pero espero que ésta información todavía te sea útil.
  #5 (permalink)  
Antiguo 04/12/2010, 15:06
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: Más problemas con CSS en Explorer...

Cita:
Iniciado por gamau6 Ver Mensaje
El css podes colocar eso

Código:
<ul id="menu">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Desplegable</a>
		<ul>
			<li><a href="#">Desplegable 1</a></li>
			<li><a href="#">Desplegable 1</a></li>
                        <li><a href="#">Desplegable 1</a></li>
                        <li><a href="#">Desplegable 1</a></li>
           

		</ul>
</ul>

Espero que te sirva

Código:
<ul id="menu">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Desplegable</a>¿?¿?
		<ul>
			<li><a href="#">Desplegable 1</a></li>
			<li><a href="#">Desplegable 1</a></li>
                        <li><a href="#">Desplegable 1</a></li>
                        <li><a href="#">Desplegable 1</a></li>
           

		</ul>
</ul>
falto cerrar, donde he colocado los ¿?¿?
</li>

Etiquetas: explorer
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:11.