Blue underline in the middle of a div

Question

I have a blue underline that I'm having trouble removing. I'm pretty sure that it is either a border:none or text-decoration:none problem, but I can't seem to find the solution.

Here is a screenshot of my problem:

HTML:

<a href="#top"><div class="content_tab" id="first_tab">
    <span class="tab_text_centred">Back to top</span>
</div></a>

CSS:

.content_tab {
    width: 220px;
    height: 340px;
    margin-right: 0px;
    margin-bottom: 20px;
    float: left;
    background-color: #000;

    overflow: hidden;
    color: #FFF;
    font-family: Georgia, Times ,serif;
    font-size: 30px;
    font-style: italic;
}
#first_tab {
    background-color: #1b1c20;
    text-align: center;
}
.tab_text_centred {
    position:relative;
    top:153px;
}

JSFIDDLE: http://jsfiddle.net/craigzilla/DptMf/

I don't see any in my browser... (gecko, webkit) Are you using IE? — bwoebi, Jun 06 '13 at 19:53

Kevin Lynch · Answer 1 · 2013-06-06T20:13:11.187

2

You can not put a tags around a div in pre-HTML5. This is not how you make a div and it's contents link clickable in pre-HTML5. It seems your issue could be connected to a text decoration issue caused by the use of this tag in this manner. Ensure you adopt the correct way for HTML 4.01 or keep it as you have but ensure you use the correct declaration in the head of your document.

edited Jun 06 '13 at 20:13

answered Jun 06 '13 at 19:58

Kevin Lynch

24,427
3
36
37

3

WRONG! See http://dev.w3.org/html5/markup/a.html It's _transparent_. That means that, when the element is in a flow element, it can contain flow elements and phrasing elements, if it is in an phrasing element, it can only contain phrasing elements. – bwoebi Jun 06 '13 at 20:01
I would have said the same thing as Vector, had I not seen the above comment. – samayo Jun 06 '13 at 20:03
1

This question is tagged as HTML, does not specify HTML5 – Kevin Lynch Jun 06 '13 at 20:07
2

+1 Just because the specs have changed does not equate to browser behavior or proper rendering. I would be highly suprirsed if the error is anything else but the anchor tag complaining for enclosing a div tag. – ProfileTwist Jun 06 '13 at 20:09
@Vector modern browsers render HTML per default as html5. maybe the OP is using an old browser, I don't know. Then he should have said this. At least say that it may be caused by an older browser. – bwoebi Jun 06 '13 at 20:12
I agree that it's not completely incorrect to say that `` tags cannot contain a `
`, but this answer still isn't of a particularly good quality. `This is not how you make a div and it's contents link clickable.` - OK, so how *do* we make a `
` clickable? In fact, we probably shouldn't do it at all, because to do so *requires* Javascript. So what are the alternatives? "Don't do it that way" is not an answer unless you provide an alternative ;-)
– DaveRandom Jun 06 '13 at 20:14

score 2 · Answer 2 · answered Jun 06 '13 at 20:08

A tag have the default property display:inline. DIV tag have defaut property: display:block. A tag wrap DIV tag is not incompatible with W3C. With your case, it can be more simple as below:

HTML code:

<a href="#top" class="content_tab" id="first_tab">
    <span class="tab_text_centred">Back to top</span>
</a>

CSS code:

.content_tab {
    width: 220px;
    height: 340px;
    line-height: 340px;
    margin-right: 0px;
    margin-bottom: 20px;
    float: left;
    background-color: #000;
    overflow: hidden;
    color: #FFF;
    font-family: Georgia, Times ,serif;
    font-size: 30px;
    font-style: italic;
}
#first_tab {
    background-color: #1b1c20;
    text-align: center;
}

score 1 · Accepted Answer · answered Jun 06 '13 at 19:57

1

I don't see anything but make sure you haven't got anything underlined by doing the following, then try again.

a, a:focus, a:active, a:hover, a:visited {
    text-decoration:none;
}

answered Jun 06 '13 at 19:57

rob_mccann

1,237
2
11
16

score 1 · Answer 4 · edited May 23 '17 at 12:19

I don't see the line in your fiddle using Chrome, but that's a lot of extra markup.

http://jsfiddle.net/DptMf/2/

<a href="#top" class="content_tab" id="first_tab"> Back to top </a>

.content_tab {
    width: 220px;
    height: 340px;
    line-height:340px;
    margin-right: 0px;
    margin-bottom: 20px;
    float: left;
    background-color: #000;
    text-decoration:none;
    overflow: hidden;
    color: #FFF;
    font-family: Georgia, Times ,serif;
    font-size: 30px;
    font-style: italic;
}
#first_tab {
    background-color: #1b1c20;
    text-align: center;
}

Is putting a div inside an anchor ever correct?

score 0 · Answer 5 · answered Jun 06 '13 at 20:10

As specified by another person:

'You can not put a tags around a div. This is not how you make a div and it's contents link clickable.

This applies to pre-HTML5, and support for a tags is low. I think it's a text decoration issue caused by this action.

Blue underline in the middle of a div

5 Answers5