Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Style Form

  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Style Form

    I have created a Form and am now trying to add some styling to it using css

    I found a nice looking example for my purposes but can not seem to adjust the width or height no matter what value I use it stay the same so obviously I am not understand the sample css, can someone point me in the right direction? and I dont seem to have any gradient. I do have a nice radius and the color is blue for the text. I am using ie 8

    Thanks
    Code:
    form.loanapp    {
    background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
    background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
    margin:auto;
    position:relative;
    width:0px;
    height:850px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 24px;
    font-style: italic;
    line-height: 24px;
    font-weight: bold;
    color: #09C;
    text-decoration: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding:10px;
    border: 1px solid #999;
    border: inset 1px solid #333;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    }
    
    input    {
    width:375px;
    display:block;
    border: 1px solid #999;
    height: 25px;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    IE 8 doesn’t support any gradients by default, you need CSS3PIE or something. The CSS you posted isn’t wrong per se so the problem must be somewhere else. Please post your entire code; that includes the HTML.

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here is the html for the Form

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    	
    	
    	<meta name="description" content="Pacific Financial"/>
    	<meta name="author" content="Bill Moran, Web Designer, bill-moran.com"/>
    	
    	<title>Apply // Pacific Financial</title>
    	
    	<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"/>
    	<link rel="shortcut icon" type="image/png" href="../favicon.png"/>
    	
    	<link rel="stylesheet" type="text/css" href="style.css"/>
    	
    	</head>
    
    
        <title>Application</title>
    
    <body>
    
    <h2>Loan Pre-Qualification Application</h2>
    
    
    <h3>Borrower</h3>
    
    <form action="processloanapp.php" name="loanapp" method="POST" onsubmit="return(validate());">
    
    Purpose of Loan:<select name="loanpurpose">
    <option value="purchase" >Purchase</option>
    <option value="refinance no cash-out" >Refinance No Cash-Out</option>
    <option value="refinance cash-out" >Refinance Cash-Out</option>
    </select>
    
    Loan Amount:<input type="text"name="loanamt"/>
    
    <br/>
    <br/>
    
    
    First name: <input type="text" name="firstname" />
    Last name: <input type="text"name="lastname" /><br />
    Current Address:<input type="text" name="CurrentAddress" />City<input type="text" name="CurrentCity"/>State:<input type="text" name="CurrentState"/>Zip:<input type = "text" name= "CurrentZip" maxlength="5"/><br/>
    Social Security Number:<input type="text" maxlength="9" id="ssnum" name="ssnumber" /><br />
    Home/ Cell Phone:<input type="text"name="hphone" />
    Date of Birth:<input type="text"name="Bdob" />
    Years of School<input type="text"name="yrsschool" /><br />
    Check One::<input type="radio"name ="marital"value="Single" />Single
    <input type="radio"name ="marital"value="Married" />Married
    <input type="radio"name ="marital"value="Divorced" />Divorced &nbsp&nbsp&nbsp           
    Number of Dependents:<input type="text"size="10"name="NDependents" />Ages:<input type="text"name="ages" /><br />
    Email Address:<input type="text"  name="email" /><br/>
    
    
    
    <h4>Employment/Income Information</h4>
    Name of Employer:<input type="text"size="75" name="EmployerName" /><br />
    Address: <input type="text"size="45"name="EmployerAddress" />City:<input type="text"size="25" name="EmployerCity" />
    State:<input type="text"size="5" name="EmployerState" /><br />
    Position/Type of Business:<input type="text"size="45" name="EmployerPosition" />Phone #:<input type="text"maxlength="10"name="EmployerPhone" /><br />
    
    Gross Monthly Income:<input type="text" name="GrossIncome" />
    Other Income:<input type="text" name="otherincome" />Source<input type="text" name="otherincomesource" /><br />
    
    <h4>Assets</h4>
    Checking Acct Avg Balance:<input type="text" name="checkacctavgbal" />Savings:<input type="text" name="savingsavgbal" /><br />
    Stocks, Bonds, T-Bills etc...:<input type="text" name="StockBondTbillassets"/>
    Other<input type="text" name="otherassets" />Type<input type="text" name="otherassetstype" />
    
    
    <h3>Co-Borrower</h3>
    
    First name: <input type="text" size="25"name="cofirstname"/>
    Last name: <input type="text" size="35" name="colastname"/><br />
    Current Address:<input type="text" size="40" name="coCurrentAddress" />City<input type="text" size="15" name="coCurrentCity"/>State:<input type="text" size="5"name="coCurrentState"/>Zip:<input type = "text" size="5" name= "coCurrentZip" maxlength="5"/><br/>
    Social Security No.:<input type="text" size="15"maxlength="9" name="cossnumber" /><br />
    Home/Cell Phone:<input type="text"name="cohphone" />
    Date of Birth:<input type="text"name="codob" />
    Years of School<input type="text"name="coyrsschool" /><br />
    Check One::<input type="radio"name ="comarital"value="Single" />Single
    <input type="radio"name ="comarital"value="Married" />Married
    <input type="radio"name ="comarital"value="Divorced" />Divorced &nbsp&nbsp&nbsp           
    Number of Dependents:<input type="text"size="10"name="coNDependents" />Ages:<input type="text"name="coages" /><br />
    Email Address:<input type="text" size="70" name="coemail" /><br/>
    
    <h4>Employment/Income Information</h4>
    Name of Employer:<input type="text"size="75" name="coEmployerName"/><br />
    Address: <input type="text"size="45"name="coEmployerAddress" />City: <input type="text"size="25"name="coEmployerCity" />
    State:<input type="text"size="5" name="coEmployerState"/><br />
    Position/Type of Business:<input type="text"size="45"name="coEmployerPosition" />Phone #:<input type="text"maxlength="10" name="comEmployerPhone" /><br />
    Gross Monthly Income:<input type="text"name="coGrossIncome" />
    Other Income:<input type="text"name="cootherincome" />Source<input type="text"name="cootherincomesource" /><br />
    
    <h4>Assets</h4>
    Checking Acct Avg Balance:<input type="text" name="cocheckacctavgbal" />Savings:<input type="text" name="cosavingsavgbal" /><br/>
    Stocks, Bonds, T-Bills etc...:<input type="text" name="coStockBondTbillassets" />
    Other<input type="text" name="cootherassets" />Type<input type="text" name="cootherassetstype" />
    
    
    
    <br/>
    
    
    By check this box:<input type="checkbox" name="release" value="Yes" />
    We are stating that the above information is correct to the best of my/our knowledge and I/we intend it to be relied upon for the purpose of the application.
    I/we hereby consent and agree to have lender and its agents or affiliates obtain our credit report from all beaureas and verify all income residence and banking as well as credit information provided.
    <br/>
    <input type="submit"value="Submit" />
    
    </form> 
    
    
    </body>
    </html>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello billboy,
    The CSS you posted styles a form with the class name loanapp.
    The markup you posted has a form with no class name.

    Add that class name and see what happens -

    <form action="processloanapp.php" method="post" name="loanapp" class="loanapp" onsubmit="return(validate());">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Feb 2013
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello billboy,
    The CSS you posted styles a form with the class name loanapp.
    The markup you posted has a form with no class name.

    Add that class name and see what happens -

    <form action="processloanapp.php" method="post" name="loanapp" class="loanapp" onsubmit="return(validate());">
    Thank you so much...that did the trick. I wasnt aware the name of the form had to have "Class" I thought it just referenced the "Name" learning.....

    Would you know how to format the layout of my checkboxes differently?
    They are stacked on top of each other and I would like them smaller and next to each other

    is there a way to perform some inline css and have it over ride the external?

    Thanks again your a life save I knew there was something I was missing but I couldnt see it

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Quote Originally Posted by billboy View Post
    Thank you so much...that did the trick. I wasnt aware the name of the form had to have "Class" I thought it just referenced the "Name" learning.....
    In fact, the name attribute is not even allowed on a form (only on form controls like input, select, textarea). If you need to name your form give it an ID.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •