Error de posicionamiento CSS entre FF2 y FF3
Buenas, voy al grano. Necesito una clase en css para que cuando quiera (dinamicamente) pueda tener una especie de diálogo de error, independientemente de donde si inserte, esa clase tiene estas propiedades :
.error {
background-image: url(../imagenes/error.gif);
background-color: #ffd1d1;
background-repeat: no-repeat;
background-position: top;
color: #FF0000 !important;
font-weight: bold;
margin: auto;
position: relative;
text-decoration: none;
border: 1px solid #FF0000;
padding: 20px 2px 2px 2px;
display: block;
overflow: auto;
width: 90%;
text-transform: uppercase;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
El tema es que funciona perfectamente en todos los navegadores que he probado (Opera, FF3, IE6 y 7), pero en FF2 y Chrome se sale del layout donde debería ir, es muy muy extraño.
¿Veis algo raro en esos valores?
Saludos y gracias de antemano!!!
Usuario desconocido
Lo unico raro que veo, que no es raro, sino quizá superfluo, es usar el position:relative; si luego no posicionas la clase de ninguna manera. De todas formas, una imagen es mejor que mil palabras, podrías poner un par de screenshots de lo que hace y cómo debería salir.
Un saludo
viroc
La clase se supone que se debe aplicar a elementos como párrafos, span, títulos incluso y éstos van en divs que normalmente tienen position:relative, voy a probar a suprimirlo.
De todas formas, tienes razón, pongo aquí unos pantallazos
Mal -> http://s2.subirimagenes.com/imagen/previo/thump_1323660errorchromeff.gif
Bien -> http://s2.subirimagenes.com/imagen/previo/thump_1323666errorok.gif
Saludos y gracias por la respuesta
kemie
viroc, tienes la pagina en linea?
viroc
Buenas kemie, gracias por el interés! No no la tengo, pero ya no hace falta, el problema era el display: block; . Haciendo "probaturas" descubrí que con el valor inline-table funciona a la perfección. He estado buscando info pero no encuentro la respuesta a lo de FF2 y Chrome con respecto a otros navegadores.
Un sakudo!!
zigotica
igual este artículo te ayuda: Everything You Know About CSS Is Wrong
viroc
Ay dios...solo viendo la url y leyendo por encima creo que es demasiado para un sólo día,
gracias por el link, me va a venir perfecto
romanjusdado
Habría que ver, que propiedad tienen los div de arriba. Cuando creas una clase para que se adapte a cualquier otra clase, ponle los valores por defecto. Lo más seguro es que me exprese mal, así que prueba con lo siguiente.
.error {
background: url(../imagenes/error.gif) #ffd1d1 no-repeat top;
color: #FF0000 !important;
font-weight: bold;
margin: auto;
text-decoration: none;
border: 1px solid #FF0000;
padding: 20px 2px 2px 2px;
display: block;
clear: both;
width: 90%;
text-transform: uppercase;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
Añadiendo el "clear. both" la clase no flotará ni a la izquierda ni a la derecha. Así no se desequilibra con los layout de arriba que tendran un valor "float".
viroc
Ok mrxispas, te he entendido perfectamente, voy a probarlo también, pero ya te digo al final se arregló con display: inline-table.
Un saludo !
xavib
"zigotica"
Estoy de acuerdo con el comentario destacado en el artículo. De alguna forma, cuando hemos logrado quitar las tablas del HMTL este artículo (y otros en la misma línea últimamente) propone recuperarlas en la hoja de estilos. Ahorra dolores de cabeza y tiempo pero, ¿conceptualmente no es un atraso usar display:table para maquetar datos no tabulados? Lo pregunto con todo el ánimo de debatir. Si en un código semánticamente correcto debemos usar los elementos adecuados a cada caso (h1, p, li, fieldset...), ¿no debería ocurrir lo mismo en el CSS?