[RESOLVED] form field backgrounds and positing

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] form field backgrounds and positing

gellegbs

White fields with set width and height will not go away, also they won't position. Form works fine otherwise. The purple areas are where I want the fields to fit.
here's the page with the form FORM ISSUES


body{
background: #000000; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzkyMWNmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzE0NzhmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #000000 0%, #921cf6 50%, #1478fd 50%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#921cf6), color-stop(50%,#1478fd), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* IE10+ */
background: linear-gradient(to right,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-8 */
color:#0eea09;
text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

a img {border: none; }

div, h1, form, fieldset, textarea
{
	outline:none;
	border:none;	
	} 

h1{
	font-size:25px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	text-transform:uppercase;
	color:#0eea09;	
	padding-left:5px;
	}
	h1:hover{
	color:#921cf6;		
		}
#container
{
	margin: 0 auto;
	width: 1025px;
	min-height:768px;
	height: 100%;
	background-image:url(http://www.warpedentertainments.adklicks.info/images/background.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	float: none;
	outline:none;
		-moz-border-radius:55px;
	border-radius:55px;
   -webkit-box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.87);
   -moz-box-shadow:    -2px 4px 3px rgba(0, 0, 0, 0.87);
   box-shadow:         -2px 4px 3px rgba(0, 0, 0, 0.87);



}

#header
{

padding: 0px;
width: 100%;
height:78px;
}

#header h1 {
	margin: 0; 

}


/*nav menu*/
#navigation
{
	float:inherit;
	width:895px;
	height:78px;
	outline:none;
	padding-left:55px;
	padding-top:20px;
}

#navigation ul
{
	margin: 0;
	padding: 0;
outline:none;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
outline:none;
}

#navigation li a
{
	display: block;
	float: left;
	padding:0px;
	text-decoration: none;
	outline:none;

}

/*content div to contain form*/

#content
{
	clear: right;
	background-image:url(http://www.warpedentertainments.adklicks.info/images/contactbox.png);
 	background-repeat:no-repeat;
   background-position:left top;
   width:1028px;
	min-height:668px;
	margin-top:-50px;


}


#info{
	float:left;
	background-image:url(http://www.warpedentertainments.adklicks.info/images/contactinfo.png);
	background-repeat:no-repeat;
	background-position:left top;
	width:524px;
	min-height:194px;
	margin-top:100px;
	margin-left:18px;

}

/*contact form*/

#form_wrapper{
	position:relative;
	width:365px;
	height:400px;
	display:block;
	float:right;
	top:50px;
	right:100px;
	border-radius:100px 5px 100px 5px;
	-moz-border-radius:100px 5px 100px 5px;
	-webkit-border-radius:100px 5px 100px 5px;	
	background: rgb(43,43,43); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMmIyYjJiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg,  rgba(43,43,43,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(43,43,43,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  rgba(43,43,43,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  rgba(43,43,43,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  rgba(43,43,43,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(45deg,  rgba(43,43,43,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
overflow: visible;
-webkit-box-shadow: 4px 4px 2px rgba(0, 0, 0, 1);
-moz-box-shadow:    4px 4px 2px rgba(0, 0, 0, 1);
box-shadow:         4px 4px 2px rgba(0, 0, 0, 1);

}

#h2{
	position:relative;
	text-align:center;
	font-size:22px;
	padding:10px;
	font-family:Comic Sans MS, sans-serif;

}

#form{
	text-transform:uppercase;
	font-family:Comic Sans MS, sans-serif;

	}



.selector{

padding-left:20px;
left:20px;
font-size:14px;



}
.input{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	height:30px;
	left:20px;
	width:170px;
	overflow:visible;
	background-color:#8e1bf0;


}

#textarea{
	position:relative;
	height:120px;
	resize:none;
	width:170px;
	max-width:170px;
	max-height:120px;
	left:20px;
	overflow:visible;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
		background-color:#8e1bf0;

	}

#submit{


left:40px;
height:30px;
width:80px;
background-color:#8e1bf0;
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
}

coderunner

Hello gellegbs,

Something like this ?

1- Search in css file for

.input{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	height:30px;
	left:20px;
	width:170px;
	overflow:visible;
	background-color:#8e1bf0;


}

#textarea{
	position:relative;
	height:120px;
	resize:none;
	width:170px;
	max-width:170px;
	max-height:120px;
	left:20px;
	overflow:visible;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
		background-color:#8e1bf0;

	}

#submit{


left:40px;
height:30px;
width:80px;
background-color:#8e1bf0;
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
}

and replace with

.input{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	height:22px;
	/*left:20px;*/
	width:165px;
	overflow:visible;
	background-color:#8e1bf0;
	padding:5px;
	}

input {
	width: 160px;
	height: 16px;
	}	

#textarea{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	height:80px;
	width:165px;
	overflow:visible;
	background-color:#8e1bf0;
	padding:5px;
	}

textarea {
	width:162px;
	height:75px;
	}

#submit{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	height:22px;
	width:80px;
	padding: 2px;
	}

.submit {
	width: 80px;
	height: 22px;
	}

2- Search in contact.htm for

					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">

<div class="selector">Name</div><br></br>
   <div class="input"> <input type="text" name="cf_name"></input></div><br></br>
	<div class="selector">Email</div><br></br>
    <div class="input"><input type="text" name="cf_email"></input></div><br></br>
	<div class="selector">Message</div><br></br>
    <div id="textarea"><textarea name="cf_message" rows="5" cols="1"></textarea></div><br></br>
	<div id="submit"><input type="submit" value="Send"></input></div><br></br>

				</form>

and replace with

					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">
						<div class="selector">Name</div>
						<div class="input"> <input type="text" name="cf_name" /></div><br />
						<div class="selector">Email</div>
						<div class="input"><input type="text" name="cf_email" /></div><br />
						<div class="selector">Message</div>
						<div id="textarea"><textarea name="cf_message"></textarea></div><br />
						<div id="submit"><input type="submit" value="Send" class="submit"></div></br />
					</form>

I hope this is what you were looking for.
Tested in the latest versions of IE - FF - Chrome - Opera - Safari

Regards

gellegbs

ok I implemented what you said and that fixed my aligning issues but the white floating fields still remain and the submit button is half showing. If you can think of any that would be hreat I appreciate the help so far.

coderunner

Hello gellegbs,

When I look at the source code of your page contact.html then I see that you didn't change the code I mentioned in my earlier reply.
You only changed the code in the css file but not the code on the contact.html page!
Re-read my earlier reply #

2- Search in contact.htm for
					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">

<div class="selector">Name</div><br></br>
   <div class="input"> <input type="text" name="cf_name"></input></div><br></br>
	<div class="selector">Email</div><br></br>
    <div class="input"><input type="text" name="cf_email"></input></div><br></br>
	<div class="selector">Message</div><br></br>
    <div id="textarea"><textarea name="cf_message" rows="5" cols="1"></textarea></div><br></br>
	<div id="submit"><input type="submit" value="Send"></input></div><br></br>

				</form>
and replace with
					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">
						<div class="selector">Name</div>
						<div class="input"> <input type="text" name="cf_name" /></div><br />
						<div class="selector">Email</div>
						<div class="input"><input type="text" name="cf_email" /></div><br />
						<div class="selector">Message</div>
						<div id="textarea"><textarea name="cf_message"></textarea></div><br />
						<div id="submit"><input type="submit" value="Send" class="submit"></div></br />
					</form>

please.

PS the tag <input ...> doesn't have a closing tag!

Regards

gellegbs

ok made the changes you said including the <input..... />, still wierd floating white fields, the only change I made to your code was to take the / off of </br /> on the line with a submit ID I made it a <br /> should it be that?

coderunner

New code.

1- Replace in contactform.css file

.input{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	height:22px;
	/*left:20px;*/
	width:165px;
	overflow:visible;
	background-color:#8e1bf0;
	padding:5px;
	}

input {
	width: 160px;
	height: 16px;
	}	

#textarea{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	height:80px;
	width:165px;
	overflow:visible;
	background-color:#8e1bf0;
	padding:5px;
	}

textarea {
	width:162px;
	height:75px;
	}

#submit{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	height:22px;
	width:80px;
	padding: 2px;
	}

.submit {
	width: 80px;
	height: 22px;
	}

with

.input{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	height:22px;
	left:20px;
	width:165px;
	overflow:visible;
	background-color:#8e1bf0;
	padding:5px;
	}

input {
	width: 160px;
	height: 16px;
	}	

.textarea{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	left:20px;
	height:80px;
	width:165px;
	overflow:visible;
	background-color:#8e1bf0;
	padding:5px;
	}

textarea {
	width:162px;
	height:75px;
	}

.submit{
	position:relative;
	border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	left:20px;
	height:22px;
	width:80px;
	overflow:visible;
	background-color:#8e1bf0;
	padding: 3px;
	}

.submit_button {
	width: 80px;
	height: 22px;
	}

2- Replace in contact.html the code between <form> and </form>
with

					<form action="http://www.warpedentertainments.adklicks.info/contact.php" method="post">
						<div class="selector">Name</div>
						<div class="input"> <input type="text" name="cf_name" /></div><br />
						<div class="selector">Email</div>
						<div class="input"><input type="text" name="cf_email" /></div><br />
						<div class="selector">Message</div>
						<div class="textarea"><textarea name="cf_message"></textarea></div><br />
						<div class="submit"><input type="submit" value="Send" class="submit_button"></div></br />

				</form>

PS What browser + version do you use ?

Regards

coderunner

Screenshot in IE8 - IE9 - FF - Chrome

gellegbs

I got it now thanks

gellegbs

I had to kill the #input.. I mean #textarea, hmm nvm posted too early textarea works now oh browser firefox 13 linux

gellegbs

ok forms hate class css I get it.. its working thanks you soo much

if you know, how come I cant name a css class rule for a field? Or am i not getting the point? i thought everything began with a . class or an # ID in a stylesheet

coderunner

Okay I see you didn't want the purple div around the input, textarea and submit button althought it was in your first code but it looks good.
Next time you better use "class=..." in stead of "id=..." (eg as in textarea and submit) in code and css.

You're welcome.

If your problem has been solved then is it possible to mark this topic as "Resolved".
(menu bar above your nickname --> Thread Tools --> option: "Mark Thread Resolved")

Regards

coderunner

You give a div around an input a class but if you want to style the input itself you have to add a class in the input tag as wel or if the styling is the same for all the input fields you can just write input in the stylesheet
eg.

All input fields have different styling

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
	.test1 {
		width:100px;
		height: 22px;
		color: #FFFFFF;
		background-color: #0000FF
	}
	.test2 {
		width:200px;
		height: 22px;
		color: #FFFFFF;
		background-color: #0000FF
	}
</style>
</head>

<body>
	Name<br />
	<input type="text" name="name" class="test1">
	<br />
	Email<br />
	<input type="text" name="email" class="test2">
</body>
</html>

All input fields have the same styling

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
	input {
		width:100px;
		height: 22px;
		color: #FFFFFF;
		background-color: #0000FF
	}
</style>
</head>

<body>
	Name<br />
	<input type="text" name="name">
	<br />
	Email<br />
	<input type="text" name="email">
</body>
</html>

Regards

gellegbs

Well I'm never gonna name my fields input again! Lesson learned. thanks