CSS - Problemas de compatibilidad con navegadores

   
Vista:
Imágen de perfil de Kike

Problemas de compatibilidad con navegadores

Publicado por Kike (2 intervenciones) el 04/11/2009 23:46:56
Hola. Estoy diseñando una página con CSS y me está dando algunos problemas. Paso a enumerarlos:

Internet Explorer:
- No me centra la página, a pesar de estar en un div con margen automático
- El div de contenido (texto) es más angosto (esto no sería tan grave)

Chrome:
- No me lee el color de fondo de la página, aunque vi que lo puedo solucionar poniendo la propiedad bgcolor directamente en el HTML

Firefox:
- Idem olor de fondo de página
- Me recorta el Div principal, que lleva una imagen de fondo, y es en la que se basa el diseño (esto sí que es grave)
- Me ignora el padding de la caja donde va el menu, con lo cual queda el primer link encima del logo

Los tres:
- Me ponen la caja del pie de página donde les sale de las narices

Aclaración. Para fondo de página usé una imagen, porque así era el diseño en Flash y ahora lo estoy "traduciendo"; creo que esto es lo que me está ocasionando más de un problema

La página podrán verla en www.soho-barcelona.com/HTML/newindex.html

El código es el siguiente: [HTML] <head>
<link rel="shortcut icon" href="" type="image/x-icon">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>SOHO - Food & Drinks</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id ="Wrapper">

<!--Menú cabecera -->
<div id = "Menu">
<ul>
<li class="activo">INICIO</li>
<li><a href="espacio.html">ESPACIO</a></li>
<li><a href="comer.html" >COMER</a></li>
<li><a href="beber.html">BEBER</a></li>
<li><a href="compartir.html">COMPARTIR</a></li>
<li><a href="comollegar.html">COMO LLEGAR</a></li>
</ul>
</div>
<!--caja con contenido -->
<div id="Content">
<p class="title">UN LUGAR UNICO</p>
<p>SOHO es un restaurante – bar de cocktails situado en el barrio barcelonés del Born, donde además podrás encontrar Djs, presentaciones de diseñadores de moda, catas de vinos, exposiciones, actuaciones en directo y una gran diversidad de eventos.<br><br> Versátil, porque es un restaurante y también un bar de copas. Con una cocina sincera y directa y una barra divertida y llena de atractivas propuestas, buena música y trato cercano. Apto para todas las edades y tendencias.<br><br>Aquí encontraras un ambiente agradable y elegante, decoración de diseño y un servicio de calidad hecho por profesionales competentes y llenos de simpatía. SOHO abre sus puertas para diversificar e internacionalizar todavía un poco más este cosmopolita barrio barcelonés.</p>
</div>
<!--Pie de página-->
<div id="Footer">
<p>C/ COMERÇ 27, BORN. BARCELONA<br>
RESERVAS: 93 268 2577 - </p>
<p class="title"><a href="reservas.html" target="_blank">RESERVAR ONLINE</a></p>
</div>

</div>
<!--cierre -->
<div class="corte"></div>
</body>
[/HTML]

Y el CSS:

charset "utf-8";
/* CSS Document */
* {margin:0; padding:0};

body {
margin:0;
font-family: "Gisha", sans-serif;
color: #ffffff;
font-size: 14px;
background-color: "#000000";
}

.title {
margin: 0;
font-family: "Gisha", sans-serif;
font-size: 20px;
color:#ff00ff;
}

#Wrapper {
margin: 0 auto;
position: relative;
width: 1024px;
height: 764 px;
border: 1px dotted #000;
background-image: url(Image1.jpg);
}

#Menu {
font-family: "Verdana", sans-serif;
font-size: 14px;
color:#ffffff;
margin-left:150 px;
padding-top:10 px;
border: 1px dotted #fff;
}
/* Lista Menu */

#Menu ul {
list-style-type:none;
text-align:center;
}
#Menu ul li {
float: left;
width: 14%;
}

#Content {
position: relative;
top: 220px;
left: 50%;
height: 250px;
width: 450px;
padding: 20px 20px 10px 20px;
z-index: 20;
background: url('textbox_home.png');
background-repeat: no-repeat;
/* background-color:#000000; */
font-size:13px;
font-family: "Gisha", sans-serif;
color:#ffffff;

}

#Footer {
position: relative;
top: 362px;
height: 100px;
width: 1024px;
padding: 5px 20px 0px 20px;
z-index: 30;
background: url('textbox_footer.png');
background-repeat: no-repeat;
/* background-color:#000000;*/
font-size:20px;
font-family: "Gisha", sans-serif;
color:#ffffff;
text-align:center;

}

.corte {
clear:both;
}


/* LINKS */

a:link {
color:#ffffff;
text-decoration: none;
}
a:visited {
color:#ffffff;
text-decoration: none;
}
a:hover {
color: #ff00ff;
text-decoration: none;
}
a:active {
text-decoration: none;
color: #ffffff;
}

.activo{
color: #ff00ff;
}

Tengo algunas otras dudas, pero si me resuelven esto ya estaría contento, especialmente el tema del Firefox. Me agradaría también un comentario de por qué se produce. Muchas gracias, amigos!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder