Textarea extra padding

advertisements

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 divs are the better way to make my form, I will be changing the form to div tags rather than an overly complicated table.


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