Hola a todos.
La compatibilidad entre navegadores es una quimera, un imposible, no todos lo navegadores son igual de buenos, ademas IE consciente y voluntariamente se empeña en hacer las cosas a su manera (mal). la compatibilidad no es posible por que Microsoft nunca la ha querido, lo que quieren es imponer su criterio ($)
Quien diga que la compatibilidad es posible miente.
Quien quiera contradecirme que le haga un hack a esto (solo con css)
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='es'>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>z-index y hover</title>
<style type='text/css'>
.comun { position: absolute; width: 10em; height: 5em; }
#rojo { background-color: red; left: 1em; top: 1em; z-index: 1; }
#azul { background-color: blue; left: 5em; top: 3em; z-index: 2; }
#naranja { background-color: orange; left: 9em; top: 2em; z-index: 3; }
#rojo:hover,
#naranja:hover,
#azul:hover { z-index: 4; }
</style> <body>
<p id='rojo' class='comun'>El rojo es vivo</p>
<p id='azul' class='comun'>El azul es elegante</p>
<p id='naranja' class='comun'>El naranja es guay</p>
</body> </html> O a esto
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tbody con scroll v0.3</title>
<style type='text/css'>
.scroll { height: 14ex; overflow-x: hidden; overflow-y: scroll; } /* css3 */
</style> <table border='1' summary='esto es una prueba de tabla con tbody y demás'>
<thead>
<tr> <th>Cantidad</th> <th>Producto</th> <th>Valor</th> <th>Subtotal</th> </tr>
</thead>
<tbody class='scroll'>
<tr> <td>1</td> <td>Azucar</td> <td>100</td> <td>100</td> </tr>
<tr> <td>2</td> <td>Aceite</td> <td>100</td> <td>200</td> </tr>
<tr> <td>4</td> <td>Sal</td> <td>200</td> <td>800</td> </tr>
<tr> <td>1</td> <td>Fruta</td> <td>100</td> <td>100</td> </tr>
<tr> <td>2</td> <td>Agua</td> <td>100</td> <td>200</td> </tr>
<tr> <td>4</td> <td>Carne</td> <td>200</td> <td>800</td> </tr>
</tbody>
<tbody>
<tr> <th colspan='3'>Total sección</th> <td>2.200</td> </tr>
</tbody>
<tbody class='scroll'>
<tr> <td>10</td> <td>Azucar</td> <td>100</td> <td>1000</td> </tr>
<tr> <td>20</td> <td>Aceite</td> <td>100</td> <td>2000</td> </tr>
<tr> <td>40</td> <td>Sal</td> <td>200</td> <td>8000</td> </tr>
<tr> <td>10</td> <td>Fruta</td> <td>100</td> <td>1000</td> </tr>
<tr> <td>20</td> <td>Agua</td> <td>100</td> <td>2000</td> </tr>
<tr> <td>40</td> <td>Carne</td> <td>200</td> <td>8000</td> </tr>
</tbody>
<tbody>
<tr> <th colspan='3'>Total sección</th> <td>22.000</td> </tr>
<tr> <th colspan='3'>Total total</th> <td>24.200</td> </tr>
</tbody> </table> O a esto
Código HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
<head>
<meta http-equiv='Content-Type' content='text/xml; charset=UTF-8'/>
<title>un poco de dinamismo</title>
<style type='text/css'>
.item { list-style: none; list-style-position: inside; padding: 0.2ex; margin: 0.2ex; }
a { color: darkblue; text-decoration: none;}
ul { border: transparent solid 0.1ex; }
ul:hover { border: peru solid 0.1ex; }
ul:hover cite,
ul:hover em { color: maroon; }
div:hover ul { display: block; }
div:hover a { color: blue; text-decoration: underline;}
.editorial { width: 30%;}
.oculto ul { display: none; }
.vista { visibility: hidden; }
ul:hover .vista { visibility: visible; }
</style> </head>
<body>
<div class='oculto editorial'>
<h2> <a href="http://www.maestrosdelweb.com/editorial/delicious/"> Una deliciosa forma de guardar tus favoritos </a> </h2>
<ul class='item oculto'>
<li> <q> <em>Del.icio.us</em> es un servicio social que permite guardar los favoritos de tu navegador con todas las pautas que da el Web 2.0.</q> </li>
<li>Por <cite>Christian Van Der Henst</cite> </li>
<li class='vista'>675 lecturas y 0 comentario</li>
</ul> </div>
<div class='editorial'>
<h2> <a href="http://www.maestrosdelweb.com/editorial/delicious/"> Una deliciosa forma de guardar tus favoritos </a> </h2>
<ul class='item'>
<li> <q> <em>Del.icio.us</em> es un servicio social que permite guardar los favoritos de tu navegador con todas las pautas que da el Web 2.0.</q> </li>
<li>Por <cite>Christian Van Der Henst</cite> </li>
<li>676 lecturas y 0 comentario</li> </ul>
</div>
<p> <a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p>
</body> </html> O... la lista sería interminable.