Foros del Web - Problema Con IE vs Firefox

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Problema Con IE vs Firefox (http://www.forosdelweb.com/f53/problema-con-ie-vs-firefox-585862/)

Problema Con IE vs Firefox

Hola, diseño mi pagina con Quanta y Firefox. Como se puede solucionar porque tuve la desgracia de acordarme que existe el IE y la probé y la verdad que fue cualquier cosa, todo se me corrió para cualquier lado :( Cual es el problema? Como se soluciona? Hice la validacion en la w3.org y me dio perfecto el XHTML y el CSS. :S
Leyendo el FAQ encontre esto: browsershots.org y hice screenshots de los 40 por default navegadores que te pone, en TODOS se ve bien, menos en los de MICROSOFT... :( les dejo un screenshot en mi servidor para que vean como se ve en el IE6 ovbiamente para ver como se puede solucionar :S.
http://www.cincomasdos.com.ar/DEMO2/IE6.png

el link de la pag es:http://www.cincomasdos.com.ar/DEMO2/test1pag.html

css: http://www.cincomasdos.com.ar/DEMO2/Css1.css

Gracias desde ya

Re: Problema Con IE vs Firefox

No estoy seguro a que te refireres con "corrido". Quizá sea el margin extra en las esquinas, que se resuelve con *{margin:0; padding:0;}. Serviría si pusieras una imagen de como ser vería tambien de la forma "correcta".

Otra cosa: No estoy seguro, pero creo que el test que pusiste no me cargó el CSS. ¿Lo pusiste correcto?

Suerte!

Re: Problema Con IE vs Firefox

Desde ya muchas gracias por responder. La solución *{margin:0; padding:0;} del margin extra en las esquinas dónde se coloca?
No me di cuenta de poner la imagen de como sería en forma correcta.
Aca está correctamente en FF: http://www.cincomasdos.com.ar/DEMO2/FF.png
e incorrectamente en IE: http://www.cincomasdos.com.ar/DEMO2/IE6.png
pag:
http://www.cincomasdos.com.ar/DEMO2/test1pag.html
css:
http://www.cincomasdos.com.ar/DEMO2/csslink.css

Los errores en IE son:

-->se me agranda el width del contenedor principal
-->el height del header se hace enorme
-->el height de los "separadores rojos" se hace más grande de lo normal
-->el heith del contenido a 2 "columnas" se deforma y agranda

Espero que ahora haya sido más claro.

Ah, hay un popup en "5+2 te desafia" y me gustaria que cuando uno lo aprete quede todo el fondo (menos el popup) con un opacity para llamar la atencion unicamente al popup.

SALUDOS Y MUCHISIMAS GRACIAS

Re: Problema Con IE vs Firefox

El problema que te dice daPhyre con la hoja de estilo es que, aunque tú pones que tu hoja es http://www.cincomasdos.com.ar/DEMO2/csslink.css, en realidad en el html estás llamando a esta otra:

<link rel="stylesheet" type="text/css" href="Css1.css" />

que además no es una hoja de estilo. Creo que tú debes estar viendo otra versión que la que nos has puesto.

Mikel.

Re: Problema Con IE vs Firefox

Mikel y daPhyre. Disculpen, lo que pasó fue que me parece que me hackearon el ftp o algo por el estilo porque el css anterior de vez en cuando se me cambia por una pagina publicitaria.
En mi pc lo veo ya cambiado a <link rel="stylesheet" type="text/css" href="csslink.css" />.

Me parece que se estará demorando en subir en el servidor. No te parece? habría que esperar un ratito. Saludos y espero que entre Uds = los genios me puedan ayudar ;)

Gracias

Respuesta: Problema Con IE vs Firefox

Hola, teoricamente, parece que se resolvió el problema con el servidor, llamé al servicio tecnico y parece que habían hackeado unos servers.
Ahora la imagen correcta de la pag:http://www.cincomasdos.com.ar/DEMO2/FF.png
e incorrectamente en IE: http://www.cincomasdos.com.ar/DEMO2/IE6.png
pag:
http://www.cincomasdos.com.ar/DEMO2/test1pag.html
css:
http://www.cincomasdos.com.ar/DEMO2/csslink.css

Los errores en IE son:

-->se me agranda el width del contenedor principal
-->el height del header se hace enorme
-->el height de los "separadores rojos" se hace más grande de lo normal
-->el heith del contenido a 2 "columnas" se deforma y agranda

Espero que me puedan ayudar ya que estoy muy complicado luchando con esto. Lei acerca de Filtros y Hacks para Css pero no se bien como se usan. Lei que se usan _ , comentarios condicionales y * html .... pero nose para que usan.

Gracias desde ya

Respuesta: Problema Con IE vs Firefox

Hola, juampick. Vaya vaya con los hackers (qué pesadez; tanto ingenio, bien canalizado...).

En cuanto a tus dudas:
yo también soy de los que predico que se debe diseñar para Firefox y luego adaptar a explorer, pero a veces, teniendo en cuenta a los dos desde un principio, se hacen cosas que son más compatibles que otras y así se necesitan muchos menos trucos de adaptación al final.

He hecho tantas modificaciones tanto a tu html como a tu css que mejor que comentarlas, te voy a poner el código completo, y luego ya tú estudias los cambios, y me preguntas lo que quieras. Este código se ve exactmente igual en FF, IE6 y IE7. Lo siento porque es un poco largo, pero es mejor así.

HTML

Cita:

<!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>
<link rel="stylesheet" type="text/css" href="csslink.css" />
<title>First Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div id="contenedor">
<div id="header">
<div id="logoleft"><img src="pruebalogofondopng.png" alt="logo 5+2" /></div>
<div id="buttons">
<ul>
<li><a href="/">Historia</a></li>
<li><a href="/">Contacto</a></li>
<li><a href="/">Recursos</a></li>
<li><a href="/">Links</a></li>
<li><a href="/">Galería</a></li>
<li class="selected"><a href="/">Inicio</a></li>
</ul>
</div>
</div>

<div class="separador"></div>
<div id="blanket"></div>

<div id='PopUp'>
<h1>Jesús les dijo:<br />“Dejad a los niños venir a mí”</h1>
<h2>¿Cómo podemos “dejar” que los niños vayan a Él?</h2>
<ul>
<li> <strong>Demanda:</strong>Considerando lo que Dios nos demanda: que hablemos de Su Gran Amor a los pequeños.
“Así, no es la voluntad de vuestro Padre que está en los cielos, que se pierda uno de estos pequeños.” (Mt. 18: 14) </li>
<li> <strong>Evangelizar:</strong>Predicando el evangelio a toda criatura. “Y les dijo: Id por todo el mundo y predicad el evangelio a toda criatura.” (Mr. 16: 15) Esto incluye totalmente a los niños</li>
<li> <strong>Jugarnos:</strong>Haciendo siempre la voluntad de Dios. “...Pero habiendo obtenido auxilio de Dios, persevero hasta el día de hoy, dando testimonio a pequeños y a grandes ,...” (Hch. 26: 19- 23)</li>

<li> <strong>Animarnos:</strong>...A hablar de Su amor a cada pequeño. En Hechos 18: 9 y 10 Dios lo anima al Apóstol Pablo y le dice: “No temas, sino habla, y no calles; porque yo estoy contigo...” ¡El Señor nos anima a ir!</li>
<li> <strong>Reconocer:</strong> ...Su clara voluntad, su voz, su llamado. Pero también, debemos reconocer nuestra tardanza, nuestros miedos, nuestras excusas y dejarlas en la Cruz ... ¡para cumplir Su propósito! “Mirad, pues, con diligencia cómo andéis, no como necios sino como sabios, aprovechando bien el tiempo, porque los días son malos. Por tanto, no seáis insensatos, sino entendidos de cuál sea la voluntad del Señor.” (Ef.5: 15 al 17).<br /><br />El Señor Jesús, como en aquel momento, nos sigue diciendo: <br /><br />
<strong>“Dejad a los niños venir a mí, y no se lo impidáis; porque de los tales es el reino de Dios. De cierto os digo, que el que no reciba el reino de Dios como un niño, no entrará en él.” Marcos 10: 14 y 15</strong><br/><br />
Es por eso que 5+2 creó este espacio para que vos, nuestro querido hermano, puedas animarte a realizar actividades creativas para llegar con el mensaje de la Cruz a cada pequeño</li>

</ul>
<br />
<div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 15px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.di splay = 'none' " ><span style="text-decoration: underline;">Cerrar</span></a></div>
</div>

<div><img src="fotoportada1r.jpg" alt="fotoportada" /></div>
<div class="separador"></div>
<div id="content">

<div id="versiculos"><p>"Así, no es la voluntad <br />de vuestro padre que está <br />en los cielos,<br /> que se pierda <br />uno de estos pequeños"<br /><br />Mateo 18:14</p></div>
<div id="greetings">
<h1>Bienvenidos al Web Site de 5+2</h1>
<h2>--- Nuestro deseo es que nuestro sitio <br />pueda ser de bendición! ---</h2>

<p class="grettings"><a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.di splay = 'block'"><span>5+2 te desafía</span></a> a que alcances con el Evangelio a cada niño <br />de tu barrio, ciudad y región.<br />Queremos compartir con vos recursos que hemos utilizado <br />como grupo de teatro con participación de títeres</p></div>
</div>

<div class="separador"></div>
<div id="footer">© 2008 - 5+2 Group ----- Juampicks Production -----</div>
</div>
</body>
</html>

CSS

Cita:

*{ margin: 0; padding: 0; font-size: 1em;
}
body {
text-align:center;
background-color:black;
margin:50px;
}
#contenedor {
margin:0 auto;
width: 760px;
padding:0;
border:1px solid #ccc;
background-color:#87c1f1;
text-align:center;
position: relative;
}
#header {
height: 100px;
margin:0 auto;
}
#logoleft {
float:left;
width:100px;
height:100px;
margin:0;
}
#buttons {
padding:1em;
height:1.5em;
color:#ffffff;
}
#buttons li {
float:right;
list-style-type:none;
white-space:nowrap;
}
#buttons li a {
display:block;
padding:0 5px;
font-size:1.2em;
font-weight:normal;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
#buttons .selected,#buttons a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}
.separador {
border-top: solid 2px red;
}
#content {
width:758px;
background:#4d4d4d;
min-height:230px;
height:auto!important;
height:230px;
}
#versiculos {
width:40%;
float:left;
margin:0;
padding:0;
}
#versiculos p {
color:white;
font-size:1.5em;
text-align:center;
margin-top:40px;
margin-left:0;
margin-right:20px;
}
#greetings {
margin-left:275px;
border-left:3px solid white;
padding:2em;
text-align:center;
}
#greetings h1 {
font-size:1.5em;
color:white;
}
#greetings h2 {
font-size:1.3em;
color:white;
}
#greetings p {
color:red;
font-size:1.2em;
}
/*#blanket {
display:none;
background-color:#111;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}*/
#PopUp {
display:none;
position:absolute;
width: 600px;
margin-left:50%;
left: -312px;
border: dashed red 2px;
padding: 10px;
background-color: #dbdbdb;
text-align: center;
font-size: 12px;
/*filter:alpha(opacity=80);
opacity:0.8;*/
}
a span {text-decoration: underline;}
#footer {
clear:both;
padding:5px 0;
margin:0 1px;
background:#87c1f1;
text-align:center;
color:white;
}

Te he cambiado la codificación a ISO-8859-1, porque no había ningún caracter que no esté soportado. Si quieres volverlo como antes, guarda el archivo como UTF-8 y cámbialo en la cabecera.

Ya contarás qué tal te va.

Mikel.

Respuesta: Problema Con IE vs Firefox

Hola, primero de todo GRACIAS, segundo GRACIAS, y tercero GRACIAS MAESTRO! :P
La verdad que todo funcionó a la perfección, hubiera estado años intentando cosas pero estas seguro que no!!
Lo que me gustaria ahora es que brevemente me expliques los cambios así voy aprendiendo. Fueron estos (si no me equivoco):

-->Imagenes insertadas en el html sin ancho ni alto. (Por q?)

-->Colocaste

Código:

*{ margin: 0; padding: 0; font-size: 1em;}

para que tenga un tamaño de fuente por defecto todo no?

-->

Código:

position:relative;

en #contenedor (DIV), (Por q?)

-->No le pusiste ancho a mi header, Ya lo hereda por estar dentro del contenedor??

-->Al #separador le pusiste

Código:

border-top: solid 2px red;

y no

Código:

background-color

y definiendo una altura (Me imagino que era esto lo que me ocasionaba en el explorer a que "invente" cualquier altura no?)

-->Esto es lo que me llama más la atención que no lo comprendo bien:
En el #contenedor (de los contenidos)

Código:

min-height:230px;

height:auto!important;

height:230px;

(Por q?)

-->El

Código:

width:60%;

en el #greetings (porque en el otro costado ya estaba el 40% entonces no hacia falta, puede ser?)

-->En el #PopUp le sacaste el

Código:

top:25%;

(Que hago si quiero que tenga más margen superior??)

-->Y sacaste por último el

Código:

<p>

en el footer (No es necesario??)

Muchas gracias nuevamente y espero que cuando tengas un ratito libre me puedas responder las preguntas así puedo aprender de mis errores y otras personas que puedan leer este post tmb.

Saludos y seguramente dentro de poco estare buscando HELP!!! :P

Graxx ...

Juampi ;)

PD: Mikmoro GENIO:P

Cita:

Vaya vaya con los hackers (qué pesadez; tanto ingenio, bien canalizado...).

Entonces no me junto mas con ellos? y no leo más el libro Css: Hacks And Filters que había comenzado a leer?? :S

Bye!!!

PD2: Para ver la pag funcionando a la perfeccion: www.cincomasdos.com.ar/DEMO2/test1pag1.html. CSS: www.cincomasdos.com.ar/DEMO2/csslink1.css

Respuesta: Problema Con IE vs Firefox

Cita:

Iniciado por juampick (Mensaje 2408502)

Lo que me gustaria ahora es que brevemente me expliques los cambios así voy aprendiendo. Fueron estos (si no me equivoco):

-->Imagenes insertadas en el html sin ancho ni alto. (Por q?)

Las imágenes no necesitan que les marques el tamaño a no ser que sea diferente del original, que no era tu caso.

Cita:

Iniciado por juampick (Mensaje 2408502)

-->Colocaste

Código:

*{ margin: 0; padding: 0; font-size: 1em;}

para que tenga un tamaño de fuente por defecto todo no?

Correcto.

Cita:

Iniciado por juampick (Mensaje 2408502)

-->

Código:

position:relative;

en #contenedor (DIV), (Por q?)

Generalmente IE6 necesita que las cajas tengan una posición marcada, sea la que sea, para comportarse correctamente, y además, de esa manera podemos posicionar la ventana emergente con respecto al contenedor en lugar de hacerlo a la página completa. Verás que con eso he eliminado tu hack para explorer.

Cita:

Iniciado por juampick (Mensaje 2408502)

-->No le pusiste ancho a mi header, Ya lo hereda por estar dentro del contenedor??

Correcto. No lo necesita.

Cita:

Iniciado por juampick (Mensaje 2408502)

-->Al #separador le pusiste

Código:

border-top: solid 2px red;

y no

Código:

background-color

y definiendo una altura (Me imagino que era esto lo que me ocasionaba en el explorer a que "invente" cualquier altura no?)

Exacto. Explorer tiene problemas con el tamaño de una caja vacía (hace lo que le da la gana), y este es un buen método para sustituir a un HR; ponerle borde en lugar de tamaño y background.

Cita:

Iniciado por juampick (Mensaje 2408502)

-->Esto es lo que me llama más la atención que no lo comprendo bien:
En el #contenedor (de los contenidos)

Código:

min-height:230px;

height:auto!important;

height:230px;

(Por q?)

Si hay dos parámetros igual, siempre se lee el que aparezca el último. Eso se puede modificar con la propiedad !important, de manera que en este caso los navegadores inteligentes atienden a la propiedad que tenga el important, menos IE6, que no sabe interpretarlo. Por otro lado, en IE6 una caja crece siempre que tenga contenido mientras que en los demás no. Así, para FF decimos que su tamaño mínimo (min-height) sea 230px, y con auto que crezca lo que necesite. IE6 no entiende min-height, pero como crece igualmente, el height 230px actúa en él como mínimo y como auto.

Cita:

Iniciado por juampick (Mensaje 2408502)

-->El

Código:

width:60%;

en el #greetings (porque en el otro costado ya estaba el 40% entonces no hacia falta, puede ser?)

Efectivamente: el primero ocupa el 40% y el otro el resto, sea lo que sea. Es mejor y evitas el error de que para IE6 40% + 60% no suman 100% (???) Así es :-)

Cita:

Iniciado por juampick (Mensaje 2408502)

-->En el #PopUp le sacaste el

Código:

top:25%;

(Que hago si quiero que tenga más margen superior??)

Ahora se queda al borde del contenedor. Si quieres deplazarlo, simplemente ponle top: 20px, o lo que quieras, teniendo en cuenta que esa distancia será desde el borde del contenedor. Creo que ahora no necesitas que sea en porcentaje.

Cita:

Iniciado por juampick (Mensaje 2408502)

-->Y sacaste por último el

Código:

<p>

en el footer (No es necesario??)

No, no era necesario en absoluto, teniendo una sola línea.

Espero que se entienda todo claramente, y me alegro de que haya funcionado bien a la primera. Si algo no está claro aquí estoy. Un saludo.

Mikel.

Respuesta: Problema Con IE vs Firefox

Mikmoro... Gracias!! La verdad te pasaste con tu ayuda y después con tu explicación.
Una cosita... Me gusto eso de que en el bichito de Microsoft (IE6) =

Cita:

40% + 60% no suman 100% (???)

... QUE "RARO" No? es re-interesante eso... jaja POR FAVOR NO USAR EXPLORER!!!

ENTREN ACA: http://www.difundefirefox.com/

Saludos y gracias nuevamente

Respuesta: Problema Con IE vs Firefox

De nada, es un placer.

Mucha gente se devana los sesos con ese asunto de que para explorer 4 + 6 = 10,1 :-). Suele ser fuente de muchos problemas, así que siempre que sea posible, es preferible asignar el tamaño a uno de los dos bloques y que el otro ocupe el resto del espacio disponible. Qué le vamos a hacer. Yo estoy a la espera de que IE6 caiga completamente en desuso (como el 5), aunque como con el 7 han cometido también un buen montón de errores, no tengo mucha fe en que esto cambie nunca. Paciencia. :Zzz:

Me alegro de que todo haya ido bien. Hasta la vista.

Mikel.