CODEWITHSUNDEEP
htmlcss
Subhranath Chunder
Subhranath Chunder

Reputation: 533

css text vertical alignment changes from textarea element to input element

I'm not good in css and not able to quick fix this issue.

I have the following html, css code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>temp</title>
        <meta name="generator" content="Studio 3 http://aptana.com/">
        <meta name="author" content="Subhranath Chunder">
        <!-- Date: 2011-08-19 -->
        <style type="text/css">
            div {
                width:400px;
            }
            p, input {
                display:inline-block;
                height:80px;
            }
            ul.error-list, li {
                display:inline;
            }
        </style>
    </head>
    <body>
        <div>
            <p><input type="text" value="Name" name="name" /></p><ul class="error-list"><li>Error 1</li></ul>
            <p><input type="text" value="Email" name="email" /></p><ul class="error-list"><li>Error 1</li></ul>
            <p><textarea name="address" />Address</textarea></p><ul class="error-list"><li>Error 1</li></ul>
        </div>
    </body>
</html>

The first two error messages corresponding to the first two input elements is getting vertically centered. But, for the textarea element, the error message is vertically at the bottom.

If I change the last element to input type element, then it gets vertically centered. But, I need the last element to be of textarea type.

Can anyone fix the css, and give an explanation of why it's behaving as such.

Upvotes: 1

Views: 5168

Answers (1)

Oliver
Oliver

Reputation: 11597

Try this.

    <style type="text/css">
        div {
            width:400px;
        }
        p, input, textarea {
            display:inline-block;
            height:80px;
        }
        ul.error-list, li {
            display:inline;
        }
        textarea {
            vertical-align:middle;
        }
    </style>

As for why this happens: input and textarea are different elements, and they behave in different ways. Possibly because input only takes one line of text, and the error message is by default aligned to the bottom line of text, for inputs it looks as you want it to. But textarea takes many lines of text, so the error message aligns to the bottom of the element, rather than the bottom of the text in the element.

Upvotes: 3

Related Questions