Problema con mi CSS en Navegador Explorer

elfunebrero · #1 (**permalink**) 30/09/2009, 17:48

Hola amigos alguine me puede ayudar con un problema de mi CSS, tengo esta web:

http://www.ecuadortravel.travel/

En todos los navegadores se ve la imagen en la mitad, pero en Explorer en cualquier versión no me sale.

Alguien que me de una mano con este problema

Muchas gracias

Problema con mi CSS en Explorer

alexk · #2 (**permalink**) 30/09/2009, 18:48

es por el png... si tienes un color solido usa JPG chao!...

PD: danos mas detalles que parece telegrama "error, css, explorer, url"

deirdre · #3 (**permalink**) 30/09/2009, 19:13

Hola elfunebrero

Si te refieres a esta imagen [html/images/start.gif] en iexplorer 7 sí se ve bien y centrada.

Por otra parte, dime que este sitio que estás haciendo es un ensayo o un prototipo, no me digas que es el sitio definitivo, porque no me puedo creer que estés haciendo páginas con las imágenes de páginas y creándoles los enlaces con mapeado.

(me sobresalta la idea !!).

Comentario hecho de buena fe...

Bye

kseso? · #4 (**permalink**) 01/10/2009, 05:04

Al ser una imagen relevante (y tanto, pues es lo único que ve el usuario), no deberías colocarla via css como fondo.
Debería estar incluida vía "<img src=".../>" en el html.
Y para eso no necesitas tanta tabla y mapa de imagen.
Compara la diferencia de código:

Código html:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> 
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
body {
background: #e6e6f6;
}
#index h1 a img {
background: #e6e6f6;
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
margin-top: -72px;
margin-left: -102px;
z-index: 20;
}
#index h1 a span {
font-size:0.5em;
left:50%;
margin-left:-7em;
margin-top:-1em;
position:absolute;
top:50%;
z-index:10;
}
</style>
</head>
<body id="index">
  <h1>
    <a href="html/dear_traveller.html"><img src="http://www.ecuadortravel.travel/html/images/start.gif" alt="logotipo" />
      <span>ENTRAR a Ecuadortravel</span>
    </a>
  </h1>
</body>
</html>

Al ser un png transparente hay que añadir algo más al span.

Ahora prueba a no cargar las imágenes, o en css, o ambos, y verás que tus visitantes siguen pudiendo entrar.

De todas formas, la tendencia es a no utilizar una página sólo para entrar.

Un saludo

elfunebrero · #5 (**permalink**) 01/10/2009, 16:40

Cita:

Iniciado por alexk

es por el png... si tienes un color solido usa JPG chao!...

PD: danos mas detalles que parece telegrama "error, css, explorer, url"

JA-Ja-Ja gracias amigo, mi otro post lo explicare mejor.

Saludos

elfunebrero · #6 (**permalink**) 01/10/2009, 16:42

Cita:

Iniciado por deirdre

Hola elfunebrero

Si te refieres a esta imagen [html/images/start.gif] en iexplorer 7 sí se ve bien y centrada.

Por otra parte, dime que este sitio que estás haciendo es un ensayo o un prototipo, no me digas que es el sitio definitivo, porque no me puedo creer que estés haciendo páginas con las imágenes de páginas y creándoles los enlaces con mapeado.

(me sobresalta la idea !!).

Comentario hecho de buena fe...

Bye

Hola Deirdre, es un proyecto para un CD interactivo, pero aproveche ya que tengo el dominio y el hosting sin nada para ponerle....

La web lo cambiare en unos meses todo a CSS y HTML.

Saludos y gracias

elfunebrero · #7 (**permalink**) 01/10/2009, 16:44

Cita:

Iniciado por kseso?

Al ser una imagen relevante (y tanto, pues es lo único que ve el usuario), no deberías colocarla via css como fondo.
Debería estar incluida vía "<img src=".../>" en el html.
Y para eso no necesitas tanta tabla y mapa de imagen.
Compara la diferencia de código:

Código html:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> 
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
body {
background: #e6e6f6;
}
#index h1 a img {
background: #e6e6f6;
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
margin-top: -72px;
margin-left: -102px;
z-index: 20;
}
#index h1 a span {
font-size:0.5em;
left:50%;
margin-left:-7em;
margin-top:-1em;
position:absolute;
top:50%;
z-index:10;
}
</style>
</head>
<body id="index">
  <h1>
    <a href="html/dear_traveller.html"><img src="http://www.ecuadortravel.travel/html/images/start.gif" alt="logotipo" />
      <span>ENTRAR a Ecuadortravel</span>
    </a>
  </h1>
</body>
</html>

Al ser un png transparente hay que añadir algo más al span.

Ahora prueba a no cargar las imágenes, o en css, o ambos, y verás que tus visitantes siguen pudiendo entrar.

De todas formas, la tendencia es a no utilizar una página sólo para entrar.

Un saludo

Gracias por el mensaje amigo... voy a probar lo que me dices.

Saludos