Can't use text input

Question

Why am I unable to click on and type in the text input in the following? And what is the best way to fix this?

<body>
    <div class="centralCollumn">
        <div class="NewsTitle">Forum, Ask Questions or give advice</div>
        <div class="NewsHeadBreak"></div>
        <div class="NewsPara">
            <form class="commentForum">
                Leave a comment or question: <input type="text" name="comment" class="comment" ></input>
            </form>
        </div>
    </div>
</body>

Here's my CSS:

.centralCollumn {
    position: absolute;
    top: 18%;
    left: 10%;
    width: 90%;
    height: 100%;
    text-align: center;
    z-index: -1;
    background-color: #ecf1f3;
}

jsfiddle.net/LUVbk It works here, that means it's a problem with the CSS. Post your CSS. — XCS
– XCS, Commented Dec 25, 2012 at 0:06
</input> isn’t valid, but it should work anyways. Could you make a jsFiddle that demonstrates the problem, please? — Ry-
– Ry- ♦, Commented Dec 25, 2012 at 0:07
@JustinColyar: The z-index: -1 puts it behind its parent, making it impossible to interact with anything on it. You can still see it since the parent’s background is transparent, though. Why do you need the z-index: -1? — Ry-
– Ry- ♦, Commented Dec 25, 2012 at 0:08
Only on .comment and .centralCollumn, .comment is set to 10 and .centralCollumn is set to -1 — Justin Colyar
– Justin Colyar, Commented Dec 25, 2012 at 0:15
Just did a quick test by creating an html file with this css and can confirm as everyone has already said that if you remove the z-index then it works. @minitech should post an answer as he was first. — Daniel Lee
– Daniel Lee, Commented Dec 25, 2012 at 0:20

Ry- · Accepted Answer · 2012-12-25 00:22:19Z

5

The z-index: -1; puts .centralCollumn behind its parent, making it impossible to interact with anything on it. You can still see it since the parent’s background is transparent, though. Just take that part out.

answered Dec 25, 2012 at 0:22

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WilliamK · Accepted Answer · 2012-12-25 00:29:32Z

0

Your input tag is incorrect. Try removing...

</input>

The correct use of a placeholder is...

<input type="text" name="comment" class="comment" value="$comment" >

answered Dec 25, 2012 at 0:29

WilliamK

6922 gold badges14 silver badges33 bronze badges

Collectives™ on Stack Overflow

Can't use text input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related