Hola, hace poco que empiezo a utilizar divs enmede tablas, y ahora mismo tengo un problema, solo con IE, con Firefox no, pero claro, tiene que ir bien con todo xD, la cuestion es que un div es mas grande de lo que deve de ser, por eso mismo el fondo que es una imagen se repite por abajo y no quiero que sea mas grande de 40px, bueno, aqui os paso el codigo:
Código:
<html>
<head>
<style type="text/css">
@import url("estilo.css");
</style>
</head>
<body>
<div id="pagina">
<div id="cabecera">
</div>
<div id="menu">
<div id="botones1">
<div id="uno"><a href="#"></a></div>
<div id="dos"><a href="#"></a></div>
<div id="tres"><a href="#"></a></div>
</div>
<div id="blanco">
</div>
<div id="formularios">
<form>
<input type="text" style="margin-right:6px; width:100px; height:20px;">
<input type="password" style="width:100px; height:20px;">
</form>
</div>
<div id="boton">
<a href="#"></a>
</div>
</div>
</div>
</body>
</html>
y este el del estilo
Código:
body {
text-align:center;
margin-top:0;
background:#000000;
font-family:Arial;
}
#pagina {
width:800px;
overflow:hidden;
margin:auto;
}
#pagina #cabecera {
width:800px;
height:80px;
background-repeat:no-repeat;
background-position:left;
background-image:url(imagenes/CB.jpg);
}
#pagina #menu {
height:40px;
clear:both;
width:800px;
background-image:url(imagenes/TX1.gif);
margin-bottom:0;
}
#pagina #menu #botones1 {
width:100px;
padding-top:10;
padding-bottom:10;
text-align:center;
height:40px;
float:left;
}
#pagina #menu #botones1 #uno {
width:20px;
height:20px;
float:left;
margin:0 0 0 10;
background:url(imagenes/IC1.gif);
background-position:0 -20;
background-repeat:no-repeat;
}
#pagina #menu #botones1 #dos {
width:20px;
height:20px;
float:left;
margin:0 0 0 10;
background:url(imagenes/IC2.gif);
background-position:0 -20;
background-repeat:no-repeat;
}
#pagina #menu #botones1 #tres {
width:20px;
height:20px;
float:left;
margin:0 10 0 10;
background:url(imagenes/IC3.gif);
background-position:0 -20;
background-repeat:no-repeat;
}
#pagina #menu #botones1 #uno a {
width:20px;
height:20px;
float:left;
background:url(imagenes/IC1.gif);
background-repeat:no-repeat;
}
#pagina #menu #botones1 #dos a {
width:20px;
height:20px;
float:left;
background:url(imagenes/IC2.gif);
background-repeat:no-repeat;
}
#pagina #menu #botones1 #tres a {
width:20px;
height:20px;
float:left;
background:url(imagenes/IC3.gif);
background-repeat:no-repeat;
}
#pagina #menu #botones1 #uno a:hover {
background-image:none;
}
#pagina #menu #botones1 #dos a:hover {
background-image:none;
}
#pagina #menu #botones1 #tres a:hover {
background-image:none;
}
#pagina #menu #blanco {
width:430px;
background-image:url(imagenes/TX2.gif);
background-repeat:repeat-x;
height:40px;
float:left;
}
#pagina #menu #formularios {
width:230px;
height:40px;
padding:10 0 10 0;
float:left;
background-image:url(imagenes/TX2.gif);
background-repeat:repeat-x;
}
#pagina #menu #boton {
width:20px;
height:20px;
margin:10 10 10 10;
float:left;
background-repeat:no-repeat;
background:url(imagenes/IC4.gif);
background-position:0 -20;
}
#pagina #menu #boton a {
width:20px;
height:20px;
float:left;
background-repeat:no-repeat;
background:url(imagenes/IC4.gif);
background-position:0 0;
}
#pagina #menu #boton a:hover {
background-image:none;
}
Espero que me puedan ayudar