No replies
mrm
mrm's picture
Offline
newbie
Last seen: 11 years 45 weeks ago
Joined: 2010-01-15
Posts: 1
Points: 2

Hi,

First want to say hello to everyone. New member here.

I want a simple form layout and got one from off line and tweaked it a little.

Problem is when i was reading comments from people about the form css... people said the css code and the way the form was built it the incorrect way.

My code is below. I simply want what i got now but made so it will work with all browsers and code that is written properly.

Could someone possibly edit it for me to make it so it is written properly please? I have found some form styles online but they seem over complex for what i want. I like having my form fields by the side of my label text with some gay like i have now. I did like the registration form for this forum althou i would rather like the text boxes by the side of labels. I always used tables but don't want to use them anymore.

Thanks for any help.

CSS:

/* form elements */
 
.cssform p{
width: 300px;
clear: left;
margin: 0;
padding:5px;
padding-left: 160px; /*width of left column containing the label elements*/
height: 1%;
}
 
.cssform label{
font-weight: bold;
margin-top: 5px;
float: left;
margin-left: -160px; /*width of left column*/
width: 155px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}
 
.cssform input[type="text"], input[type="password"] { 
/*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
height:22px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #155D98;
border: solid 1px #CCCCCC;
border-bottom: solid 1px #CCCCCC;
border-right: solid 1px #CCCCCC;
padding-top:4px;
background:url(<a href="http://www.jotform.com/images/styles/style1_txt_bg.gif" rel="nofollow">http://www.jotform.com/images/styles/style1_txt_bg.gif</a>) #f6f6f6 top repeat-x;
}
 
.cssform select.other {
background:url(<a href="http://www.jotform.com/images/styles/style1_txt_bg.gif" rel="nofollow">http://www.jotform.com/images/styles/style1_txt_bg.gif</a>) #f6f6f6 top repeat-x;
color: #155D98;
border: solid 1px #CCCCCC;
border-bottom: solid 1px #CCCCCC;
border-right: solid 1px #CCCCCC;
height:22px
 
}
 
.cssform input[type="submit"], form input[type="button"], form input[type="reset"] {
background: #F0F0F0;
border: solid 1px #CCCCCC;
color: #155D98;
padding:5px;
font:Verdana, 12px;
margin-top: 10px;
float:inherit;
}
 
.cssform textarea{
width:inherit;
height:inherit;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #155D98;
border: solid 1px #CCCCCC;
border-bottom: solid 1px #CCCCCC;
border-right: solid 1px #CCCCCC;
background:url(<a href="http://www.jotform.com/images/styles/style1_txt_bg.gif" rel="nofollow">http://www.jotform.com/images/styles/style1_txt_bg.gif</a>) #f6f6f6 top repeat-x;
 
}
 
/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: <a href="http://www.positioniseverything.net/explorer/threepxtest.html
*/
 
*" rel="nofollow">http://www.positioniseverything.net/explorer/threepxtest.html
*/
 
*</a> html .threepxfix{
margin-left: 3px;
}

FORM:

<form action="#" method="post" class="cssform">
 
    <p>
    <label for="first_name">Your First Name</label>
    <input type="text" id="first_name" name="first_name" maxlength="40" value="" />
    </p>
 
    <p>
    <label for="last_name">Your Surname</label>
    <input type="text" id="last_name" name="last_name" maxlength="50" value="" />
    </p>
 
    <p>
    <label for="gender">Gender</label>
    <select id="gender" class="other" name="gender">
    <option value=""> </option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    </select>
    </p>
 
    <p>
    <label for="msn">MSN</label>
    <input type="text" id="msn" name="msn" value="" />
    </p>
 
    <p>
    <label for="aim">AIM</label>
    <input type="text" id="aim" name="aim" value="" />
    </p>
 
    <p>
    <label for="yim">YIM</label>
    <input type="text" id="yim" name="yim" value="" />
    </p>
 
    <p>
    <label for="message">Message</label>
    <textarea name="message" id="messagage"></textarea>
    </p>
 
    <input type="submit" name="submit" value="Update Profile" /> | <input type="reset" name="reset" />
 
</form>