Menu
Can somebody explain why I do see 2 dashes (or underscore) between my images, like this:
How to remove them ?
This weird behavior appears in chrome (linux), safari (mac) as well in firefox (mac).
<html>
<head>
<style type="text/css" media="screen">
ul li {
display: inline;
}
</style>
</head>
<body style="background: none;">
<ul clas="">
<li>
<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
<img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
</a>
</li>
<li>
<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
<img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
</a>
</li>
<li>
<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
<img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
</a>
</li>
</ul>
</body>
</html>
283
It's not an underscore, it's the underlining of a link. Note your markup:
<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
<img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
</a>
Before and after the img there is whitespace within the a. If a elements are styled to be underlined, that whitespace will be underlined.
You can remove the whitespace:
<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
and/or you can change the styling:
a {
text-decoration: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
