Jonathan Bishop Jonathan Bishop - 1 month ago 12
CSS Question

Textarea extra padding

I cant remove the extra padding above and below the textarea in google chrome

https://jsfiddle.net/y4fe39mr/1/

<td rowspan="3" class="biginputcell">
<textarea class="biginput" type="textarea" name="notes" id="notes" value=""></textarea>
</td>


I cannot figure out where the extra 15px padding is comming from in chrome.

.biginput{
width:230px;
height:150px;
font-size:0px;
font-family:sans-serif;
margin:0;
padding:0;
border:0px;
resize: none;
display: block
}
.biginputcell{
background-color:blue;
vertical-align:middle;
height:160px;
}


I have accepted the answer pointing out the issue with
rowspan
because it was the direct fix to the issue.
However as one of the answers pointed out
div
s are the better way to make my form, I will be changing the form to
div
tags rather than an overly complicated table.

Answer

Change the rowspan=3 to rowspan=4 in your markup for the elements with classes biglabelcell and biglabelinput check the following code snippet

*{
	margin:0;
	padding:0;
}
textarea {
    overflow: hidden;
}
.edittable{
	height:240px;
	width:400px;
	border-collapse:collapse;
	overflow:hidden;
	table-layout: fixed;
}
.labelcell{
	width:60px;
	height:40px;
	font-family:sans-serif;
	background-color:blue;
}
.label{
	width:50px;
	height:30px;
	font-size:20px;
	font-family:sans-serif;
}
.biglabel{
	width:50px;
	font-size:20px;
	font-family:sans-serif;
}
.biglabelcell{
	background-color:blue;
}
.inputcell{
	width:240px;
	background-color:blue;
}
.input{
	width:230px;
	height:30px;
	font-size:15px;
	font-family:sans-serif;
	margin:0;
	padding:0;
	border:0px;
}
.biginput{
	width:230px;
	height:150px;
	font-size:0px;
	font-family:sans-serif;
	margin:0;
	padding:0;
	border:0px;
	resize: none;
	display: block
}
.biginputcell{
	background-color:blue;
	vertical-align:middle;
	height:160px;
}
.selectcell{
	width:100px;
	height:40px;
	font-size:15px;
	font-family:sans-serif;
	background-color:blue;
}
.select{
	width:90px;
	height:30px;
	border:0px;
}
.buttoncell{
	height:100px;
	width:100px;
	background-color:blue;
}
.button{
	height:90px;
	width:90px;
	border:0px;
}
		<form action="edit.php" method="POST">
			<table class="edittable">
				<tr>
					<td class="labelcell">
						<label class="label" for="time">Time:</label>
					</td>
					<td class="inputcell">
						<input class="input" type="text" name="time" id="time" value="" />
					</td>
					<td class="selectcell">
						<select class="select" id="preset" onchange="fillpreset(value)">
							<option value="0">PRESET</option>
							<option value="1">Pre Service</option>
							<option value="2">Worship</option>
							<option value="3">MC Bridge</option>
							<option value="4">Message AM</option>
							<option value="5">Message PM</option>
						</select>
					</td>
				</tr>
				<tr>
					<td class="labelcell">
						<label class="label" for="events">Event:</label>
					</td>
					<td class="inputcell">
						<input class="input" type="text" name="events" id="events" value=""/>
					</td>
					<td rowspan="2" class="buttoncell">					 
						<input class="button" type="submit" name="task" value="Go" />
					</td>
				</tr>
				<tr>
					<td rowspan="4" class="biglabelcell">
						<label class="biglabel" for="notes">Notes:</label>
					</td>
					<td rowspan="4" class="biginputcell">
						<textarea class="biginput" type="textarea" name="notes" id="notes" value=""></textarea>
					</td>
				</tr>
				<tr>
				</tr>
				<tr>
					<td rowspan="2" class="buttoncell">		
						<input class="button" type="submit" name="task" value="Clear" />
					</td>
				</tr>

Hope this helps. If not can you please explain how the page should look like a snapshot would be helpful

Comments