can't get background color for input to work

Discussion in 'HTML & Website Design' started by muffin8, Aug 27, 2009.

  1. #1
    Hello,
    I need to create a multi column form.
    I am trying to use CSS but am running into a problem.
    I put the code for the input background to be purple but it is coming up yellow in firefox. It works with IE6,7,8

    Below is a sample piece with the issue.

    Can someone please help. Thanks.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">


    <head>
    <style type="text/css">
    .container{
    margin-left: 200px;
    margin-left:80px;
    width: 610px;
    height: 300px;
    border:solid 3px #59813a;
    background: transparent;
    }

    table.format1 {
    width: 800px;
    height:300px;
    background:transparent;
    }

    table.format1 td.col1{
    width:100px;
    font-family: verdana, arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align:right;
    background-color: transparent;
    }

    table.format1 td.col2{
    width:200px;
    text-align:left;
    padding-left:10px;
    }

    table.format1 td.col2 input{
    background: purple;
    width:100px;
    }

    </style>


    </head>

    <body>


    <div class="container">
    <form id="form" name="form" method="post" action="index.html">
    <table class="format1">
    <tr>
    <td class="col1">Last Name</td>
    <td class="col2"><input type="text" name="name" value="enter name" class="size1" /></td>
    <td>name</td>
    <td><input type="text" name="name" id="name" /></td>
    </tr>
    </table>
    </form>
    </div> <!-- myform -->

    </body>
    </html>
     
    muffin8, Aug 27, 2009 IP
  2. maneetpuri

    maneetpuri Active Member

    Messages:
    152
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #2
    HI,

    This problem arise because of name property in input.
    Just leave the name="" blank.

    Your current code
    <input type="text" name="name" value="enter name" class="size1" />

    Corrected code
    <input type="text" name="" value="enter name" class="size1" />

    Hope this helps,

    Cheers,
    Maneet Puri
     
    maneetpuri, Aug 27, 2009 IP
  3. muffin8

    muffin8 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks. That works. But I need the name to identify it once it is posted. Are there any other fixes?
    Thanks
     
    muffin8, Aug 28, 2009 IP
  4. Webray

    Webray Active Member

    Messages:
    469
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #4
    
    #purple input {
    	background-color: #330066;	
    }
    
    
    
    <input id="purple" type="text" name="col2" value="enter name" class="size1" />
    
    Code (markup):
    FF hasn't had the best History when it comes to named colors. I can't be sure the solution I've offered is going to help, but I hope it does. I put col2 as name, but you can change it...
     
    Webray, Aug 28, 2009 IP