jSeblod CCK y JA purity: problemas en Firefox

Cuando intentamos visualizar en nuestro front-end los articulos creados con jSeblod, comprobamos que hay un problema de visualización en Mozilla Firefox.

Concretamente ocurre con la plantilla JA Purity que viene por defecto con Joomla.

PROBLEMA
El texto de cada articulo "se sale" de la plantilla y aparece sobreimpreso hacia la derecha.




CAUSA
La estructura que adopta la plantilla es:


<h2 class="contentheading">
¿Dónde está el ítem del contenido estático?
</h2>

<div class="article-tools">
<div class="article-meta">
// Fecha de edicion y autor
</div>
<div class="buttonheading">
//Iconos de PDF, impresora, email
</div>
</div>


<div class="article-content">
// Texto de nuestro nuevo articulo creado con jSeblod
</div>


Si nos fijamos, nuestro nuevo contenido estará incrustado en una caja DIV a continuación de la caja DIV que alberga los botones de pdf, imprimir y email. El codigo CSS de estos ultimos indica lo siguiente:


.article-tools {
float: right;
}
.article-meta {
float: right;
}


Por lo tanto nuestra caja DIV donde albergamos el texto de nuestro nuevo articulo adopta la posicion flotante RIGHT, por lo que sale a la derecha y superponiendose con el resto de los modulos.

No tengo claro si la culpa es de una mala programación de la plantilla, o bien que Mozilla Firefox interpreta mal estos datos ya que en el resto de navegadores se ve correctamente.



SOLUCION

Pues la solución está bien clara: necesitamos indicarle a nuestro DIV que su posición es LEFT.

Para ello nos vamos a la plantilla de jSeblod.
NOTA: esto es muy importante. Si modificamos la plantilla de Joomla los cambios no se reflejaran, ya que la zona de codigo que añade jSeblod, esta gestionada por las plantillas de jSeblod.

Desde nuestro Back-end:

jSeBlood CCK -> Gestor de plantillas -> Buscamos la plantilla [Default Content] y la abrimos.

Esta plantilla es la que tiene por defecto los articulos de jSeblod. Si la hubieramos cambiado, tendríamos que buscar la plantilla correspondiente.

En la sección inferior SOURCES

Code(CSS) -> Site.css

Presionamos sobre el icono de edición y se nos abrira una ventana para editar el archivo.

Añadimos el siguiente código:

.article-content{
float:left;
}

Guardamos todo y debería aparecer el texto correctamente ubicado.