Div hover no se ve igual

[Zptweb]

Hola, quisiera hacer un hover con background a este div, pero no se como hacerlo, para que se vea igual en IE que en Firefox y Safari:


<div style="z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
float: left;background-color: #9fcf66;
width: 110px; position: relative; height: 40px; text-align: center;color: #368304;" class="barra" id="barra"><div style="margin-top: 10px;"><a href="http://new-tools.addictools.com" title="New tools">New tools</a></div></div>

Alguien me ayuda?

[kseso?]

Hola Zptweb
Hace unas fechas me encontré con un efecto rollover hecho a base de css únicamente. Quizás puedas adaptarlo a tus necesidades.
Este es el enlace, está en las faq´s.

Un saludo

[DragonX]

O bien puedes buscar lo que necesites en al baúl de recursos de nuestro amigo mik!

http://www.araudi.net/

[Zptweb]

Los rollovers para ie 6 no me sirven, y no quiero hacerlo mediante scripts.

[kseso?]

Iniciado por Zptweb

Los rollovers para ie 6 no me sirven, y no quiero hacerlo mediante scripts.

¿Has mirado bien?
Porque ni en ejemplo que te enlacé ni en los recordados por Dragón X hay ninguna llamada a ningún script ni se indica que sean usclusivamente para ie6

[Mikmoro]

No he entendido del todo ni tu primer mensaje ni esta respuesta tuya. En primer lugar, quita todos los estilos que asignas directamente en la etiqueta y pónselos bien a la clase o al id que asignas al div. En segundo lugar, veo que sabes que hover sólo te funcionará para los elementos "a" en IE6, por lo que, lo que debes hacer es que realmente el color de fondo esté asignado al enlace, y mediante display:block, width: 100% y height: 100%, el enlace ocupe en realidad todo el tamaño del div.

Si te explicas mejor y pones un ejemplo claro será más fácil ayudarte.

[Zptweb]

Bien, quiero que con este código

<div style="z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
float: left;background-color: #9fcf66;
width: 110px; position: relative; height: 40px; text-align: center;color: #368304;" class="barra" id="barra"><div style="margin-top: 10px;"><a href="http://new-tools.addictools.com" title="New tools">New tools</a></div></div>

Lo que ves de la etiqueta style, quede en un class, y ese class vaya asignado a un enlace, para que cuando clickes en el div ( ya sea color de fondo o enlace), cambie de color, y al mismo tiempo, siga el enlace.

Por ejemplo, ahora, como veis a continuación, con esto si me coje el enlace todo el div, pero no puedo aplicar efecto rollover, o no me sale:

<a href="http://new-tools.addictools.com" title="New tools" class="stup"><div style="z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
float: left;background-color: #9fcf66;
width: 110px; position: relative; height: 40px; text-align: center;color: #368304;" class="stup"><div style="margin-top: 10px;">New tools</div></div></a>

Con este css no puedo aplicarle el efecto hover, sí cuando no está hover:

a.stup div {
z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
color: white;
display: block;
}

a.stup div a: hover {
z-index: 4; font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
color: black;
display: block;
}

Saludos.

[Mikmoro]

Lo siento, pero con la clase .stup nunca me he llevado muy bien.

[Mikmoro]

En fin.

No entiendo lo que buscas con los div, pero por lo que creo, esto te es más que suficiente:

HTML:
<a href="http://new-tools.addictools.com" title="New tools" class="stup">New tools</a>

CSS:
a.stup {display: block;
line-height: 40px;
font-family: Arial;
font-size: 15px;
font-weight: bold;
outline: none;
float: left;
background-color: #9fcf66;
width: 110px;
position: relative;
height: 40px;
text-align: center;
text-decoration: none;
color: #fff;
}
a.stup:hover {color: #000;
background-color: #00f;
}

[Zptweb]

Con este código, sí se ve bien en ie 7, firefox y safari, pero en ie 6, sale justo en el bottom del div, un margen de 2 o 3 px que no está rellenado con el background cuando se hace hover:

div.barra a:hover {

font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
background-color: #60b12b;
color: white;}

div.barra a {
padding-top: 10px;
font-family: Arial;font-size: 15px; cursor: pointer; font-weight: bold;outline: none;
float: left;background-color: #9fcf66;
width: 110px; position: relative; height: 30px; text-align: center;color: #368304;}

Saludos.

[Mikmoro]

¿Cómo? ¿quieres mirar esto con IE6?

http://www.araudi.net/forosdelweb/Zptweb.html

EDITO: Ah, vale, ahora veo que es que no has leido mi mensaje con el código.