Problemas de visualización de Joomla en Intenet Explorer 8  

Hola Jorge

Has instalado o habilitado recientemente alguna extensión?, de ser así prueba desactivándola

Revisa si tienes activo el pluging de mootools updgrade, prueba desactivándolo
Revisa también si tienes algún pluging de compatibilidad con IE (IE8 Compatibility) , prueba activándolo

Prueba lo sugerido y nos comentas.

Saludos.

Hola buenas tardes Jhon,

He mirado todo lo que me comentas y lo tengo así:

- mootools upgrade --> desactivado
- IE8 Compatibility --> activado y configurado con Emule IE7

En cuanto a si he activado o instalado alguna extensión recientemente, no, tan solo he ido incluyendo nuevos artículos.

Un saludo

Hola Jorge

He visto que colocas la imagen en varias etiquetas del template, esto no es necesario, bastaría solo con una de ellas.
Otra buena práctica es sólo colocar una franja de la imagen ya que puede repetirse y dar la apariencia de una imagen más grande.

Si estas teniendo problemas con ie, es por q sólo esta imprimiendo una porción, el problema al parecer es que sólo se visualizar la última capa con imagen .ja-headermask , prueba agregando un width =100%, es decir :

.ja-headermask{
/*otro código*/
width:100%;
}

Saludos.

Buenas noches Jhon,

Acabo de realizar el cambio que me has comentado, pero en el IE8 no se ha solucionado nada.

Te pego aquí el código que tengo en el template.css en la línea 938 que corresponde al Header, para que veas como está ahora y por si vieras que se necesitara cambiar alguna otra cosilla.

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
	background: url(../images/header-mask.png); /* no-repeat top right;*/
	//background: #333333; /* Línea descomentada sustituida por la de arriba  */
	color: #CCCCCC;
	line-height: normal;
	height: 120px;/* Cambiada altura inicial de 80px */
}

#ja-header {
	position: relative;
	height: 120px; /* Cambiada altura inicial de 80px, esto desplaza la caja de texto hacia la parte inferior */
}

.ja-headermask {
	width: 100%; /* Para cambiar anchura imagen logo central, ----px*/
	display: block;
	background: url(../images/header-mask.png) no-repeat top right;
	height: 120px; /* Para cambiar altura imagen logo central, ----px*/
	position: absolute;
	top: 0;
	right: -1px;
}

#ja-header a {
	color: #CCCCCC;
}

h1.logo, h1.logo-text {
	margin: 0 0 0 5px;
	padding: 0;
	font-size: 180%;
	text-transform: uppercase;
}

h1.logo a {
	width: 350px;
	display: block;
	background: url(../images/logo.png) no-repeat;
	height: 120px; /* Cambiada altura original de 80px */
	position: relative;
	z-index: 100;
}

h1.logo a span {
	position: absolute;
	top: -1000px;
}

h1.logo-text a {
	color: #CCCCCC !important;
	text-decoration: none;
	outline: none;
	position: absolute;
	bottom: 40px;
	left: 5px;
}

p.site-slogan {
	margin: 0;
	padding: 0;
	padding: 2px 5px;
	color: #FFFFFF;
	background: #444444;
	font-size: 92%;
	position: absolute;
	bottom: 20px;
	left: 0;
}

/* Search */
#ja-search {
	padding-left: 20px;
	background: url(../images/icon-search.gif) no-repeat center left;
	position: absolute;
	bottom: 15px;
	right: 0;
}

#ja-search .inputbox {
	width: 120px;
	border: 1px solid #333333;
	padding: 3px 5px;
	color: #999999;
	background: #ffffff; /* Cambiado color original #444444; */
	font-size: 92%;
}

Venga un saludo

Hola Jorge

Modifica el background en .ja-headermask, borra que no se repita y la alineación y sólo deja la ruta

.ja-headermask {
	width: 100%; /* Para cambiar anchura imagen logo central, ----px*/
	display: block;
	background: url(../images/header-mask.png);
	height: 120px; /* Para cambiar altura imagen logo central, ----px*/
	position: absolute;
	top: 0;
	right: -1px;
}

Saludos

Buenas tardes Jhon,

Al final, he conseguido dejarlo bastante apañado, por lo menos eso creo.

He eliminado las tres imágenes que había dentro del directorio template/ja_purity/images/header y he dejado una sola dentro de template/ja_purity/images como me indicabas; aparte también he eliminado una etiqueta background para un fondo que había debajo de la imagen, con lo que ahora los dos trocitos pequeños que había en los extremos han desaparecido y ahora funciona todo como una sola imagen.
Creo que haberlo hecho todo bien puesto que parece que funciona correctamente, pero como en este tema soy muy novel siempre me queda esa duda.

Así ha quedado ahora.

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
	width: 100%; /* Etiqueta de anchura añadida */
	background: url(../images/header-mask.png);
	color: #CCCCCC;
	line-height: normal;
	height: 120px;/* Cambiada altura inicial de 80px */
}

#ja-header {
	width: 100%; /* Etiqueta de anchura añadida */
	position: absolute; /* Etiqueta cambiada, valor anterior Relative */
	height: 120px; /* Cambiada altura inicial de 80px, esto desplaza la caja de texto hacia la parte inferior */
}

.ja-headermask {
	width: 100%; /* Para cambiar anchura imagen logo central, ----px*/
	display: block;
	background: url(../images/header-mask.png);
	height: 120px; /* Para cambiar altura imagen logo central, ----px*/
	position: absolute;
	top: 0;
	right: -1px;
}

#ja-header a {
	color: #CCCCCC;
} 

He hecho alguna modificación mas aparte de la de la anchura que me proponías, ya que la caja de texto del buscador así como las letras para modificar el tamaño ("zoom") de los textos de la página, se me desplazaban a media pantalla; le he cambiado el valor Relative por Absolute a la etiqueta Position en ja-header. Y en ja-usertools-font, he centrado un poco ambas cosillas.

 
/*usertool*/
ul.ja-usertools-font {
	font-size: 11px;
	position: absolute;
	top: 20px; /* Valor cambiado, anterior 8px */
	right: 10px; /* Valor cambiado, anterior 70px */
}

Ahora todo lo referente al Header se ve bastante bien tanto en FF, Crome como IE8, lo que no he conseguido es solucionar lo del Footer.

Sabrías indicarme por favor, dónde buscar para ver si soy capaz de corregir ese pequeño desplazamiento hacia arriba en IE8.

Te agradezco un montón toda la ayuda aportada.

Un saludo

Hola Jorge

Lo veo bien el footer en IE8 e IE7, tal como lo puedes ver en la siguiente imagen, y además no me sale ningún error.
Te sugiero lo pruebes desde otra máquina con IE.

Buenas tardes Jhon,

Ya puedes perdonar, se me había olvidado comentarte que el error del desplazamiento ocurre cuando se pulsa sobre un Leer mas.

En cuanto al error no me ha vuelto a salir, así que tendré que esperar a ver si vuelve a ocurrir.

Un saludo

Hola Jorge

Para el footer, en el archivo de estilos de tu template agrega un margen superior al siguiente estilo:

#ja-footer .copyright{
	/*otro código*/
	margin-top : 20px;
}

Pruébalo y nos comentas

Saludos.

Buenas tardes Jhon,

He retocado lo que me comentabas y al final todo el texto que hay en la zona del copyright se ha centrado un poquito mas, aunque si hubiera bajado a su vez la línea de la parte izquierda y los botones de validación del W3C y XHTML hubiera quedado perfecto, por mas que he alternado unos cuantos valores distintos no he sido capaz de centrarlo, pero bueno lo importante es que ahora ya no se montan los textos encima de las líneas y los que usan el IE lo verán algo mejor.
A ver si en futuras versiones estos de MS se aplican un poquito mas.

Bueno pues muchas gracias por todo nuevamente.

Un saludo

Hola Jorge,

¿Podemos dar por solucionado entonces el entuerto con IE 8 ?

🙂

Saludos

Hola Luis,

Ya lo siento, se me ha olvidado ponerlo en el anterior mensaje, si podéis darlo por solucionado.

Un saludo y muchas gracias