Buenas,
siento llegar tarde y encima con malas noticias. Lamentablemente chrome y creo que safari también no se comportan de la misma manera que el resto de navegadores con la pseudoclase focus. Sólo funcionan con eventos de teclado y en elementos de formulario y no creo que esto sea por error sino mas bien porque piensan que es el comportamiento correcto ya que es conocido hace tiempo y no lo han cambiado todavía. Y en cierto modo tiene sentido que no funcione con un enlace porque al dar el foco a un elemento lo que se espera es una acción por parte del usuario y si esta acción es un click en él, además de darle el foco, el comportamiento predeterminado del enlace sería seguir el enlace, es decir llevarnos a otra página con lo que el enlace ya no tendría el foco. Pero si que se tiene que poder dar el foco con el teclado para que la página sea accesible en dispositivos sin ratón y en elementos de formularios en los que se espera que el usuario introduzca datos y son los únicos que se nombran en la especificación 2.1. La única solución que se me ocurre para que funcione en todos igual sería usar javascript.
Por otro lado, aunque supongo que ya lo has averiguado, para poder aplicar la propiedad z-index a un elemento tiene que estar posicionado. Y el borde si que se ve pero al ser de un pixel casi no se aprecia. Aprovecho para decirte que en lugar de repetir la misma propiedad varias veces puedes agrupar los selectores separándolos por comas y así el código será más corto. También puedes eliminar el div con id Pestanas y aplicar los estilos de éste al ul directamente y la class button que no la estás usando para nada. El div Pestanasline supongo que no lo usarás solo para dibujar la línea de separación porque no se deben usar elementos vacios sólo para efectos estéticos, podrías poner en él el contenido.
Sería mejor usar display block para los elementos <li> y así podrías dar a todas las pestañas el mismo tamaño. Los elementos inline tienen el tamaño de lo que tienen dentro y en este caso como los enlaces están flotados se salen del flujo del documento y los <li> se quedan vacios y sin tamaño, unicamente el padding y el line-height, puedes comprobarlo con firebug poniendo un color de fondo al li. Además al flotar los enlaces se transforman en elementos en bloque y no es correcto poner elementos en bloque dentro de elementos en línea. Lo he probado en varios navegadores y en cada uno se veía diferente. Te he hecho un ejemplo que se ve igual en todos excepto el focus con el ratón en chrome:
Código HTML:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="es"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="Language" content="Spanish"> <link rel="stylesheet" href="fichero.css" type="text/css"> <li ><a href="#" rel="1">Perfil
</a></li> <li ><a href="#" rel="2">Referencias
</a></li> <li ><a href="#" rel="3">Documentos
</a></li>
<div id="contenido"><p>el contenido
</p></div>
Código CSS:
Ver original/******** menu de pestañas con :focus *******/
* {
margin: 0;
padding: 0;
outline: none;
}
ul, li, a { display: block; }
a, #contenido {
border: 1px solid #000;
text-align: center;
height: 40px;
line-height: 40px;
}
ul {
list-style-type: none;
height: 42px;
z-index: 2;
position: relative;
top: 10px;
}
li {
float: left;
margin-left: 10px;
}
a {
width: 125px;
background: #ff0;
text-decoration: none;
}
li a:focus {
background: #0ff;
border-bottom: none;
height: 52px;
}
#contenido
{
background: #0ff;
margin-top: 20px;
height: 300px;
}
/** fin **/