Comunidad de diseño web y desarrollo en internet online

¿Curioso? error en el CSS.

Citar            
MensajeEscrito el 15 Jun 2008 08:04 am
En FF3, y en Opera, no se ve como se espera.
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>



  • 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í.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 16 Jun 2008 08:46 am
Simplemente porque estas flotando y no defines bien el tamaño (alto, hasta donde llega) del elemento bloque. O defines un alto o usas clear:both.

saludos

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino   Team Cristalab

Claber de baja indefinida

firefox
Citar            
MensajeEscrito el 16 Jun 2008 08:54 am

Maikel escribió:

Simplemente porque estas flotando y no defines bien el tamaño (alto, hasta donde llega) del elemento bloque. O defines un alto o usas clear:both.
saludos
Con el clear:both, no pude (o no supe donde ponerlo)

Pero con el height, se arregla.
Infinitas gracias.

El CSS, quedaría así:
li {display:block;
width:65px;
background-color:#999; height:18px;
}
span{display:block;}
.l {float:left;clear:left;width:30px;}
.r {float:right;clear:right;width:30px;}

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.