Убрать рамку в span: hover в IE6

[gabri]

добрый день.

у меня появилась следующая проблема: нужно убрать рамку при ховер в span в ие6, а она не убирается, что делать ума не приложу,

вот код, вот для норм. браузеров:

#content ul.menu_1 li a span.dashed{
	border-bottom:1px #0a6aa9 dashed;
}
#content ul.menu_1 li a span.dashed:hover{
	color:#ff6a00;
	border:0px;
}

вот что пишу для ие6:

span{
behavior: expression(
	          onmouseover = function() {this.className += ' hover'},
	          onmouseout = function() {this.className = this.className.replace('hover', '')},
	          style.behavior = null
	        );
	}

	span.hover{
	    text-decoration:none;
		color:#ff6a00;
		border-bottom: 0px;
	}

при этом в ие6 цвет при ховер меняется, не подчеркивается, но подчеркивание (которое border-bottom:1px #0a6aa9 dashed остается),

как избавиться?

спасибо.

Edited February 5, 2012 by gabri

[DStereo]

IE 6 поддерживает ховер только для элементов 'a'.

[gabri]

  On 2/5/2012 at 8:22 AM, DStereo said:

IE 6 поддерживает ховер только для элементов 'a'.

это да, но если прописать тот код для span, который я написала выше, то и для span ховер тоже будет работать, но я не могу избавиться от рамки

[DStereo]

  On 2/5/2012 at 8:45 AM, gabri said:

  On 2/5/2012 at 8:22 AM, DStereo said:

IE 6 поддерживает ховер только для элементов 'a'.

это да, но если прописать тот код для span, который я написала выше, то и для span ховер тоже будет работать, но я не могу избавиться от рамки

Это скорее всего происходит из-за специфичности. Т.к. для обычных браузеров вы пишите такой код #content ul.menu_1 li a span.dashed, а для ie 6 - span.hover, так как в первом случае у вас специфичность селекторов выше, то попробуйте для ie6 прописать вот так:

#content ul.menu_1 li a span.hover{
    text-decoration:none;
    color:#ff6a00;
    border-bottom: 0px;
}

А вообще старайтесь избегать таких селекторов, т.е. не нужно писать ul.menu_1 li a span.dashed. Все это можно было свести к вот этому:

.dashed{
    border-bottom:1px #0a6aa9 dashed;
}
.dashed:hover{
    color:#ff6a00;
    border:0;
}

А для ie6:

.dashed{
    behavior: expression(
        onmouseover = function() {this.className += ' hover'},
        onmouseout = function() {this.className = this.className.replace('hover', '')},
        style.behavior = null
    );
}

.hover{
    text-decoration:none;
    color:#ff6a00;
    border-bottom: 0px;
}

Edited February 5, 2012 by DStereo