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!
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
0