Foros del Web » Creando para Internet » CSS »

Compatibilidad de mi pagina con distintos navegadores

Estas en el tema de Compatibilidad de mi pagina con distintos navegadores en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/07/2009, 07:37
 
Fecha de Ingreso: febrero-2009
Mensajes: 132
Antigüedad: 8 años, 10 meses
Puntos: 2
Compatibilidad de mi pagina con distintos navegadores

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.

Última edición por tupy; 07/07/2009 a las 07:42
  #2 (permalink)  
Antiguo 07/07/2009, 07:59
 
Fecha de Ingreso: febrero-2009
Mensajes: 132
Antigüedad: 8 años, 10 meses
Puntos: 2
Respuesta: Compatibilidad de mi pagina con distintos navegadores

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;
        }
  #3 (permalink)  
Antiguo 07/07/2009, 09:24
 
Fecha de Ingreso: febrero-2009
Mensajes: 132
Antigüedad: 8 años, 10 meses
Puntos: 2
Respuesta: Compatibilidad de mi pagina con distintos navegadores

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...
  #4 (permalink)  
Antiguo 07/07/2009, 09:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Compatibilidad de mi pagina con distintos navegadores

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 07/07/2009, 10:06
 
Fecha de Ingreso: febrero-2009
Mensajes: 132
Antigüedad: 8 años, 10 meses
Puntos: 2
Respuesta: Compatibilidad de mi pagina con distintos navegadores

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.
  #6 (permalink)  
Antiguo 10/07/2009, 10:42
 
Fecha de Ingreso: abril-2007
Ubicación: Capital Federal
Mensajes: 10
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Compatibilidad de mi pagina con distintos navegadores

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
  #7 (permalink)  
Antiguo 11/07/2009, 10:59
 
Fecha de Ingreso: febrero-2009
Mensajes: 132
Antigüedad: 8 años, 10 meses
Puntos: 2
Respuesta: Compatibilidad de mi pagina con distintos navegadores

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!
  #8 (permalink)  
Antiguo 08/02/2010, 04:21
Avatar de pi_imagine  
Fecha de Ingreso: febrero-2010
Ubicación: MURCIA
Mensajes: 20
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Compatibilidad de mi pagina con distintos navegadores

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

Última edición por pi_imagine; 08/02/2010 a las 04:22 Razón: css fallo navegadores explorer safari firefox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:10.