Compatibilidad de mi pagina con distintos navegadores

[tupy]

Buenas a todos,

pongo el post aquí porque el problema está evidentemente en el CSS. Paso a explicaros mi problema. Resulta que he probado a visualizar mi web en varios navegadores, y los resultados han sido bastante dispares. Lógicamente, si estoy aquí es porque no se ve correctamente en todos ellos.

En Firefox 3, Firefox 3.5 y Chrome se ve perfecto, sin embargo, tanto en IE 6 como en Opera 9.64, no se ve bien. Os dejo el link de la web y haber si podeis ayudarme con el CSS, imagino que me habré liado a la hora de poner las posiciones absolutas/relativas.

http://costablancamodas.hostoi.com/

Un saludo!

P.D. La web no está completamente terminada, pero se está acercando a una versión final y funcional. Si alguno teneis un momento, me gustaría que opinarais sobre la misma, en relación a la vista estética.

P.D.2 Desde Linux(Firefox), se ve bien también. Lo que he comentado en el post es referente a Windows XP con una resolución de 1280x800.

[tupy]

Se me ha ocurrido colgaros el CSS, para que no tengais que mirar el codigo HTML y buscar el archivo css despues.

Código:

@charset "utf-8";

body {
	background-color: #1a3265;
	margin: 0; padding: 0;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	}

.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 15px;
font-size: 1px;
}


/*
	HEADERS
*/

#h3 {
	font-family: Alako;
	}

#container {
	height: 100%;
	width: 100%;
    }

#container h1{
	width: 300px;
	height: 127px;
	margin: 0 0 0 0;
	text-indent: -9999em;
    }

#container h2 {
	font-size: 16px;
    }

.recuadro h2 {
	background: url(images/borde_azul_tl.gif) no-repeat top left;
	color: white;
	text-align: left;
	font-size: 16px;
	padding: 2.5% 9%;
	margin: 0% 0 0% 0;
    }

#cuerpo_principal h2 {
	background: url(images/borde_azul_tl.gif) no-repeat top left;
	color: white;
	text-align: left;
	font-size: 16px;
	padding: 0.8% 3% 0.7% 3%;
	margin: 0% 0% 0% 0%;
    }

/*
	RESTO DE ELEMENTOS
*/

pre {
	font-size: 12px;
	}

.cabecera{
	background: url(images/borde_azul_tr.gif) no-repeat top right;
	}

.cab2 {
	background-color: #0097ca;
	}

#navcont a {
	font-size: 18px;
	font-family: sans-serif;
	text-decoration: none;
    }

#superlogo {
	background: url(images/motivoAbstracto.jpg) repeat-x;
	background-color: #4682B4;
	margin: 0 0 5% 0;
    }

#logo {
	background: url(images/logo-CostaBlancaModas-ampliado2-TRANSPARENTE.gif) no-repeat;
	width: 561px;
	height: 127px;
	left: 0%;
	position: relative;
    }

#motivo {
	/*background: url(images/motivoAbstracto.jpg) no-repeat;*/
	width: 500px;
	height: 127px;
	left: 60%;
	top: 0%;
	position: absolute;
    }

#navcont {
	margin: 0% 8% 5% 8%;
    }

#navcont a:link, #navcont a:hover, #navcont a:active, #navcont a:visited {
    color: black;
    }

#menu{
	text-align: left;
    }

#content_main {
	margin: 0% 0% 10% 0%;
	color: black;
	height: 100%;
    }

.recuadro {
	position: absolute;
	left: 8%;
	background-color: #ffffff;
	width: 18%;
	text-align: center;
    }

.categorias {
	border-bottom: 2px solid #696969;
	padding: 4px 7px 0px 0px;
	margin: -0.4% 0% 0% 0%;
	}

#categoriasRecuadro .categorias {
	border-bottom: none;
	}

.categorias a:link, .categorias a:visited, .categorias a:hover, .categorias a:active {
	color: black;
	font-weight: bold;
	font-size: 12px;
	font-family: sans-serif;
	}

#login .categorias a:link, #login .categorias a:visited, #login .categorias a:hover, #login .categorias a:active {
	color: black;
	font-size: 10px;
	font-family: sans-serif;
	}

.categorias li {
	list-style-type: none;
	left: -15%;
	position: relative;
    }

#contenidoCesta {
	text-align: center;
	}

.recuadro .rbbot div { background: url(images/borde_blanco_bl.gif) no-repeat bottom left; }
.recuadro .rbbot { background: url(images/borde_blanco_br.gif) no-repeat bottom right; }

#cuerpo_principal a:link, #cuerpo_principal a:hover, #cuerpo_principal a:active, #cuerpo_principal a:visited {
        color: black;
        }

#cuerpo_principal .rbbot { background: url(images/borde_blanco_br.gif) no-repeat bottom right; }
#cuerpo_principal .rbbot div { background: url(images/borde_blanco_bl.gif) no-repeat bottom left; }

#cuerpo_principal {
	position: absolute;
	left: 30%;
	background-color: #ffffff;
	width: 60%;
    }

#cuerpo_principal p {
	left: 4%;
	position: relative;
	}

#cuerpo_principal .cuerpo, #cuerpo_principal #opciones {	
	padding: 4px 10px 5px 0px;
	margin: -0.5% 0% 0% 0%;
	}

.cuerpo, #opciones {
	background: url(images/motivoAbstracto2.png) no-repeat bottom right;
	}

.cuerpo ul {
	list-style: none;
	}

#opciones {
	margin: 0 0 0% 5%;
	height: auto;
    }

#opciones #formulario {
	margin: 0 0 0 5%;
	}

.cuerpo #formularioCarro {
	width: 70%;
	}

.cuerpo #formularioCarro .ArtPar {
	background-color: #87CEEB;
	}

.cuerpo #formularioCarro .ArtImpar {
	background-color: #778899;
	}

.cuerpo #form1 {
	margin: 0 0 0 5%;
	}

.cuerpo p {
	width: 75%;
	text-align: justify;
	}

#categorias #categoria1 {
	background-color: #6692D4;
	}

#categorias {
	font-weight: bold;
	width: 90%;
	}

#categorias a {
	text-decoration: none;
	}

#categorias li {
	border-bottom: 1px solid #696969;
	border-right: 1px solid #696969;
	border-left: 1px solid #696969;
	border-top: 1px solid #696969;
	}

#categorias a:hover {
	text-decoration: underline;
	}

#categorias #categoria2 {
	background-color: #B0C4DE;
	}

#productos li {
	margin: 2% 0;
	}

#catalogo img, #SuperVentas img {
	max-height: 300px;
	max-width: 300px;
	}

#mapa {
	margin: 2% 0% 0 2%;
	}

#mapa iframe {
	width: 98%;
	height: 500px;
	}

#validacionCampos {
	color: red;
	font-size: 14px;
	font-weight: bold;
	}

.NumComentario {
	font-size: 20px;
	color: black;
	float: right;
	font-family: sans-serif;
	margin: -1% 1% 0% 0;
	width: auto;
	}

.comentario1 {
	background-color: #887d59;
	color: white;
	width: 90%;
	font-weight: bold;
	}

.comentario2 {
	background-color: #887d59;;
	color: white;
	width: 90%;
	font-weight: bold;
	}

#comentarios p {
	margin: 0 0 0 3%;
	width: 90%;
	}

.cuerpo #comentarios {
	margin: 0 0 0 4%;
	}

#comentarios a {
	margin: 0 0 0 62%;
	}

.cuerpo #formulario {
	margin: 0 0 0 4%;
	}

#comentarios .comentario2 .rbbot div { background: url(images/borde_marron_bl.gif) no-repeat bottom left; }
#comentarios .comentario2 .rbbot { background: url(images/borde_marron_br.gif) no-repeat bottom right; }

#comentarios .comentario1 .rbbot div { background: url(images/borde_marron_bl.gif) no-repeat bottom left; }
#comentarios .comentario1 .rbbot { background: url(images/borde_marron_br.gif) no-repeat bottom right; }

#comentarios .comentario2 .rbtop div { background: url(images/borde_marron_tl.gif) no-repeat top left; }
#comentarios .comentario2 .rbtop { background: url(images/borde_marron_tr.gif) no-repeat top right; }

#comentarios .comentario1 .rbtop div { background: url(images/borde_marron_tl.gif) no-repeat top left; }
#comentarios .comentario1 .rbtop { background: url(images/borde_marron_tr.gif) no-repeat top right; }


/***************************************************************************
		    PIE DE P�GINA
***************************************************************************/

#footer {
	margin: 5% 0 0 0;
	position: absolute;
	text-align: center;
	width: 100%;
	left: -10%;
	top: 100%;
	color: white;
    }

#copyright {
	overflow: hidden;
	font-weight:bold;
	}

#footer .rbbot div { 
        /*background: url(images/copyright-bl.gif) no-repeat bottom left;*/
	padding: 0% 0 1% 0;
        }

#footer .rbbot { 
        /*background: url(images/copyright-br.gif) no-repeat bottom right;*/
	padding: 0% 0 1% 0;
        }

[tupy]

He conseguido mejorar bastante la vista, pero aún no logro rematar. Resulta, que tengo un menú a la izquierda, que debería mostrarse tal que así:

http://img117.imageshack.us/i/menucbm.jpg/

Pues eso no se muestra así, si entrais a la web del link, vereis que ahora mismo se muestra como si no tuviera contenido. De hecho, no lo tiene, tiene varios divs dentro, pero dentro de esos divs, debería haber más código proporcionado por unas funciones PHP. El problema está en que si hago eso, se distorsiona TODO. A qué podria ser debido esto? Si el código va perfecto, bueno, casi...pero se va acercando...

[kseso?]

Si quieres un menú con opciones desplegables probado en hasta en ie6 , sólo tienes que pasar por las faq´s de css (aquí en el foro) y ver cuáles de todos los realizados por Mikmoro concuerda más con tus necesidades. Y en base a él, realizar las modificaciones oportunas. Así, de paso, posiblemente veas qué te falta en tus códigos.

Un saludo

[tupy]

No es un menú desplegable lo que tengo implementado...de todas formas, lo tengo casi solucionado.

Resulta, que el firefox, a pesar de no tener el código XHTML válido, interpreta cosas diferentes al IE, que si no tiene cierto código XHTML válido, me mostraba cosas raras. Ahora ya me muestra correctamente el menú de la izquierda, y me falta poco para que muestre el resto correctamente.

Es decir, estoy viendo, que corrigiendo fallos que tenía en el código XHTML, al corregirlos para hacer la web XHTML válida, el IE empieza a mostrarme cosas correctamente. No todas, pues hay cosas, como por ej. el max-height o min-height, etc... que son cosa de que NO acepta ciertas propiedades CSS.


Un saludo a todos.

[Carina Deglaue]

Hola, veo que tenias un problema parecido al mio.
Tengo una web que la veo perfecta en explorer pero en firefox y en safari la imagen central me la saca del contenedor, sabes porque puede ser? muchas gracias
Carina

[tupy]

Eso no es exactamente el mismo error, firefox y safari SI cumplen los estándares, y explorer no, por lo tanto dudo mucho que sea lo mismo...

De todas formas, postea código y alomejor te podemos ayudar.

Un saludo!

[pi_imagine]

Tengo el mismo problema qeu tu con el explorer...
:(

La web que estoy teniendo problemas es
www.almadrabateatro.com/prueba

Ese problema lo solucionaste en hacer dos hojas de estilo?
una para explorer y otra para firefox??
el resto de navegadores me da un poco igual,
pero quiero optimizarla en estos dos.

Gracias de antemano....
Pilar