Text inside tag not being displayed?

Question

I am trying to display text under my image but it wont work. My image displays but not my text.

The textarea appears but it has no text and I cannot click and write on it. Although if I Ctrl+F it says the words are there but I cant see them nor are they highlighted

<div id = "folderlist">
    <a href="">
        <image  src="${resource(dir: 'images', file:  'folderimg.png')}" width="100px" height="100px"/>
        <textarea class="captionText"placeholder="your default   text">please display some text</textarea>
    </a>
</div>

My CSS is as follows:

#folderlist {
    font-size: 0;
    width: 1500px;
    margin: 20px auto;
    position: absolute;
    top: 21%;
    right: 8.1%;
    text-align: center;
}

#folderlist a {
    margin: 15px;
    border: 8px solid transparent;
    display: inline-block;
    opacity: .8;    
    color:black;
}

#folderlist a:hover {
    opacity: 1;
    border-color: red;
}

.captionText {
    display: block;
    position: relative;
    width: 100px;
    height: 20px;
    text-color:black;
    border: 2px solid red;
}

I have tried different variations by removing placeholder using an input area and even just using <p> tags.

Any help would be much appreciated.

I have tried also the following:

<a style='text-decoration: none; color: orange;'>
    <img src="${resource(dir: 'images', file:  'folderimg.png')}" width="100px" height="100px">
    <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

Your HTML is invalid, you have a stranded `` tag and a `` inside another `<a>` tag. Fix up your HTML first and see if you still have a problem.</a> — Steve, Mar 11 '16 at 00:51
@Steve That was my copy and paste mistake my bad that's not the problem — hat_to_the_back, Mar 11 '16 at 00:54
@Steve can you have a inside a <a>? How else would I display text under the picture?</a> — hat_to_the_back, Mar 11 '16 at 00:55
Better option here: http://stackoverflow.com/questions/14528951/can-you-use-textarea-outside-the-scope-of-a-form for displaying text similarly to a textarea, but not with a form. — Jeff.Clark, Mar 11 '16 at 00:55
@hat_to_the_back with a `
` or `` tag. `` in this case, even if it was valid, is semantically incorrect for it's usage. — Steve, Mar 11 '16 at 00:58
http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct also says that anything intractable cannot be inside of a link. Would a textarea be considered intractable? — Jeff.Clark, Mar 11 '16 at 01:00
@Steve Can you please see above edit. I dont know why it has been voted down? Its a valid question — hat_to_the_back, Mar 11 '16 at 01:00
@hat_to_the_back the downvote probably come from someone seeing your original question. I've edited it to be a bit more readable. Your edit also helps as that is more valid HTML. — Steve, Mar 11 '16 at 01:04
@Steve You should try the couple of suggestions you have been given so far. Don't use a text area. Try something else. — Jeff.Clark, Mar 11 '16 at 01:09
Hahaha, so it is. Must have been one of those things where I was looking at your name while typing and just transposed :) — Jeff.Clark, Mar 11 '16 at 16:13

score 2 · Accepted Answer · answered Mar 11 '16 at 01:16

2

The problem is with

#folderlist {
    font-size: 0;
    width: 1500px;
    margin: 20px auto;
    position: absolute;
    top: 21%;
    right: 8.1%;
    text-align: center;
}

Setting the font-size to 0 tends to make text invisible :)

answered Mar 11 '16 at 01:16

Gabriele Petrioli

191,379
34
261
317

Great spot, it was late :P – hat_to_the_back Mar 11 '16 at 11:08

score 0 · Answer 2 · answered Mar 11 '16 at 02:42

The code is fine. Just do one thing. Put # in the anchor tag.

<a href="#">
    <image  src="cool.jpg" width="100px" height="100px"/>
    <textarea class="captionText"placeholder="your default   text">please display some text</textarea>
</a>

else there is no problem in code

score -1 · Answer 3 · answered Mar 11 '16 at 01:05

-1

A textarea is a form input. It's not something you use for just displaying text. Use a 'p' tag instead

answered Mar 11 '16 at 01:05

Joshua Comeau

2,594
24
25

I don't know why this is massively downvoted. It's the correct answer. – John Haugeland Mar 11 '16 at 01:11

score -1 · Answer 4 · answered Mar 11 '16 at 01:13

Joshua Comeau is correct - the markup doesn't make sense.

<a> is an anchor tag. It is only allowed to contain certain things. Form elements, such as <input>, <select>, and <textarea> are not among them.

Textareas are the large text editing areas that you expect in a mail system. You don't use them to display text.

You can just put that text there not wrapped in anything at all. That's probably what you want.

If you just need something to attach style rules to, use a <span>.

If what you're trying to do is to get a rectangular area to put text into, you want a <div> instead.

<textarea> within <a> is not legal, and will never work in a compliant browser.

The code in your "I have also tried" is actually perfectly valid, and what you want to do.

Text inside tag not being displayed?

4 Answers4