Home/ Questions/Q 6345923
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T20:55:02+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0