Tenías razón la mezcla de porcentajes con píxels era lo que me estaba descolocando todo.
Después de pegarle una buena limpieza he conseguido que todo este ok, el único problema que he arreglado de forma quizás un poco chapucera es que cuando había muchos resultados (películas) los margenes automáticos de la izquierda y la derecha encogen 8 píxels, al menos en Firefox 3, en Explorer 6 no me pasaba, lo he arreglado poniendo margenes fijos del tamaño que quería pero claro esto está bien para una resolución de 1024x768 para resoluciones mayores o menores no se que tal quedará.
Este es el fallo:
http://i524.photobucket.com/albums/cc328/s7474/06.jpg
http://i524.photobucket.com/albums/cc328/s7474/07.jpg
Tengo otra duda, ya bastante tonta que es si usar un <br/> para que usuario y la caja de texto del formulario no esten en la misma línea es poco accesible y/o usable. Lo digo porque ahora mismo el formulario no está centrado del todo y si lo centro la única forma que se me ocurre de separarlos es un br.
Dejo la hoja de estilos.
Código HTML:
@charset "utf-8";
/* CSS Document */
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: normal;
margin: 0px;
/*background-color:#f9f8eb;*/
background-color:#FFFFFF;
background-color:#ddead2;
}
.titulo{
text-align:center;
color: #000000;
background-color:#faf8c9;
margin-top:0px;
margin-bottom: 0px;
/*margin-right: auto;
margin-left: auto;*/
margin-right: 106px;
margin-left: 106px;
margin-right: 106px;
margin-left: 106px;
background-color:#FFFFFF;
width:816px;
}
.centrar{
text-align:center;
margin-bottom:0px;
}
.menu3{
width:656px;
height:394px;
margin: 0px;
padding:0px;
background-image:url(caratulas/fondo.jpg);
float:left;
}
.menu31{
margin: 0px;
padding:0px;
float:left;
background-color:#FFFFFF;
width:656px;
height:auto;
}
.menu4{
float:left;
color:#000000;
text-align:center;
font-size:13px;
background-color:#CCCCCC;
font-weight:bold;
background-color:#add18f;
width:160px;
height:auto;
}
.menu5{
float:left;
color::#6dbb2c;
color:#FFFFFF;
text-align:center;
font-size:13px;
background-color:#FFFFFF;
font-weight:bold;
width:32px;
height:auto;
background-color:#000000;
}
div.menu5 a{
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
}
div.menu5 a:hover{
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
}
div.menu5 a:link{
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
}
.fondonegro{
margin-top: 0px;
margin-bottom: 0px;
/*margin-left: auto;
margin-right: auto;*/
margin-left: 106px;
margin-right: 106px;
text-align:center;
background-color: #000000;
width:816px;
}
.fondonegro2{
margin-top: 0px;
margin-bottom: 0px;
/*margin-right: auto;
margin-left: auto;*/
margin-right: 106px;
margin-left: 106px;
text-align:center;
padding-top: 5px;
padding-bottom: 5px;
background-color: #FFFFFF;
font-weight:bold;
font-size:15px;
color:#5fb914;
width:816px;
}
div.fondonegro2 a{
font-size:15px;
color:#000000;
text-decoration:none;
font-weight:bold;
}
div.fondonegro2 a:hover{
color:#000000;
text-decoration:none;
font-weight:bold;
}
div.fondonegro2 a:link{
font-size:15px;
color:#000000;
text-decoration:none;
font-weight:bold;
}
.fondoverde{
width:816px;
margin-top: 0px;
margin-bottom: 0px;
/*margin-right: auto;
margin-left: auto;*/
margin-right: 106px;
margin-left: 106px;
text-align:center;
background-color: #add18f;
min-height:347px;
height: auto!important;
height: 347px;
}
.decoracion{
background-image: url(caratulas/tira.gif);
background-repeat: repeat-x;
/*margin-left: auto;
margin-right: auto;*/
margin-left: 106px;
margin-right: 106px;
height:8px;
width:816px;
}
.decoracion2{
background-image: url(caratulas/tira.gif);
background-repeat: repeat-x;
width:160px;
margin:0px;
height:8px;
}
.decoracion3{
background-image: url(caratulas/tira.gif);
background-repeat: repeat-x;
width:160px;
margin:0px;
height:8px;
float:left;
}
.busqueda{
background-color: #000000;
float:left;
padding:5px;
}
.negro{
float:left;
background-color:#000000;
width:59px;
height:26px;
}
.negro2{
float:left;
background-color:#000000;
width:6px;
height:26px;
}
.decadas{
color:#000000;
float:left;
font-size:16px;
font-weight:bold;
padding-left: 5px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
border:solid 2px #000000;
background-color:#FFFFFF;
}
.genero{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
float:left;
text-transform: uppercase;
padding:1px;
background-color:#FFFFFF;
border:solid 2px #000000;
font-weight:bold;
margin-top:2px;
}
.genero2{
float:left;
}
div.genero:hover{
color: #FF0000;
text-decoration: none;
}
div.genero a:link{
color: #000000;
text-decoration: none;
}
div.genero a:visited{
color: #000000;
text-decoration: none;
}
div.genero a:hover{
color: #FF0000;
text-decoration: none;
}
.centrar{
text-align:center;
}
.fondovertical{
background-image:url(caratulas/fndv.gif);
float:left;
}
.formulario{
border-color:#000000;
margin-left:8px;
color:#000000;
padding-top:2px;
padding-bottom:2px;
font-weight:bold;
text-align:center;
}
.espacio{
clear:both;
}
.espacio2{
float:left;
clear:both;
}
.fila{
text-align:left;
margin:0px;
float:left;
border-top: 1px gray solid;
padding-top:5px;
padding-left:5px;
width:651px;
}
.lista1{
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:5px;
float:left;
width:56px;
}
.lista2{
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:5px;
float:left;
}
.titular{
text-align:center;
margin-top:0px;
margin-bottom:0px;
}
.titular2 ul li{
color:#000000;
font-size:20px;
}
.lista{
float:left;
margin:0px;
padding-left:5px;
padding-right:0px;
width:588px;
}
.lista ul{
width:588px;
text-align:left;
margin:0px;
padding:0px;
}
.lista ul li{
width:588px;
text-align:left;
list-style:none;
}
.listadetalle{
float:left;
margin:0px;
padding-left:5px;
padding-right:0px;
width:482px;
}
.listadetalle ul{
width:482px;
text-align:left;
margin:0px;
padding:0px;
}
.listadetalle ul li{
width:482px;
text-align:left;
list-style:none;
}
.imagen{
width:56px;
height:83px;
border:1px solid #000000;
}
.imagen2{
width:162px;
height:240px;
border:1px solid #000000;
float:left;
}
.negrita{
font-weight:bold;
}
.verde{
color:#64c216;
font-weight:bold;
}
.frm{
float:left;
width:auto;
height:auto;
}
.blanco{
background-color:#FFFFFF;
min-height:348px;
width:656px;
}
.fondoblanco{
float:left;
width:160px;
}
.lista2{
list-style:none;
}