Problemas CSS en Firefox

[dariosmm]

Este estilo me da problemas en Firefox, sin embargo en Internet Explorer se ve bien.

Podéis ver el desajuste en http://mafero.no-ip.org/dario/servicios_eng.htm
abridlo con Firefox y veréis la superposición vertical.

¿Cómo lo arreglo?

Gracias. Aquí abajo está el código CSS (la de los contenedores que fallan)

* CSS Document */

.contenedor
{
width:780px;
height:550px;
margin:0px auto 0px auto;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
}

.cabecera
{
width:780px;
height:68px;
background-color:#FFFFFF;
}

.contenedor_interior
{
width:780px;
height:380px;
margin:0px auto 0px auto;
background-color:#FFFFFF;
}

.submenu
{
width:140px;
height:350px;
float:left;
position:relative;
margin:10px 0px 0px 10px;
}

.contenidos
{
width:610px;
height:350px;
float:right;
position:relative;
margin:0px 0px 0px 10px;
}


.menu
{
width:780px;
height:49px;
background-color:#FFFFFF;

}

[dariosmm]

Por cierto, está hecho con DreamWeaver y me da varios errores del tipo

No se admite la propiedad CSS height [Netscape Navigator 4.0]

El valor 'auto' no está admitido por la propiedad CSS margin [Netscape Navigator 4.0]

La propiedad width no debería utilizarse en elementos en línea ni elementos reemplazados, ya que podrían producirse problemas de superposición de contenido o de saltos de línea adicionales. La propiedad width no se aplica a las dimensiones de campo de formulario o de imagen. [Netscape Navigator 4.0]

y un largo etc...

[icont]

Te recomiendo que mientras desarrolla tu pagina lo hagas en firefox y no en IE.
Ademas instalate un complemento de firefox que se llama firebug, que es my util para detectar los errores

[Mikmoro]

Hola, dariosmm.

Pues si te fijas, tienes dos selectores (contenedor_interior y contenidos), a los que les estás limitando la altura, con 380 y 350px repectivamente, y eso es exactamente lo que está interpretando FF.

Aplica estos cambios en tu css (copia y pega este código), que hace que se vea muy similar en IE6 y FF, y empieza a ajustar desde ahí:

/* CSS Document */

.contenedor {
width:780px;
margin:0px auto 0px auto;
border:1px solid #CCCCCC;
background-color:#FFFFFF;
}
.cabecera {
width:780px;
height:68px;
background-color:#FFFFFF;
}
.contenedor_interior {
width:780px;
margin:0px auto 0px auto;
background-color:#FFFFFF;
}
.submenu {
width:140px;
height:350px;
float:left;
position:relative;
margin:10px 0px 0px 10px;
}
.contenidos {
width:610px;
position:relative;
margin:50px 0px 0px 160px!important;
margin-top:0px;
}
.menu {
width:780px;
height:49px;
background-color:#FFFFFF;
}
.pie {
width:760px;
height:25px;
margin:2px auto 10px auto;
border:1px solid #CCCCCC;
background-color:#F7F7F7;
padding:9px 0px 5px 0px;
}
h5 {
color:#3300FF;
font-size:11px;
font-style:normal;
font-family:Arial, Helvetica, sans-serif;
}
li {
list-style-type:disc;
line-height:normal;
}
textos {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
a:link {
color:#6699FF;
font:Arial;
font-size:12px;
}
a:hover {
color:#3300FF;
}
a:visited {
color:#0033CC;
text-decoration:none;
font:Arial;
font-size:12px;
}

A ver qué tal.

Mikel.

[dariosmm]

Hola Mikel,

he probado tu código y ha mejorado algo, pero no del todo.

En algunas páginas ahora se ve bien, pero en otras se descuadra (la imagen izquierda se superpone por abajo con el pie de página, como por ejemplo en http://mafero.no-ip.org/dario/mafero_es.htm).

Y el problema más importante es que en la 1ª página (http://mafero.no-ip.org/dario/index.htm) sigue sin verse el menú superior, con lo cual no se puede acceder al resto de la web.

Estoy seguro que es cosa de la hoja CSS, pero no sé dónde tocar... Qué puedo hacer????

[nedrek]

Tu CSS contiene los errores que anteriores post te han descrito.

Firefox interpreta correctamente el CSS

Son errores en la interpretación de Internet Explorer los que hacen que tu web se vea "bien".

Como ya se ha comentado, deberías programar tu CSS para Firefox u otro navegador que respete los estándares, como Opera o Safari, y después arreglar los errores de IE.


Un saludo.