Estoy haciendo una lista de hipervínculos, del tipo
<li><a href="#">botón</a></li>, pero tengo un problema.
Sólo aparece como hipervínculo el texto en cuestión, pero yo necesito que todo el recuadro que lo enmarca funcione como un botón. ¿Cómo puedo conseguirlo?
Adjunto los códigos:
<body id="tapiz">
<div id="despliegue">
<div id="encabz">
</div>
<div id="contenido">
<table width="100%" border="0" cellspacing="15px" id="tablagrande">
<tr>
<td id="cbotones">
<ul id="botones">
<li><a href="#">Inicio</li></a>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</td>
<td id="ccontenido"></td>
<td id="cenlaces"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
@charset "utf-8";
}
body {
background-color: #97BEC6;
}
#tapiz {
background-color: #97BEC6;
background-image: url(images/azul.jpg);
}
#despliegue {
background-color: #003C65;
width: 1000px;
margin: 0px auto;
height: 625px;
margin-top: 0px;
}
#encabz {
background-color: #03F;
height: 150px;
width: 980px;
margin: 0px auto;
margin-top: 10px;
padding-top: 0px;
background-image: url(images/titulo.jpg);
}
#contenido {
background-color: #FFF;
width: 980px;
margin: 0px auto;
margin-top: 30px;
height: 425px;
}
#tapiz #despliegue #contenido #tablagrande tr #cbotones {
width: 15%;
}
#tapiz #despliegue #contenido #tablagrande tr #ccontenido {
width: 65%;
}
#tapiz #despliegue #contenido #tablagrande tr #cenlaces {
width: 20%;
}
#tapiz #despliegue #contenido #tablagrande tr #cbotones #botones {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: middle;
list-style-position: outside;
list-style-image: none;
list-style-type: none;
margin-left: -5px;
}
#tapiz #despliegue #contenido #tablagrande tr #cbotones #botones li {
height: 20px;
padding: 5px;
background-color: #003C65;
float: none;
display: block;
margin: 10px;
text-align: center;
vertical-align: middle;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
Adelanto que la solución no es cambiar el orden del código y poner
<a href="#"><li>botón</li></a>
Además, necesito alinear la lista a la izquierda, y lo consigo en IE con un padding, pero con Firefox y Chrome no puedo, ¿qué propiedad debo utilizar?
Muchas gracias!
