Fondo capa desaparece al meter imagen de fondo en capa contenedor (en IE)

aep147 · #1 (**permalink**) 04/10/2011, 09:44

Hola, tengo una capa contenedor con otra capa dentro a la que le he puesto esquinas redondeadas y un color de fondo con css. Esto funciona en todos los navegadores. El problema es que necesito meter una imagen de fondo en la capa contenedor y al hacerlo, la capa contenido pierde el color de fondo, las esquinas... ¡todo!
Estoy empezando con esto y no tengo idea de porque falla. ¿Alguien sabe porque ocurre esto? he buscado en foros y demás pero no encuentro nada.
Muchas gracias.

html:

<div id="fondo">
<div id="cuadrado">
<h1>prueba</h1>
</div>
</div>

css:

#contenido{
width: 200px;
height: 200px;
background: #ffbf63;
border: 1px solid #d17b00;
padding: 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(./script/PIE.htc);
margin: 0 auto;

}
#contenedor{
width: 300px;
height: 300px;
background-image: url(../../images/fondoForm.jpg); /* al añadir esto surge el problema*/
}

aep147 · #2 (**permalink**) 04/10/2011, 09:45

Lo siento copie mal el html:

html:

<div id="contenedor">
<div id="contenido">
<h1>prueba</h1>
</div>
</div>

emprear · #3 (**permalink**) 04/10/2011, 10:01

A mi tu código no me genera el error

por las dudas este es el html

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
#contenido{
 width: 200px;
 height: 200px;
 background: #ffbf63;
 border: 1px solid #d17b00;
 padding: 5px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 behavior: url(PIE.htc);
 margin: 0 auto;
}
 #contenedor{
 width: 300px;
 height: 300px;
 background-image: url(liberatumovil.png); /* al añadir esto surge el problema*/
 } 
 
/*]]>*/
</style>
</head>
<body>
 
 
<div id="contenedor">
 <div id="contenido">
 <h1>prueba</h1>
 </div>
 </div>
 
 </body>
</html>

Asegurate que tu pie.htc esté recibiendo el mime correcto, podés hacerlo con .htaccess

Código Apache:

Ver originalAddType text/x-component htc

o usando la script pie.php
Testeado en Chrome , FF, IE 9

Saludos