problemas para que se vea igual en IE que en Firefox

escudo40 · #1 (**permalink**) 31/08/2007, 12:01

El código que les voy a presentar funciona bien con firefox pero en IE este código lo que debería de hacer es cambiar el color de fondo negro para el color azul al pasar el ratón sobre cualquier parte del id #contenido

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<style>
#contenido{
background: #2F2F2F;
}
#contenido:hover{
background: Blue;
}
</style>
<html>
<head>
    <title></title>
</head>

<body>
<div id="contenido">
hola como te llamas 
</div>

</body>
</html>

Daniel Ulczyk · #2 (**permalink**) 31/08/2007, 16:46

Lo que ocurre es que IE sólo asume el :hover para los enlaces no para otra cosa.
Posiblemente te sea útil (e inspiradora) la lectura del Blog Ask the CSS Guy Link Boxes

ver ejemplo

escudo40 · #3 (**permalink**) 01/09/2007, 09:35

Gracias por tu ayuda voy a leer lo que me as dado

escudo40 · #4 (**permalink**) 01/09/2007, 14:26

Ya solucione mi problema gracias a Daniel Ulczyk mientras estuve solucionando el problema me conseguí con este código es mas fácil de entender pero la solución esta en la pagina dada por Daniel Ulczyk

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<style type="text/css">
/* CSS */
body {
    color:#E7E4E4;
    background-color:#CCCCCC;
}
/* El titulo tiene otro color suave para efectos del ejemplo */
h1 {
    color:#E6C3C3;
}
/* DISEÑO ACCESIBLE */
body.accesible {
    color: #000000; /* negro. También puedo poner black */
    background-color:#FFFFFF; /* blanco */
	/* font-size: 1.5em; */ /* aumenta tamaño de fuente */
}
/* si el H1 está en un body con clase accesible, también cambia */
.accesible h1 {
    color: #FD0404; /* rojo */
}
</style>
<script type="text/javascript">
function accesibiliza(){
	var body = document.getElementsByTagName("body")[0];
	var class_name = "accesible";
    var ya_tiene = new RegExp('\\b'+class_name+'\\b').test(body.className);
	if(ya_tiene){//ya la tiene. Remueve.
		var rep = body.className.match(' '+class_name)?' '+class_name:class_name;
		body.className = body.className.replace(rep,'');
	}
	else {//no tiene, agrega clase.
		body.className += " "+class_name;
	}
}
</script></head><body class="accesible">
     <h1>Miren mi estupendo diseño</h1>
    <p>
        Si puedes leer esto tienes buena vista.
    </p>
	<button type="button" onclick="accesibiliza()" id="bot-accesible">Accesibilidad</button>

</body></html>

Se que no debo de colocar programación que no sea css en este foro pero creo que la solución se da con javascript espero que a otros que tienen el mismo problema que yo esto les ayude un poco