Problema con doble span (firefox vs IE vs Chrome)

Vun · #1 (**permalink**) 26/10/2009, 08:47

Esta duda es para los que tengan instalado los tres navegadores, aqui puse un ejemplo subido a mi server:

http://www.soulheroes.com/test.php

Como vereis, son dos span, el primero con una imagen de fondo de la tipica barra de HP de los juegos y el segundo es el que contiene el texto del personaje (Vun). Lo de texto2 y texto3 no tiene nada que ver, leer mas adelante.

El primer problema es como alinear este segundo span a la derecha, porque en internet explorer lo he conseguido, pero para Firefox y Chrome immmmmmmmposible, he probado 200.000 cosas y nada

El segundo problema es que en IE parece que la altura del span es mayor que en los otros navegadores (ver texto3)

Aclarar que no puedo usar Divs, ya que estas "cajas" iran varias en la misma fila (ver texto2)

En fin, agradeceria cualquier ayuda, saludos a tod@s

P.D: Me cago en el text-align!!

kseso? · #2 (**permalink**) 26/10/2009, 09:24

Intenta lo siguiente:

Código css:

Ver original.span1 {
background-image:url(http://www.soulheroes.com/images/bb1-10.jpg);
background-repeat:no-repeat;
float:left;
height:32px;
position:relative;
width:52px;
}
.span2 {
bottom:0;
color:#FF0000;
display:block;
font-family:Arial;
font-size:14px;
font-weight:bold;
position:absolute;
right:4px;
text-align:right;
}

y ésto:

Cita:

llévatelo a los estilos:

Código css:

Ver original* {margin:0; padding:0; border: 0;}
body {color: #fff; background: #000;}

Un saludo

Vun · #3 (**permalink**) 26/10/2009, 09:50

Funcionó, eres una maquina

y yo necesito un curso de css jeje

gracias

kseso? · #4 (**permalink**) 26/10/2009, 10:14

Me alegra saberlo, Vun.
Ahora lo que deberías hacer para que sea efectivo el código que recibiste es comparar el que usabas y este otro y hallar las diferencias y porqués de los cambios.

Un saludo