dngs dngs - 3 months ago 15
HTML Question

An unexpected UNDERSCORE appearing

i was working with w3.css and font awesome icons. i created two links and used

check
and
time
icons for them. the first link (icon) is showing and underscore
_
next to it. but it is not in the code. i have tried changing the icon but it is still there. i inspected it in Firefox and the underscore is part of
<a></a>
and not the icon. can you help resolve this problem?

Here is a screenshot:enter image description here

Here is the code:

<td>
<a href="ajaxAction.php?aid=<?php echo $r['id']; ?>">
<i class="fa fa-check w3-text-green w3-hover-green"></i>
</a>
&nbsp;
<a href="ajaxAction.php?unid=<?php echo $r['id']; ?>">
<i class="fa fa-times w3-text-red w3-hover-red"></i>
</a>
</td>

Answer

The a link is underlined by default and contains the icon and empty spillover.

Add text-decoration: none; to the links to prevent the default underscore style on links.

EDIT: Full Example(without icons):

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body class="w3-container">

<table>
<tr><td>
            <a href="ajaxAction.php?aid=<?php echo $r['id']; ?>">
                <i class="fa fa-check w3-text-green w3-hover-green"></i>
            </a>
            &nbsp;
            <a href="ajaxAction.php?unid=<?php echo $r['id']; ?>">
                <i class="fa fa-times w3-text-red w3-hover-red"></i>
            </a>
</td>
</tr>
<tr><td>
            <a style="text-decoration:none;" href="ajaxAction.php?aid=<?php echo $r['id']; ?>">
                <i class="fa fa-check w3-text-green w3-hover-green">_</i>
            </a>
            &nbsp;
            <a style="text-decoration:none;" href="ajaxAction.php?unid=<?php echo $r['id']; ?>">
                <i class="fa fa-times w3-text-red w3-hover-red">_</i>
            </a>
</td>
</tr>
<tr><td>
            <a style="text-decoration:none;" href="ajaxAction.php?aid=<?php echo $r['id']; ?>">
                <i class="fa fa-check w3-text-green w3-hover-green">_</i>
            </a>
            &nbsp;
            <a style="text-decoration:none;" href="ajaxAction.php?unid=<?php echo $r['id']; ?>">
                <i class="fa fa-times w3-text-red w3-hover-red">_</i>
            </a>
</td>
</tr>
</table>
</body>
</html>