Unwanted underlining appearing under text

Question

I'm displaying some text and a blue line is appearing underneath it

Same as this question

Text being displayed with a blue underlining, where is it coming from?

The answer to that and to others say it is invalid for html4 but valid for html5. Why does this problem occur with the fiddle in that case? Whats the solution?

Thanks

possible duplicate of [Text being displayed with a blue underlining, where is it coming from?](http://stackoverflow.com/questions/12255029/text-being-displayed-with-a-blue-underlining-where-is-it-coming-from) — Jukka K. Korpela, Sep 06 '12 at 21:13
It’s still the same question as previously asked. Being “valid” is just a formal issue. — Jukka K. Korpela, Sep 06 '12 at 21:14
That link and also one it references make it sound like it should work with html5. Are you saying that is not the case? — Gruntcakes, Sep 06 '12 at 21:31

score 5 · Accepted Answer · answered Sep 06 '12 at 21:04

Here is your code

<ul>
  <a href="http://whatever">
    <li id = "header_list">
      <div id = "main_title">title</div>
      <img id = "logo" src="logo.png"/>
    </li>
  </a>
</ul>

The div id="main_title" is within the anchor tag, meaning it is a link. By default, link styles have the blue underline. You could add the css style to remove the blue underline:

#main_title {text-decoration: none; color: #000;}

Also, you should put the li tags directly after ul, since it needs to be a direct child:

<ul>
  <li id = "header_list">
    <a href="http://whatever">
      <div id = "main_title">title</div>
      <img id = "logo" src="logo.png"/>
    </a>
  </li>
</ul>

score 4 · Answer 2 · answered Sep 06 '12 at 21:03

4

It's coming from your <a> - because everything is wrapped in it. To remove it simply apply:

a {
    text-decoration: none
}

DEMO

answered Sep 06 '12 at 21:03

Zoltan Toth

46,981
12
120
134

score 2 · Answer 3 · answered Sep 06 '12 at 21:04

2

You just need to change the style for your links (all the text is within your <a> tags):

a{text-decoration:none;}

answered Sep 06 '12 at 21:04

Jon Egerton

40,401
11
97
129

Dennis Traub · Answer 4 · 2012-09-06T21:10:02.077

2

It is inside an <a> tag which will be rendered with an underline by default. Change the default behavior by setting text-decoration: none for links and it should work. `

edited Sep 06 '12 at 21:10

answered Sep 06 '12 at 21:04

Dennis Traub

50,557
7
93
108

Axel · Answer 5 · 2012-09-06T21:15:54.777

Anchor tags a have an text-decoration definition of underline by default. You can fix this by simply adding the text-decoration: none; attribute to your CSS definition.

I should also point out that your markup isn't entirely correct. Your anchor should be within the list-item li, and it's generally not a good idea to have block elements div inside of inline-block elements a.

Here is an updated version of your jsfiddle to demonstrate what I mean: http://jsfiddle.net/CmVsJ/2/

Unwanted underlining appearing under text

5 Answers5