Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Diferente en I.E. y F.F. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/07/2010, 03:50
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Diferente en I.E. y F.F.

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
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #2 (permalink)  
Antiguo 02/07/2010, 05:04
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Diferente en I.E. y F.F.

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 02/07/2010, 19:04
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Diferente en I.E. y F.F.

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
  #4 (permalink)  
Antiguo 03/07/2010, 02:01
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: Diferente en I.E. y F.F.

Cita:
Iniciado por caricatos Ver Mensaje
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 Ver Mensaje
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!!!.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·

Última edición por seoista; 03/07/2010 a las 02:19
  #5 (permalink)  
Antiguo 04/07/2010, 17:15
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Diferente en I.E. y F.F.

Hola seoista (curioso nick (*) !)

Me alegra que te sirviera el "arreglo".

Saludos
____________________

* Ferviente seguidor de normativas SEO (quizás)
  #6 (permalink)  
Antiguo 05/07/2010, 00:11
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: Diferente en I.E. y F.F.

Cita:
Iniciado por deirdre Ver Mensaje
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
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·

Etiquetas: diferente
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:42.