Geek Answers Handbook

Hovering over one joint makes a tiny dash to the right of it

In this case, hovering over the left link makes a tiny dash to the right of it (between two links). How can I get rid of this? I see this in Safari and Chrome, but I don't see anything in the stylesheet that would force it to do this.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Walls</title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link rel="stylesheet" href="custo.css"> <script src="prettyPhoto_compressed_3/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="prettyPhoto_compressed_3/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> <script src="prettyPhoto_compressed_3/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> </head> </head> <body> <br> <a href="gallery.html"> <img src="test.jpg" class="testclass" alt="test" width="170" /> </a> <a href="info.html"> <img src="test.jpg" class="testclass" alt="test" width="55" /> </a> <div class="container-fluid"> <br> </div><!-- .container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript" charset="utf-8"> <!--initialize prettyPhoto--> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script> </body> </html>
+4
source share
2 answers

If you see the same thing that you see (I do not have all the stylesheets), you see the underline of the a tag for the image.

You can simply remove this using text-decoration: none in your image links;

 <a href="gallery.html" style="text-decoration: none !important;">

!important at the end of the style helps to override any selectors in your css that may already have !important highlighting.

Of course, in practice this is best done using the class that you set in your image links .

+7
source

This is an old post, but I would like to do something. This will help other people why a dash (-) appears.

This is because there is empty space inside the tag. For instance:

 <a href="#"> <i>test</i> </a>

If you set your line as follows: <a href="#"><i>test</i></a> dash / underline disappears, but some tools may still format your code and they will add a space . So using css mentioned in a previous post will fix the problem.

+2
source

More articles:


All Articles