CSS - Text Before A Form

This is driving me nuts....



You see how the text is a tad hight than the form input ?

How do i make them align ?!

Thanks.

After i set the height of the text box, when viewing it in firefox, not only does it look like the font size is over 100 before typing the norm-sized text, but it starts in the middel-left of the box instead of the top left what do i do to correct this?

Hi there! I'll cut right down to the chase: is my method of styling form input fields efficient? Is there a better way to do it? I tried directly styling the input, rather than putting it in a div, but it didn't work in IE (when too much text went into the field, the background would move, no matter what I did. ) Also, is my <label> styling okay?

HTML Code:
Original - HTML Code <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div>

  

<div class="formRow">
    <div class="textInput">
        <input class="textInput" id="name" type="text" />
        <label for="name">Name</label>
    </div>
</div>

CSS Code:
Original - CSS Code #content div.formRow:hover { background-color: #EEE; } #content input.textInput { font-size: 14px; color: #666; padding: 3px 5px; width: 190px; height: 20px; border: 0; background-color: transparent; } #content input.textInput:focus { color: #000; } #content div.textInput { margin-left: 50px; background: transparent url('images/textInput.png') no-repeat; } #content div.textInput label { font-size: 14pt; font-weight: bold; margin-left: 50px; vertical-align: top; }

  

  


 #content div.formRow:hover


     {


     background-color: #EEE;


     }


 #content input.textInput


     {


     font-size: 14px;


     color: #666;


     padding: 3px 5px;


     width: 190px;


     height: 20px;


     border: 0;


     background-color: transparent;


     }


 #content input.textInput:focus


     {


     color: #000;


     }


 #content div.textInput


     {


     margin-left: 50px;


     background: transparent url('images/textInput.png') no-repeat;


     }


 #content div.textInput label


     {


     font-size: 14pt;


     font-weight: bold;


     margin-left: 50px;


     vertical-align: top;


     } 

And lastly... my image:


Thanks a lot!

I'm missing something here. I want to change the color of the default value for this text field, without changing the overall color of the input field. For example, the default value of 170 will be gray, but when a user overwrites the data with their own numerical value, it will be black. I know how to change the color of the input field when a user types in data, but is there a way to change the color of the value= ?

<input type="text" name="trans1_1" size="6" value="170"/>

Any ideas? Seems like a simple task, but can't figure it out. Thanks in advance for the time.

Hi!

Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit.

Basicly, this sums up the issue:
(sorry for the pure-text link, it didn't allow me to put up a propper one... >.<)
http://img205.imageshack.us/my.php?image=cssiebug.png

So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that.

Here is the code that should be of interest in this issue:
Code:

        <div id="bannerContent">
        <!--{{{-->
           <div id="logo">
                <a href="<?PHP echo $home ?>" target="_self"></a>
            </div>
                
            <div id="search">
                <form>
                    <input type="text" class="searchField" name="uSearchQuery">
                    <input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
               </form>
            </div>
        <!--}}}-->
        </div>

Code:

        #bannerContent
        /*{{{*/
            {
            width: 800px;
            height: 158px;
            }
            #logo
            /*{{{*/
                {
                background: url("../images/layout/logo.png") no-repeat;
                
                width: 394px;
                height: 56px;

                position: relative;
                top: 51px;
                left: 24px;

                float: left;
                }
            /*}}}*/
            #search
            /*{{{*/
                {
                width: 331px;
                height: 32px;

                position: relative;
                top: 62px;
                left: 58px;

                display: inline;

                float: left;
                }
                .searchField
                    {
                    background: url("../images/layout/search_field_bg.png") no-repeat;
                    
                    width: 266px;
                    height: 32px;
                    
                    border: none;
                    outline: none;

                    float: left;

                    <?PHP
                    if (!$agentIE && !$agentFF)
                        echo 'padding-left: 10px;' . "\n";
                    else
                        echo 'padding: 8px 0 0 10px;' . "\n";
                    ?>
                    }
                .searchSubmit
                    {
                    background: url("../images/layout/search_button.png") no-repeat;

                    width: 55px;
                    height: 32px;

                    margin-left: -10px;

                    border: none;
                    outline: none;

                    cursor: pointer;

                    float: left;
                    }
            /*}}}*/
        /*}}}*/

Thanks a bunch in advance!