Como poner fondos para div en IE

juanchooo12 · #1 (**permalink**) 29/01/2011, 11:57

Hola amigos, tengo un problema al agregar un fondo a una div con CSS, cuando termino de diseñarla(sin subirlo a la web) lo veo perfectamente en firefox y en Chrome pero en IE no se ve ni el fondo de la div ni el fondo de la web.
mi codigo CSS es este:

Código:

body { background-image:url(../imagenes/fondo.png);
background-position:center top;
background-repeat:no-repeat;
}

body h2 { text-decoration:underline;
}
* {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 6px;
}
#header {
	height: 129px;
}
#navbar {
	height: 71px;
}
#contenido {
	background-color: #FFF;
	background-image: url(../imagenes/Fondocontenido.png);
	height: 599px;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
}
#pie {
	background-image: url(../imagenes/pie.png);
	height: 51px;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}

Quisiera saber porque ocurre y como solucionarlo

Desde ya muchas gracias

Kurozaki · #2 (**permalink**) 29/01/2011, 13:02

ponle background: url(etc etc...)
No pongas el background-image

Y tambien ponle las comillas ('../url/url.jpg');

Otra cosa... Si en el div, no tienes contenido alguno, ponle un width, por que si no, no visualizara el div en IE

Por ultimo, si usaras solo un background, tampoco es necesario ponerle el "-color", con background basta:
EJEMPLO:
background: #F00;

sanxuan · #3 (**permalink**) 29/01/2011, 14:01

No hay nigún problema en usar background-image o la propiedad abreviada background en IE.
Yo estoy utilizando una página de prueba sin DTD (DOCTYPE) y aún así se muestran tanto las imágenes de fondo sin comillas como con ellas. Otras imágenes de mi ordenador, por supuesto.
Puedes validar tu CSS en http://jigsaw.w3.org/css-validator/
Yo lo he hecho con tu porción de código y no da ningún error tal y como está.
Si añades un enlace a tu página o el código HTML y CSS completo se le puede echar un vistazo.

mariomon17 · #4 (**permalink**) 29/01/2011, 17:25

A lo mejor el problema viene en el DTD, cual usas?

GAST0N · #5 (**permalink**) 29/01/2011, 17:27

tenes DOCTYPE en el html?

juanchooo12 · #6 (**permalink**) 30/01/2011, 10:23

mi codigo HTML es el siguiente:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Desarrollos Textiles</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<link href="imagenes/favicon.ico" rel="icon" type="ico"/>

<link href="imagenes/favicon.ico" rel="shortcut icon" type="ico"/>

<link href="imagenes/favicon.ico" rel="shortcut icon" type='image/x-icon'/>

<div id="wrapper">
<div id="header"><img src="imagenes/header.png" alt="banner" width="800" height="129" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="25,5,185,162" href="http://www.desarrollostextiles.com.ar" />
</map>
</div>
<div id="navbar"><img src="imagenes/navbar.png" alt="navbar" width="800" height="71" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="259,20,352,58" href="index.html" />
<area shape="rect" coords="382,21,545,58" href="productos.html" />
<area shape="rect" coords="571,21,722,56" href="contacto.html" />
<area shape="rect" coords="33,-107,185,66" href="http://www.desarrollostextiles.com.ar" />
</map>
</div>
<div id="contenido">
</div>
<div id="pie">
<p>Para ver esta web correctamente necesitas <a href="http://www.mozilla-europe.org/es/firefox/">Mozilla Firefox</a> o <a href="http://www.google.com/Chrome">Google Chrome</a></p>
</div>
</div>
</body>
</html>

juanchooo12 · #7 (**permalink**) 30/01/2011, 10:24

q deveria cambiar?

sanxuan · #8 (**permalink**) 30/01/2011, 11:51

He validado tu código en http://validator.w3.org.

Encuentra un error por no incluir el atributo alt en las etiquetas area.

He corregido ese error y parece que IE muestra bien la página. No parece haber más problema.

Lógicamente, estoy usando imágenes de mi equipo, asegúrate de que las direcciones sean correctas.

juanchooo12 · #9 (**permalink**) 31/01/2011, 12:44

Ahora subi mi pagina a internet y no se ven las imagenes del div ni el fondo lo mismo q me pasaba con IE, les dejo un link para q vean

[URL="http://www.desarrollostextiles.com.ar/index2.html"]http://www.desarrollostextiles.com.ar/index2.html[/URL]

No entiendo el problema dado que ya habia solucionado lo de IE pero ahora en mi servidor no se ve.

sanxuan · #10 (**permalink**) 31/01/2011, 13:15

Lo único que veo en la pantalla es un mensaje de "Ya estamos por abrir" sobre un fondo negro.
Si desactivo javascript aparece un enlace a otra página.
No encuentro por ninguna parte el código para mostrar otro fondo que no sea una pantalla negra.
Comprueba el index que tienes en el servidor.

mariomon17 · #11 (**permalink**) 31/01/2011, 13:33

Captura de Chrome:

ArturoGallegos · #12 (**permalink**) 31/01/2011, 13:50

viendo el css de tu sitio aparece

Código CSS:

Ver originalbody { background-image:url(../imagenes/fondo.png);
background-position:center top;
background-repeat:no-repeat;
background-color:black;
}

cámbialo por

Código CSS:

Ver originalbody { background:#000 url(../imagenes/fondo.png) no-repeat center top;}

y si aun no se muestra prueba, prueba cambiar la imagen por otra... que estés seguro IE si visualiza correctamente, lo mas probable que esta dañada la imagen porque si pones la ruta directa a la imagen no se muestra en IE

http://www.desarrollostextiles.com.a...enes/fondo.png

sanxuan · #13 (**permalink**) 31/01/2011, 15:24

Confirmo las sospechas de Ag666.
He descargado la imagen a mi equipo y la he abierto con Paint, esa birria de editor de imágenes que viene con windows. Despues de guardarla con ese programa se ve correctamente en IE. Antes no se cargaba en el navegador.
El problema parece ser el formato en el que has guardado la imagen.

El problema de antes con tu página como habrás adivinado es que no incluí el index2.html en la dirección del navegador. Disculpas por ser tan torpe.

juanchooo12 · #14 (**permalink**) 31/01/2011, 15:39

voy a probar guardarlas con otro formato

juanchooo12 · #15 (**permalink**) 31/01/2011, 15:51

Ahora me anda GRacias

mariomon17 · #16 (**permalink**) 31/01/2011, 16:48

¿Que problema tienen las imagenes .png, yo las utilizo y nunca me han dado problemas?

ArturoGallegos · #17 (**permalink**) 31/01/2011, 16:57

las imágenes png no tienen ningún problema salvo el conocido de la transparencia en IE6

lo que le paso al compañero seguramente fue al momento de exportar la imagen se daño o el formato configurado no fue el apropiado

y digo se daño porque intente abrirla con fireworks y me marco error

mariomon17 · #18 (**permalink**) 31/01/2011, 17:01

Ah, ok ok

Un saludo!