Ver Mensaje Individual
  #7 (permalink)  
Antiguo 16/05/2008, 03:08
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
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">&copy; 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.