Hola amigos.
Antes que nada me presentaré un poco, ya que este es mi mensaje de "desvirgación" en el foro...
Me llamo Toni, vivo en Castellón y estoy empezando "fuerte" con esto del diseño web. He hecho mis pinitos cogiendo plantillas CSS y modificándolas por completo, pero hace poco empecé con mi primer proyecto desde cero y me he topado con los problemas que todos habremos sufrido con el dichoso IE. He estado rebuscando por el foro y no he encontrado exactamente lo que busco, por eso me he decidido a escribir aquí.
La duda me surge porque el CSS que he escrito es tan básico que no debería dar problemas, aún así IE se come imágenes, no acopla los "Divs" y hace literalmente lo que le pasa por el forro.
Aquí mi código:
Código:
body {
background: url(imagenes/fondo.png);
font: smaller Arial, Helvetica, sans-serif;
color: #000000;
}
#contenedor {
width:960px;
height:1180px;
margin-left:auto;
margin-right:auto;
}
#marge_superior {
width:960px;
height:20px;
float:left;
background-image:url(imagenes/sombra-superior.png);
margin: 0px 0px 0px 0px ;
}
#marge_inferior {
width:960px;
height:20px;
float:left;
background-image:url(imagenes/sombra-inferior.png);
margin: 0px 0px 0px 0px ;
}
#marge_esquerra {
width:40px;
height:1140px;
background-image:url(imagenes/sombra-esquerra.png);
float:left;
margin: 0px 0px 0px 0px ;
}
#marge_dreta {
width:40px;
height:1140px;
background-image:url(imagenes/sombra-dreta.png);
float:left;
}
#fulla_fondo {
width:880px;
height:1140px;
background:url(imagenes/fulla-fondo.png) repeat-x;
float:left;
}
#menu {
width:860px;
height:33px;
padding-left:20px;
padding-top:17px;
}
#cabecera {
width:880px;
height:215;
}
#navegacio{
width:870px;
height:33px;
background:url(imagenes/navegacio.png) no-repeat;
padding: 12px 0px 0px 10px;
text-decoration:none;
color:#FFFFFF;
}
#conjunt-central{
width:880px;
height:660px;
}
#conjunt-servicis{
width:660px;
height:660px;
float:left;
margin: 0px 0px 0px 0px ;
}
#pestanyes{
width:660px;
height:50px;
}
#servicis{
width:660px;
height:610px;
background-image: url(imagenes/servicis.png);
}
#conjunt-formulari-facebook{
width:220px;
height:660px;
float:right;
}
#formulari{
width: 190px; /* 220*/
height:492px; /* 577*/
padding-top:85px;
padding-left:20px;
padding-right:10px;
background-image:url(imagenes/formulari.png);
}
#facebook{
width: 220px;
height:83px;
}
#peu{
width:880px;
height:150px;
}
#mapa-web{
width:660px;
height:150px;
background-image:url(imagenes/mapa-web.png);
float:left;
}
#contacto-rapido{
width:205px;
height:145px;
padding-top:5px;
padding-left:15px;
background-image:url(imagenes/contacto-rapido.png);
float:right;
}
#contenedor-subservicis{
width:635px;
height:285px;
margin: 0px 10px 15px 15px;
padding-top:15px;
}
#subservicis{
width:210px;
height:100px;
float:left;
}
Y aquí la estructura html (sin el contenido porque aún no me deja meter links):
Código:
<body onload="MM_preloadImages('imagenes/sobre-taronja.png','imagenes/trabajos-taronja.png','imagenes/contacto-taronja.png')">
<div id="contenedor">
<div id="marge_superior"></div>
<div id="marge_esquerra"></div>
<div id="fulla_fondo">
<div id="menu">
</div>
<div id="cabecera"></div>
<div id="navegacio">Inicio</div>
<div id="conjunt-central">
<div id="conjunt-formulari-facebook">
<div id="formulari">
</div>
<div id="facebook"></div>
</div>
<div id="conjunt-servicis">
<div id="pestanyes"></div>
</div>
</div>
<div id="peu">
<div id="contacto-rapido">
</div>
<div id="mapa-web"></div>
</div>
</div>
<div id="marge_dreta"></div>
<div id="marge_inferior"></div>
</div>
</body>
Podéis ver la web en proceso en "[www].estudiomeetz[punto]com/web"
Gracias a todos.
Saludos!