CSS Form, Textarea Out of Bounds

PCHomepage · May 31, 2014

I have several rather simple forms that I've styled easily but those with textareas, they are showing out of bounds of the form and go right behind the submit buttons. With the form's background temporarily in black so that I can see where the browser "thinks" the boundaries of the form are, attached is a screen capture showing the text area to the bottom of the image. If I make it tiny, say 200px wide and 50px high, it fits but it needs to be larger to be of any use.

This isn't yet online anywhere and the entire style sheet is too long to post here but the only styles specifically for the forms are:

CSS:

form {
	position: relative;
	width: 100%;
	z-index: 5;
}

legend {
	color: #fff;
	background: #ffa20c;
	border: 1px solid #781351;
	padding: 2px 6px;
	font-weight: bold;
} 

textarea:focus {
	outline: none !important;
	border: 1px solid blue;
	box-shadow: 0 0 10px #e5fff3;
	background-color: #e5fff3;
}

input:focus {
	outline: none !important;
	border: 1px solid blue;
	box-shadow: 0 0 10px #e5fff3;
	background-color: #e5fff3;
}

label {
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-top: 1px solid #7B6D6B;
	border-left: 1px solid #7B6D6B;
	background-color: #948684;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: bold;
	float: left;
	text-align: right;
	text-justify: none;
	vertical-align: middle;
	margin-right: 5px;
	padding-right: 10px;
	display: block;
	height: 20px;
	width: 150px;
}

form-submit-button {
	position: relative;
	height: 25px;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: 1px solid #000000;
	background-color: #EAEAEA;
	font-size: 13px;
	font-family: inherit;
	color: #000000; 
	font-weight: bold;	

	padding-top: 20px;
	text-align: center;
	} 

input, textarea, select, button {
	width : auto;
	margin: 0;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

textarea {
	display : block;
	padding : 10px;
	margin  : 10px 0 0 -10px;
	width   : 600px;
	height  : 200px;
	overflow: auto;
}

PCHomepage · May 31, 2014

I found what was missing: the fieldset needed display: inline-block;. It still needs some tweaks and simplification as it got overly-complicated in trying to locate the problem but here is what I have now that works reasonably well:

CSS:

fieldset {
	position: relative;
	display: inline-block;
	margin: 0 15px;
	z-index: 5;
}

fieldset p {
	height: 10px;
	margin-bottom: 2px;
}

legend {
	color: #fff;
	background: #ffa20c;
	border: 1px solid #781351;
	padding: 2px 6px;
	font-weight: bold;
} 

textarea:focus {
	outline: none !important;
	border: 1px solid blue;
	box-shadow: 0 0 10px #e5fff3;
	background-color: #e5fff3;
}

input:focus {
	outline: none !important;
	border: 1px solid blue;
	box-shadow: 0 0 10px #e5fff3;
	background-color: #e5fff3;
}

label {
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-top: 1px solid #7B6D6B;
	border-left: 1px solid #7B6D6B;
	background-color: #948684;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: bold;
	float: left;
	text-align: right;
	text-justify: none;
	vertical-align: middle;
	margin-right: 5px;
	padding-right: 10px;
	display: block;
	height: 20px;
	width: 150px;
}

/*
.FooterTD {
	padding-top: 20px;
	position: relative;
	text-align: center;
}
*/

input, textarea, select, button {
	position: relative;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

input[type='submit'] {
	position: relative;
	text-align: center;
    display: inline-block;
    width: auto;
	height: 25px;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: 1px solid #000000;
	background-color: #EAEAEA;
	font-size: 13px;
	font-family: inherit;
	color: #FFFFFF; 
	font-weight: bold;	
	padding-top: 20px;
} 

input[type='textarea'] {
	position: relative;
	padding : 10px;
	margin  : 20px 0 0 20px;
	width   : 80%;
	height  : 200px;
	overflow: auto;
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS Form, Textarea Out of Bounds

PCHomepage

Programmer

PCHomepage

Programmer

Similar threads

Part and Inventory Search

Sponsor