Hola muchachos, tengo un pequeño problema con un div de 100px x 100px verde que no puedo visualizar en chrome o mozilla.
Cuando le pongo el estilo en mi css no aparece en el browser, pero si le pongo el estilo directamente con el tag style, si aparece en el browser.
Lo cual es muy extraño ya que el resto de los divs de mi pagina funcionan correctamente, pero nada de nada con ese nuevo que intento agregar. Estoy trabajando en DW y en la parte de diseño si se vé. Le he estado dando desde ayer mil vueltas al asunto y no me explico, capaz es una tontería pero no lo pillo :s.
Si alguien me puede ayudar se lo agradecería mucho, debe ser una tontería pero debe ser una novatada, supongo :I.
Este es mi html (el div problematico se llama cajablanca):
Código HTML:
<!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 href="assets/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pasapalos y postres para fiestas <meta name="country" content="ve" />
<meta name="language" content="es-ES" />
<meta name="description" content="Tienda online de postres venezolana especializada en dulces de chocolate. Ideal para festejos." />
<meta name="keywords" content="postres chocolate trufas brigadeiras fiestas pasapalos cumpleaños graduaciones eventos" />
BRIGADEIRAS</title>
<style type="text/css">
</style>
<link href="css/estilobase.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<!-- div base de id page.-->
<div id="page">
<div id="caja_header"> <img src="assets/brig_twitter.png" width="68" height="77" alt="Logo de acceso a twitter" /> <a href="http://www.paginainexistente.com/"><img src="assets/brig_facebook.png" width="68" height="77" alt="Logo de acceso a Facebook" /></a></div>
<div id="caja_barracolor"></div>
<div id="caja_menu">
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Inicio</a> </li>
<li><a href="#">Nosotros</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Productos</a>
<ul>
<li><a href="#">Al Mayor</a> </li>
<li><a href="#">Al Detal</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Servicios</a>
<ul>
<li><a href="#">Servicio a Domicilio</a></li>
<li><a href="#">Fiestas</a></li>
<li><a class="diferente" href="#">Reuniones</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
<div id="caja_contenido">
<div id="caja_contenido_top">
<!--Este es el div problemático-->
<div id="cajablanca" ></div>
</div>
<div id="caja_barracolor2" ></div>
<div id="caja_contenido_bottom"></div>
</div>
<div id="caja_footer"></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
y este es mi css
Código HTML:
@charset "utf-8";
/*-----ID-----*/
#page {
background-color: #0F0;
width: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1366px;
min-width: 1024px;
}
#caja_header {
background-color: #fff;
height: 100px;
width: 100%;
float: left;
background-repeat: no-repeat;
background-image: url(../assets/logo.gif);
background-position: 10em;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #F3D9D8;
border-top-width: 100%;
border-right-width: 100%;
border-bottom-width: 100%;
border-left-width: 100%;
border-right-color: #F3D9D8;
border-bottom-color: #F3D9D8;
border-left-color: #F3D9D8;
}
#caja_header img {
float:right;
margin: 20px;
}
#caja_barracolor {
background: #f3d9d8; /* Old browsers */
background: -moz-linear-gradient(left, #f3d9d8 0%, #f6c894 49%, #f6c894 51%, #f3821c 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f3d9d8), color-stop(49%,#f6c894), color-stop(51%,#f6c894), color-stop(99%,#f3821c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #f3d9d8 0%,#f6c894 49%,#f6c894 51%,#f3821c 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #f3d9d8 0%,#f6c894 49%,#f6c894 51%,#f3821c 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #f3d9d8 0%,#f6c894 49%,#f6c894 51%,#f3821c 99%); /* IE10+ */
background: linear-gradient(to right, #f3d9d8 0%,#f6c894 49%,#f6c894 51%,#f3821c 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3d9d8', endColorstr='#f3821c',GradientType=1 ); /* IE6-9 */
height: 7px;
width: 100%;
float: left;
background-repeat: no-repeat;
}
#caja_menu {
background-color: #F3D8D6;
width: 100%;
float: right;
clear: none;
margin-right: auto;
margin-left: auto;
}
#menu {
float: right;
background-color: #FFF;
}
#caja_footer {
background-color: #3e2737;
height: 85px;
width: 100%;
float: left;
}
#caja_contenido {
background: #f3b3b1; /* Old browsers */
background: -moz-linear-gradient(top, #f3b3b1 3%, #efccca 48%, #ede1e1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#f3b3b1), color-stop(48%,#efccca), color-stop(100%,#ede1e1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f3b3b1 3%,#efccca 48%,#ede1e1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f3b3b1 3%,#efccca 48%,#ede1e1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f3b3b1 3%,#efccca 48%,#ede1e1 100%); /* IE10+ */
background: linear-gradient(to bottom, #f3b3b1 3%,#efccca 48%,#ede1e1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3b3b1', endColorstr='#ede1e1',GradientType=0 ); /* IE6-9 */
height: 700px;
width: 100%;
float: left;
background-repeat: no-repeat;
}
#caja_contenido_top {
height: 500px;
width: 100%;
float: left;
position:relative;
}
#caja_contenido_bottom {
height: 193px;
width: 100%;
float: left;
background-repeat: no-repeat;
}
#caja_barracolor2 {
background: #f39c4f; /* Old browsers */
background: -moz-linear-gradient(left, #f39c4f 0%, #f5e2ba 59%, #f5e2ba 59%, #f3e1e1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f39c4f), color-stop(59%,#f5e2ba), color-stop(59%,#f5e2ba), color-stop(100%,#f3e1e1)); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f39c4f', endColorstr='#f3e1e1',GradientType=1 ); /* IE6-9 */
height: 7px;
width: 100%;
float: left;
background-repeat: no-repeat;
background-color: linear-gradient(;
background-position: right bottom;
clear: none;
line-height: normal;
text-decoration: overline;
}
#cajablanca {
background-color: #3FC;
margin: 10px;
float: left;
height: 10%;
width: 10%;
position: absolute;}