Text-indent sin efecto en <ul>

Masane · #1 (**permalink**) 19/06/2010, 08:47

Buenas a todos:

Estoy diseñando una plantilla en XHTML estricto y no sé por qué me está fallando el text-indent que asigno a una de las listas.

Os dejo el código del HTML y el CSS asignado al mismo:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
 
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="es" lang="es" >
 
  <head profile="http://gmpg.org/xfn/11">
  
  ...etc...
    
  </head>
  
  <body>
      
  <div id="contenedor">
    <div id="header">
      <ul id="perfiles">
          <li><a title="titulo" href="#" id="boton-blog">enlace</a></li>
          ...etc...
      </ul>
      ...etc...  
  </body>
  
</html>

Código CSS:

Ver original/* Botonera de aplicaciones y perfiles */
#perfiles {
  display: block;
  width: 712px;
  height: 50px;
  float: right;
  padding: 0px;
  margin: -22px 200px 0px -28px;
  border: 0px;
  text-align: right;
  list-style-type: none;
  text-indent: -9000px;  
}
 
#perfiles li {
  display: inline;    
  text-indent: -9000px;                                              
}
 
#perfiles li a {
  float: left;
  display: block;
  border: 0px;
  text-decoration: none;
  padding: 0px;
  margin: 0px 0px 0px 1px;
  text-indent: -9000px;
  cursor: pointer;
}
 
#perfiles li #boton-blog {
  width: 75px;
  height: 50px;
  background: #FFFFFF url('../imgs/boton-blog.png') no-repeat top left;
}
 
#perfiles li a:hover {
  background-position: bottom left !important;
}

Si hay algún fallo, no lo encuentro, y no sé por qué no se asigna el text-indent, cuando en otras zonas de la web tengo asignado el mismo text-indent y sí que se asigna sin problemas :S ...

¿Alguien que me ilumine?

Muchas gracias por adelantado.

Un saludo.

Masane · #2 (**permalink**) 21/06/2010, 08:46

Leí por ahí la idea de meter los contenidos del los <li> en un <span style="display: hidden;">, pero no funciona, sólo funciona si pongo display:none; y no quiero poner eso porque no es nada SEO, de hecho creo recordar haber leído por ahí que se te puede penalizar por el uso indebido de esta propiedad...

¿Alguna idea de por qué no me hace caso el CSS? Llevo días pensando que quizás sea porque hay algo que no me deja sacar el texto fuera de los <li>, algo que haga de "muro" en el HTML o el CSS, pero lo he repasado ya bastantes veces y no se me ocurre qué pueda ser :S ...

La única solución que veo es dejar los enlaces así <a></a>, sin ningún contenido entre sus etiquetas, pero no lo veo nada correcto, la verdad....

¿Alquien que me ayude?

Muchas gracias por adelantado -.- ...

Un saludo.

alexk · #3 (**permalink**) 21/06/2010, 09:07

es que "display: hidden" no es XD, como bien dices "display: none" te funciona por que es lo correcto.
lo mas importante, no explicas que quieres hacer... ocultar el texto?...
no estoy seguro si google o no penaliza por ocultar texto, si es cierto no importa que propiedad uses, si lo ocultas, sin importar el metodo pues ya es una falta supongo.
(quien quiere posicionar la palabra "home" o "servicios" o "contacto" :S ).

ahora... ok usas "text-indent: -9000px;" pero luego alineas el texto a la derecha "text-align: right;" mmm quieres que lo oculte o no?... :S, ya que por mucho identado que pongas luego lo contradices poniendo el texto hacia la derecha.

Código:

#perfiles {
  display: block;
  width: 712px;
  height: 50px;
  float: right;
  padding: 0px;
  margin: -22px 200px 0px -28px;
  border: 0px;
  text-align: right;
  list-style-type: none;
  text-indent: -9000px;  
}

explica que quieres hacer

chao

Masane · #4 (**permalink**) 21/06/2010, 09:14

Dios, ya sabía yo que algo se me escapaba... Muchísimas gracias por la ayuda, ya he conseguido ocultar el texto.

Un saludo.

PD: Y sí, tienes razón, es display:none... La mitad de las veces, en vez de poner visibility:hidden, termino poniendo, no sé por que manía, display:hidden, pero igualmente me has resuelto el problema con lo del text-align: right ;) .

alexk · #5 (**permalink**) 21/06/2010, 09:41

que bueno