remove border from text inputs

I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.

website in question http://www.officeyoganyc.com/

markup

  <div class="fieldHolder">
  <div class="attributeinput1"><input type=text name=email value="email" size="16"> 
  <script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div> 
  </div>

css

  .fieldHolder
{
    width: 137x;
    height: 24px;
    background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
    margin-left:开发者_如何学C 209px;
        margin-top: 162px;
}



  .attributeinput1
{

    border: none;
    color: #000000;
    background: none repeat scroll 0 0 transparent;
    color: #000000;
    height: 22px;
    margin-left: 5px;
    margin-top: 5px;
    width: 170px;

}

This selector:

.attributeinput1 {

Only styles the <div>. You want the <input /> inside the <div>:

.attributeinput1 input {

By the way, the input tag is self-closing:

<input ... />

Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.

Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:

language="Javascript"

in your <script> tags.

If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.

They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.

Here's what I mean. Look at the right-hand-side:

I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".

Hope this helps!

You have too many attributes for your background and border definitions.

This should work.

.attributeinput1 input { border:0; background:none; }

If not then try

.attributeinput1 input { border:0!important; background:none!important; }