white dots below HTML text

Question

My output in website has dots below text :

enter image description here

why is it coming and how to remove it?

HTML

<p align = "center"><font size = "4.5" color="#979C91"><a href="customer.html"><span class="fa fa-pencil"> Customers</span></a>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
<a href="business.html"><span class="fa fa-pencil"> Business</font></span></p></a>

CSS

.fa {
    text-decoration: none;
}
.fa.solo{}
.fa.solo span {
    display: none;
}
.fa:before {
    display:inline-block;
    font-family: FontAwesome;
    font-size: 1.25em;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.fa-pencil:before{
    content:"\f040"
}

Probably your `fa` or `fa-pencil` classes have something like `border-bottom: 1px dotted white;`. Please add corresponding css code. — OlivierH, Dec 05 '13 at 11:02
The code posted does not produce the problem. And the HTML code is seriously malformed (invalid). — Jukka K. Korpela, Dec 05 '13 at 11:25

score 2 · Accepted Answer · answered Dec 05 '13 at 11:02

2

There is a dotted border being applied to the bottom of that element. To remove it, you can apply the following CSS to remove it:

border-bottom: none;

Without being able to see the rest of the code, it's hard to say what caused this to happen.

answered Dec 05 '13 at 11:02

russellc

494
3
7

Marinus · Answer 2 · 2013-12-05T11:14:45.743

1

Add this to your css file

a{
text-decoration:none;}

The css code of the website (http://fontawesome.io/) that you are referring to is

a:focus {
outline: thin dotted;
}
a:active, a:hover {
outline: 0 none;
}

and if this is in your coding then that is the problem.

It is not you .fa class that is the problem..

edited Dec 05 '13 at 11:14

answered Dec 05 '13 at 11:05

Marinus

441
5
11

it has text-decoration as none..plus after removing the .fa class i still get those doted line – Ad-vic Dec 05 '13 at 11:21
do you have a link to the site you are working on, or sen me an email marinus@aboutit.co.za with your css coding I'll take a look. – Marinus Dec 05 '13 at 11:23

score 0 · Answer 3 · answered Dec 05 '13 at 11:03

0

try debugging. right click your browser then inspect element the field. In right portion you will see in what file the text-decoration is declared.

screenshot: http://d.pr/i/PoDI

answered Dec 05 '13 at 11:03

Dan Rey Oquindo

276
1
3
11

score 0 · Answer 4 · answered Dec 05 '13 at 11:06

Try with this

> <p align = "center"> <font size = "4.5" color="#979C91"><a
> href="customer.html" style="text-decoration: none"><span class="fa
> fa-pencil"> Customers</span></a>   <a href="business.html"
> style="text-decoration: none"><span class="fa fa-pencil">
> Business</font></span></p></a>

score 0 · Answer 5 · edited Mar 21 '14 at 14:54

0

The problem was with .a in css

a
    {
        text-decoration: none;
        color: inherit;
        border-bottom: dotted 1px rgba(128,128,128,0.5);

I removed the border-bottom and now I don't get any dots below.

edited Mar 21 '14 at 14:54

The Guy with The Hat

10,836
8
57
75

answered Dec 05 '13 at 11:49

Ad-vic

519
4
18

white dots below HTML text

5 Answers5

Linked