¿De dónde sale este pequeño guión entre las fotos?

Linton · #1 (**permalink**) 20/03/2013, 07:56

Estoy haciendo pruebas con varios lightbox, y al montar un esquema de página me aparecen unos pequeños segmentos entre las miniaturas, ni idea de dónde salen

Vista más cercana, señalo las anomalías:

Por si ayuda pongo borde CSS a las viñetas:

El código es muy sencillo:

Código HTML:

Ver originaldiv class="panel">
    <a href="fotosLB/a.jpg" >
    <img src="(1).jpg">
    </a>
 
    <a href="fotosLB/b.jpg" title="Under way">
    <img src="(2).jpg">
    </a>
 
    <a href="fotosLB/c.jpg">
    <img src="(3).jpg">
    </a>
 
    <a href="fotosLB/d.jpg">
    <img src="(4).jpg">
    </a>
 
    <a href="fotosLB/e.jpg">
    <img src="(5).jpg">
    </a>
 
    <a href="fotosLB/f.jpg">
    <img src="(6).jpg">
    </a>
</div>

Y en CSS:

Código CSS:

Ver original.panel {
    height: 600px;
    width: 390px;
    padding: 20px 0 0 20px;
}
 
.panel img {
    width: 140px;
    height: 100px;
    padding: 10px;
    border: 1px solid silver;
}

¿Alguien sabe por qué aparecen esas barritas? Gracias, un saludo.

pitufoweb · #2 (**permalink**) 20/03/2013, 09:40

Hola,

Creo que es underline de los links.

Saludos

Omura · #3 (**permalink**) 20/03/2013, 10:17

prueba poniéndolo así...

div class="panel">
<a href="fotosLB/a.jpg"><img src="(1).jpg"></a>
<a href="fotosLB/b.jpg" title="Under way"><img src="(2).jpg"></a>
<a href="fotosLB/c.jpg"><img src="(3).jpg"></a>
....

Tecna · #4 (**permalink**) 22/03/2013, 04:03

Buenas,

Como dice @pitufoweb es el subrayado del enlace, por eso por accesibilidad, cuando existen más de un enlace contiguos sin ningún elemento que los separe hay que incluir algún caracter imprimible rodeado de espacios que sirva de separación, o incluirlos en una lista. El fundamento es el mismo que el del espacio fantasma que aparece entre elementos en línea que será lo que ocurra en el ejemplo de @Omura, el espacio que se crea entre dos elementos en línea hace que sean distinguibles más facilmente y estaba pensado así por accesibilidad.

Rafael · #5 (**permalink**) 25/03/2013, 06:24

yo le pondría al css

Código CSS:

Ver original.panel a {text-decoration: none;}

salvo , claro, que hayalinks que sí lo necesiten.

emprear · #6 (**permalink**) 25/03/2013, 08:41

En realidad es
el text-decoration más el hecho de que tus <a> contienen espacios en blanco, si hicieses lo que te señala @omura, solucionarías el problema sin necesidad de corregir la propiedad

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<style type="text/css">
/*<![CDATA[*/
.panel {
    height: 600px;
    width: 390px;
    padding: 20px 0 0 20px;
}
 
.panel img {
    width: 140px;
    height: 100px;
    padding: 10px;
    border: 1px solid silver;
}
/*]]>*/
</style>
</head>
<body>
<div class="panel">
<a href="fotosLB/a.jpg" ><img src="portadam.jpg" alt="" /> </a>
<a href="fotosLB/a.jpg" ><img src="portadam.jpg" alt="" /></a>
<a href="fotosLB/a.jpg" ><img src="portadam.jpg" alt="" /></a>
<a href="fotosLB/a.jpg" ><img src="portadam.jpg" alt="" /></a>
<a href="fotosLB/a.jpg" ><img src="portadam.jpg" alt="" /></a>
<a href="fotosLB/a.jpg" ><img src="portadam.jpg" alt="" /></a>
</div>
</body>
</html>

como se aprecia el guión aparece en el primer par de imágenes, ya que deje exprofeso un espacio en blanco
Saludos

Linton · #7 (**permalink**) 08/04/2013, 07:38

¡Gracias a todos, me había olvidado de esta consulta!