Problema border double en IE

limboings · #1 (**permalink**) 15/11/2006, 13:45

Hola buenas,

Tengo un menu que cuando se pasa por encima de una seccion el borde solid de arriba pasa a ser double(el menu esta hecho con listas desordenadas),el problema es que en FireFox (a FireFox es estandar llamarle FF?) el interior del borde por asi llamarlo es del color del elemento <li> pero en IE es transparente y se me pone del color que tiene el div que contiene el menu..lo que quiero es que se me vea el color como en FF,quiero que sea vea el interior del borde como el color del <li>,en mi caso es una imagen con background-image..

Alguien sabe como solucionarlo??

Un Saludo y gracias de antemano!!

fearlex · #2 (**permalink**) 15/11/2006, 15:35

POn el codigo, amigo o el link a la pagina, por que asi es dificil decir

limboings · #3 (**permalink**) 15/11/2006, 15:45

Si,aqui esta el codigo,lo e separado en otro archivo para que no sea engorroso de leer:

Código:

<html>
<script language="JavaScript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
<style type="text/css">
#navegacion ul {
	position:absolute;
	left:0;
	top:260px;
	list-style:none;	
	margin-left:5px;
	margin-top: 20px;
	font-size: 12px;
	font-family:Verdana,Arial;
	font-weight:bold;
	padding: 0px 0px 0px 0px;
	width:146px;
	height:287px;
}
#navegacion ul li{
    background-image: url(imagenes/ico.png);
	padding-left: 0px;
	padding-top: 7px;
	border-bottom:1px solid #a53323;
	border-top:8px solid #ff4f37;
	width:146px;
	height: 20px;
	text-align: center;
	border-left:1px solid #a53323;
	border-right:1px solid #a53323;

}
#navegacion ul li.over{
    background-image: url(imagenes/ico.png);
	margin-left:15px;
	padding-left:15px;
	padding-top: 7px;
	border:2px solid #fd5f21;
	border-top-width:8px ;
	border-top-style:double;
border-top-color:	#fd5f21;
	width:146px;
	height: 20px;
	text-align: left;
}

#navegacion a{
	color: #5c0803;
	text-decoration: none;
}
#navegacion ul li.over a{
 color: #5c0803; 
}
#navegacion ul li.over a:hover{
 color: #f59601 ; 
 border: none;
}
#navegacion ul li.over a:active{
font-size: 13px;
}

</style>
<body>
<div id="navegacion">
<ul id="nav">
	<li><a href="#">Link 1.1</a></li>
	<li><a href="#">Link 1.2</a></li>
	<li><a href="#">Link 1.3</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 2.1</a></li>
	<li><a href="#">Link 2.2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>

Bueno,el javascript es para imitar la pseudoclase :hover en IE,aunque no creo qu etenga que ver no?

Un Saludo y gracias!!

limboings · #4 (**permalink**) 16/11/2006, 12:32

Buenas,

Nadie tiene idea de lo que ocurre??

Un Saludo y graciass!!

fearlex · #5 (**permalink**) 17/11/2006, 10:08

Disculpa pero me funciono en IE, en Firefox no me funciono el Javascript. Y yo de JS, no se nada, por eso no respondi.

Sorry

limboings · #6 (**permalink**) 17/11/2006, 13:02

Hola buenas,

En firefox no deve funcionar el javascript porque en firefox si se puede utilizar la pseudo-clase :hover y no hace falta utilizar el codigo javascript anterior en FireFox (de hecho creo que solo funciona en IE),el problema que yo tengo es que con :hover si me muestra el borde doble con el interior del color del fondo de el elemento LI pero con este javascript el interior del borde doble pasa a ser transparente..y quiero que sea como en el :hover..

Alguien sabe como hacerlo??

Un Saludo y gracias!!

fearlex · #7 (**permalink**) 20/11/2006, 10:45

Cita:

Iniciado por limboings

Hola buenas,

En firefox no deve funcionar el javascript porque en firefox si se puede utilizar la pseudo-clase :hover y no hace falta utilizar el codigo javascript anterior en FireFox (de hecho creo que solo funciona en IE),el problema que yo tengo es que con :hover si me muestra el borde doble con el interior del color del fondo de el elemento LI pero con este javascript el interior del borde doble pasa a ser transparente..y quiero que sea como en el :hover..

Alguien sabe como hacerlo??

Un Saludo y gracias!!

NO uses Javascript para eso, mejor aplicale el :hover a la etiqueta a, y dale la vuelta para que te salga, lo mismo, recuerda de que eso seria para IE6 y anterior, por que IE7 lo soporta.

limboings · #8 (**permalink**) 20/11/2006, 12:20

Si,ya lose,lo que puse arriba es un ejemplo separado..tengo dos css..en uno de ellos utilizo :hover para los demas navegadores que no sean IE..y en el otro la clase .hover y con el script embebido en el condicional html..

Un Saludo.. y gracias de todas formas..