[SOLUCIONADO] Diferente en I.E. y F.F.

seoista · #1 (**permalink**) 02/07/2010, 02:50

Buenos días, amigos del Foro.

* Creo que esto va aquí, sino es así, por favor muévanlo *

Cómo veis en las imagenes, se ve diferente en I.E. y F.F.

El signo de interrogación queda bien en F.F., pero sube en I.E.

Así se ve en Firefox 3.6.6 (correcto ):

Y así en I. Explorer 8 (incorrecto ):

<CSS>

Cita:

* {margin: 0; padding: 0;}

body {
margin-top: 195px;
background: url(alsapa01.jpg) repeat fixed left top;
}

.caja {
text-align: left;
font-family: tahoma, arial, verdana;
font-size: 20px;
color: #cc0101;
width: 500px;
font-style: oblique;
font-weight: normal;
background-color: #f5f5f5;
border: 15px double #cc0101;
padding: 20px;
}

.caja span {
display: block;
width: 500px;
margin-left: 50px;
}

.izquierda {float: left;}

<HTML>

Cita:

<div class="caja">
<div class="izquierda"><img src="ico_alerta.gif" alt="alerta" title="Alerta" /></div>
<span>Lamento informarles que, debido a mantenimiento, esta página estará fuera de servicio.<br /><br />
Por favor, inténtelo más tarde.<br /><br />
Muchas gracias.</span>
</div>

¿Que tengo que corregir en el código CSS para que quede igual que en Firefox?

Gracias y un saludo

caricatos · #2 (**permalink**) 02/07/2010, 04:04

Hola Alberto, espero que estés bien:

Recuerdo que cuendo me puse a desarrollar una librería gráfica basada en capas, las capas vacías (completamente, en explorer quedaban como lineas verticales cuando el tamaño que había definido era de 1px x 1px, y es que al menos pone ese espacio de la altura de una letra (aunque no exista, y lo arregle con overflow: hidden;

Aunque en mi explorer 8 se ve bien... tal vez solo se trate de que le pongas un doctype

Saludos

deirdre · #3 (**permalink**) 02/07/2010, 18:04

Hola seoista

Otra forma de hacer lo mismo y que se ve igual en todos los navegadores:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aviso</title>
<style type="text/css">
* {margin: 0; padding: 0;}

body {
	margin-top: 195px;
	background: url(alsapa01.jpg) repeat fixed left top;
}

.caja {
	text-align: left;
	font-family: tahoma, arial, verdana; 
	font-size: 20px;
	color: #cc0101;
	width: 500px;
	font-style: oblique;
	font-weight: normal;
	background-color: #f5f5f5;
	border: 15px double #cc0101;
	padding: 20px;
}

.leyenda {
	position: relative;
	top: -40px; /* aqui el tamaño de la altura de tu gif */
	display: block;
	width: 500px;
	margin-left: 50px;
}

.izquierda {/* no es necesaria */}
</style>
</head>

<body>

<!-- probado en ie6 - 7 -8, ff 3.6 , opera 10, safari 5 y Chrome 5-->
<div class="caja"> 
	<div><img src="ico_alerta.gif" alt="alerta" title="Alerta" /></div>
		<span class="leyenda">Lamento informarles que, debido a mantenimiento, esta página estará fuera de servicio.<br /><br />
		Por favor, inténtelo más tarde.<br /><br />Muchas gracias.</span> 
	</div>
</body>

</html>

Bye

seoista · #4 (**permalink**) 03/07/2010, 01:01

Cita:

Iniciado por caricatos

Hola Alberto, espero que estés bien:

Recuerdo que cuendo me puse a desarrollar una librería gráfica basada en capas, las capas vacías (completamente, en explorer quedaban como lineas verticales cuando el tamaño que había definido era de 1px x 1px, y es que al menos pone ese espacio de la altura de una letra (aunque no exista, y lo arregle con overflow: hidden;

Aunque en mi explorer 8 se ve bien... tal vez solo se trate de que le pongas un doctype

Saludos

Hola Pepe, me alegro de contactar contigo. Por aquí vamos bien, espero que vosotros también.

Tengo puesto el doctype transitional:
<!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" lang="es" xml:lang="es">

No me ha funcionado poniendo el overflow: hidden;. ¡Tampoco estoy seguro de haberlo puesto en el sitio correspondiente!.

Abrazos.

Cita:

Iniciado por deirdre

Hola seoista

Otra forma de hacer lo mismo y que se ve igual en todos los navegadores:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aviso</title>
<style type="text/css">
* {margin: 0; padding: 0;}

body {
	margin-top: 195px;
	background: url(alsapa01.jpg) repeat fixed left top;
}

.caja {
	text-align: left;
	font-family: tahoma, arial, verdana; 
	font-size: 20px;
	color: #cc0101;
	width: 500px;
	font-style: oblique;
	font-weight: normal;
	background-color: #f5f5f5;
	border: 15px double #cc0101;
	padding: 20px;
}

.leyenda {
	position: relative;
	top: -40px; /* aqui el tamaño de la altura de tu gif */
	display: block;
	width: 500px;
	margin-left: 50px;
}

.izquierda {/* no es necesaria */}
</style>
</head>

<body>

<!-- probado en ie6 - 7 -8, ff 3.6 , opera 10, safari 5 y Chrome 5-->
<div class="caja"> 
	<div><img src="ico_alerta.gif" alt="alerta" title="Alerta" /></div>
		<span class="leyenda">Lamento informarles que, debido a mantenimiento, esta página estará fuera de servicio.<br /><br />
		Por favor, inténtelo más tarde.<br /><br />Muchas gracias.</span> 
	</div>
</body>

</html>

Bye

Muchas gracias deirdre. ¡Me ha funcionado tanto en ie8 como en ff3.6.6!

Saludos

NOTA: En mi primer mensaje se me olvido comentar que en local con ie8, funciona bien. ¡¡¡No así en la web!!!.

deirdre · #5 (**permalink**) 04/07/2010, 16:15

Hola seoista (curioso nick (*) !)

Me alegra que te sirviera el "arreglo".

Saludos
____________________

* Ferviente seguidor de normativas SEO (quizás)

seoista · #6 (**permalink**) 04/07/2010, 23:11

Cita:

Iniciado por deirdre

Hola seoista (curioso nick (*) !)

Me alegra que te sirviera el "arreglo".

Saludos
____________________

* Ferviente seguidor de normativas SEO (quizás)

No es eso deirdre, ¡ojala!.

Sobre informática no sé nada de nada, solo soy un aficionado y de los malos.

Me sirve de entretenimiento, ya que cómo podrás ver en mi perfil [Acerca de mí], ya estoy jubilado.

(*) Te lo explico por M.P.

Saludos