Tengo un problema con un sitio que estoy haciendo. Le puse botones como indice para moverse dentro de la página, con internet explorer no hay problemas pero con otros como Monzilla y chrome los botones (o pestañas) se mueven para arriba y pierden la curvatura de la misma. el código en html y css es el siguiente. gracias por la ayuda.
¿Si subo un dibujo se entenderá mejor lo que digo?.¿ Se puede subir un dibujo...lo pego aquí abajo...o como lo hago?
CODIGO HTML:
<!--Esto es el principio de un comentario
y este es el final de un comentario-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Titulo</title>
<link rel="stylesheet" href="css/estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabeceraizq"> </div>
<div id="cabecerader"> </div>
<div id="navegacion">
<ul>
<li><a href="indice1.html">indice</a></li>
<li><a href="cabecera/uno.html">uno</a></li>
<li><a href="cabecera/dos.html">dos</a></li>
</ul>
</div>
<div id="contenido">
<div id="propagandaizq">Propaganda izquiera</div>
<div id="propagandader">Propaganda derecha</div>
<h1>indice</h1>
<br />
<br />
dddddddddd
ddddddddddd
ddddddddddddddd
ddddddddddddddd
dddddddddddddd
<br />
<br />
ddddddddddddddddddddddd
ddddddddddddddddd
dddddddddddddddd
<br />
<br />
ddddddddddddddddddddd
dddddddddddddddddddddddddddd
<br />
<br />
ddddddddddd
ddddddddddddddd
<br />
<br />
ddddddddd
dddddddddddddddd
ddddddddddd
<br />
<br />
sssssssssssssss
ssssssssssssss
ssssssssssss
<br />
<br />
Código css de estilo:
html, body{
height:100%; /* Estandar */
}
div {
min-height:100%; /* // Estandar*/
}
* html div{
height:100%; /* //IE*/
}
body {
background-color: #666666;
margin: 0px;
padding: 0px;
text-align: center;
}
#cabecerader {
background: url(../images/company-logo.gif ) no-repeat ;
background-color:#137C72;
width: 472px ;
float:left ;
height:120px;
min-height:120px; /* para que en opera y otros el alto de esta div no sea 100% */
}
#cabeceraizq {
background: url(../images/budismo-05.gif ) no-repeat ;
background-color:#137C72;
width: 528px ;
float:left ;
height:120px;
min-height:120px; /* para que en opera y otros el alto de esta div no sea 100% */
}
#navegacion {background-color:#085049;
width:1000px;
height:25px;
min-height:25px; /* para que en opera y otros el alto de esta div no sea 100% */
}
#navegacion ul{padding:0px;
margin:0px;
list-style:none;
}
#navegacion li{padding:0px;
margin: 8px 5px 0px 5px;
list-style:none;
float:left;
}
#navegacion li a{font-family:tahoma;
font-size:12px;
color:#313131;
font-weight:bold;
text-decoration:none;
text-align:center;
float:left;
width:105px;
height:35px;
background: url(../images/button-bg.gif) no-repeat;
background-position:bottom;
padding:14px 4px 0px 4px;
}
.activo {font-family:tahoma;
font-size:12px;
color:#313131;
font-weight:bold;
text-decoration:none;
text-align:center;
float:left;
width:105px;
height:35px;
background: url(../images/button-bg-white.gif) no-repeat; background-position:bottom;
padding:14px 4px 0px 4px;
line-height:35px; /*esto lo centraria verticalmente*/
} /* //para hacer la pestaña con efecto se */ /* //puso .activo */
#navegacion li a:hover{height:35px; text-decoration:underline; color:#313131;}h1 {
font-family: Times;
font-size: 24px;
color: #094738;
line-height: 20px;
text-decoration: none;
text-align: left;
margin-top: 0px;
margin-bottom: 7px;
font-style: italic;
}
#contenido {background-color: #E6E6E6;
min-height:2500px; /* para que en opera y otros vean bien el contenido, las propagandas derecha e izquierda y el pie de página */
font-size: 20px;
text-align: left;
}
#propagandaizq {background-color:#E6E6E6;
width: 200px;
float:left;
min-height:2000px; /* para que en opera y otros el alto de esta div no sea 100% */
}
#propagandader {background-color: #E6E6E6;
width: 300px ;
float:right ;
min-height:2000px; /* para que en opera y otros el alto de esta div no sea 100% */
}
#pie {background-color: #B5C6C4;
height:70px;
min-height:70px; /* para que en opera y otros el alto de esta div no sea 100% */
width: 1000px ;
}
#global {width:1000px ;
margin: 4px auto;
}