Peuqeños fallos con Mozilla Firefox

[Borjimante]

Hola, estoy creando una pequeña web, es la siguiente:

http://www.antera-solutions.com/weboss/

Los problemas son:

1- La imagen de cabecera que se supone que es de fondo nos e muestra entera.

2- En MF el border 1px no coge nada de contenido y tenia que coger todo

3- En IE cuando pulso sobre un boton del menu sale 1px abajo que separa la imagen del menu mientras que con MF no pasa eso.

Código:

<div id="contenedor">
<div id="header">
<div id="logo"><img src="img/logo-1.jpg" alt="" width="300" height="100" /></div>
<div id="logueo">Bienvenido invitado <a href="#" class="logueo">Logueate</a> o <a href="#" class="logueo">Registrate</a></div>
</div>

<div id="secciones">
<ul class="menu">
<li><a href="#" class="sec">INICIO</a></li>
<li><a href="#" class="sec">HERRAMIENTAS</a></li>
<li><a href="#" class="sec">UTILIDADES</a></li>
<li><a href="#" class="sec">TUTORIALES</a></li>
<li><a href="#" class="sec">BLOG</a></li>
<li><a href="#" class="sec">FORO</a></li>
<li><a href="#" class="sec">CONTACTA</a></li>
</ul>
</div>
</div>

style.css:

#header {
margin: auto;
padding: 0px;
width: 700px;
text-align: left;
background-image: url(img/cabecera.jpg);
background-repeat: repeat-y;
display: block;
margin-bottom: 1px;
}

#logo {
margin: auto;
padding: 0px;
width: auto;
text-align: left;
float: left;
}

#logueo {
margin: auto;
padding-top: 10px;
padding-right: 15px;
width: auto;
text-align: right;
float: right;
font-family: Arial;
font-size: 0.7em;
color: #FFFFFF;
background-image: url(img/cabecera.jpg);
background-repeat: repeat;
}

a.logueo{
text-decoration: none;
color: #FFFFFF;
}

a.logueo:hover{
text-decoration: underline;
color: #FFFFFF;
}

#secciones {
border-bottom: 5px solid #666666;
border-top: 5px solid #666666;
width: 700px;
float: left;
background-color: #888888;
height: auto;
}

a.sec{
background-color: #888888;
font-size: 0.7em;
font-family: Arial;
text-align: center;
display: inline;
color: #FFFFFF;
text-decoration: none;
border-right: 1px solid #FFFFFF;
float: left;
display: inline;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
}

a.sec:hover{
background-color: #58A9C0;
font-size: 0.7em;
border-right: 1px solid #FFFFFF;
font-family: Arial;
text-align: center;
color: #FFFFFF;
text-decoration: none;
display: inline;
float: left;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
}

.menu {
list-style: none;
display: inline;
}

.menu li {
list-style: none;
display: inline;
}

Haber si me hechais una mano

Un saludo

[Borjimante]

Ya he solucionado parte de los fallos, pero tengo otros son:

1- La cabecera que no se porque no me repite la imagen de fondo con MF

2- Cuando pulso sobre la imagen de abajo que cambia de color, sube 1px hacia arriba y no se por que.

3- No se por que debajo de la imagen en FLASH deja 2pxx de margin cuando no se lo he dado yo.

http://www.antera-solutions.com/weboss/

Ayuda plis

[Tigervlc]

Tendrías que poner el CSS de los bloques bajo-header y su hijo bajo-header-izq para ver qué puede pasar con los pixels de más debajo del elemento flash.

Tienes que poner repeat-x en vez de repeat-y

Yo el borde lo veo bien en MF.

Lo de los botones del menu en IE tampoco veo que pase. Supongo que lo habrás solucionado ya.

[Borjimante]

Bajo header (entero):

#bajo-header{
width: 700px;
padding: 0px;
margin: auto;
margin: 0px;
}

#bajo-header-izq{
width: 490px;
margin-right: 1px;
float: left;
}

#bajo-header-der{
width: 206px;
margin-right: 1px;
float: right;
height: 90px;
}

#bajo-header-der-img{
float: left;
margin: 0px;
display: block;
width: 20px;
height: 90px;
padding-top: 10px;
background-color: #888888;
color: #FFFFFF;
font-family: Tahoma;
font-size: 0.8em;
font-weight: bold;
}

#bajo-header-der-texto{
float: left;
padding-top: 5px;
background-color: #FFFFFFF;
color: #000000;
text-align: left;
padding-left: 5px;
font-family: Tahoma;
font-size: 0.7em;
height: 85px;
width: 181px;
}

.table-1{
width: 181px;
}

.table-2{
width: 40px;
}

.formu{
font-family: Tahoma;
font-size: 1em;
color: #000000;
}

.boton-1{
padding: 2px;
color: #000000;
background-color: #FFFFFF;
border: 1px solid #000000;
font-family: Tahoma;
font-size: 1em;
}

la imagen la pongo el repeat-x y sigue igual

y los botones no he retocado nada y sigue igual fiajte bien toca sobre la imagen y despues sobre los botones veras el efecto