En FF3, y en Opera, no se ve como se espera.
En IE7, se ve tal y como se espera (¿bien?)
En IE7, se ve tal y como se espera (¿bien?)
A ver si me ayudáis a ver en qué fallo:
Sea este sencillo código:
*Quiero que se vea con fondo "#999"
<!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>
li {display:block;
width:65px;
background-color:#999;
}
span{display:block;}
.l {float:left;clear:left;width:30px;}
.r {float:right;clear:right;width:30px;}
</style>
</head>
<body>
<div id="stats">
<ul>
<li><span class="l">1</span><span class="r">1b</span></li>
<li><span class="l">2</span><span class="r">2b</span></li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
li {display:block;
width:65px;
background-color:#999;
}
span{display:block;}
.l {float:left;clear:left;width:30px;}
.r {float:right;clear:right;width:30px;}
</style>
</head>
<body>
<div id="stats">
<ul>
<li><span class="l">1</span><span class="r">1b</span></li>
<li><span class="l">2</span><span class="r">2b</span></li>
</ul>
</body>
</html>
- Si pongo el background, en esa posición (<li>), no se interpreta adecuadamente.
- Si pongo el background en ".l" (<span>) se interpreta bien.
- Si quito el "float:left;", aunque deje el background en su sitio, se lee bien.
No busco una "solución" ni un parche.
Sabría cómo corregirlo.
Busco el motivo por el que FF y Opera no se comportan como se espera; es decir, si tanto el CSS como el xHTML es válido según la W3C... ¿alguien podría precisar si es un error del validador, o de estos dos navegadores (buenos)?
PD: Tenéis un ejemplo, para verlo online (y usar herramientas de debug online), aquí.
