CODEWITHSUNDEEP
htmlcss
bojo
bojo

Reputation: 73

Vertical Align Adding Height to Cell?

I have vertical-align set to text-top, which works fine for everything except the top row, which gets really tall for some reason. I have tried setting just that row to vertical-align: bottom !important, however the problem still occurs. When I inspect element with chrome, it shows the vertical-align: text-top crossed out, but when I uncheck it, it fixes it.

Here is the HTML for the table:

<table class="serviceTimes" style="width:100%;">
<tbody>
<tr>
<td style="vertical-align: bottom !important;"><h3>Sundays</h3></td>
</tr>
<tr>
<td style="width:25%; vertical-align:text-top;">
<h4>Praise &amp; Worship</h4>
<p>(Suite 200)
(w/ Kidz Klub @ 10:30 following the praise time in Suite 204)</p></td>
<td colspan="2" style="vertical-align:text-top;"><h4>10:30 AM &amp; 7 PM</h4></td>
<td><img src="http://www.harrisonswebsites.com/AmesFoursquareChurch/wp-content/uploads/2014/06/old_pocket_watch_short.jpg" alt="old_pocket_watch_short" width="278" height="267" class="alignright size-full wp-image-64" /></td>
</tr>
<tr>
<td><h3>Tuesdays</h3></td>
</tr>
<tr>
<td style="width:25%;">
<h4>Womens' Bible Study</h4>
<p>(1st &amp; 3rd week each month)</p></td>
<td style="width:25%; vertical-align:text-top;"><h4>1:00 PM</h4></td>
</tr>
<tr>
<td><h3>Wednesdays</h3></td>
</tr>
<tr>
<td style="width:25%;">
<h4>Bible Study</h4></td>
<td style="width:25%; vertical-align:text-top;"><h4>7:00 PM</h4></td>
</tr>
<tr>
<td><h3>Fridays</h3></td>
</tr>
<tr>
<td style="width:25%;">
<h4>Power Hour</h4>
<p>(Praise &amp; Prayer)</p></td>
<td style="width:25%; vertical-align:text-top;"><h4>7:00 PM</h4></td>
</tr>
<tr>
<td><h3>Saturdays</h3></td>
</tr>
<tr>
<td style="width:25%;">
<h4>Men &amp; Women's Groups</h4>
<p>(2nd week each month)</p></td>
<td style="width:25%; vertical-align:text-top;"><h4>6:00 PM</h4></td>
</tr>
</tbody>
</table>

Here is the css for that table:

.serviceTimes td {
    border-top: 0px solid #ededed !important;
    padding: 0px 10px 0px 0px !important;
    vertical-align: text-top;
}
.serviceTimes tr {
    padding: 0px 0px 0px 0px !important;
}
.serviceTimes h3 {
    margin: 0px 0px !important;

What could be causing this? Thanks!

Upvotes: 1

Views: 73

Answers (1)

jasonhansel
jasonhansel

Reputation: 642

By default in HTML, table rows stretch to the height of their contents. Therefore, the <img> tag in your code is stretching the height of the row that contains it. In order to fix this, you might try applying position:absolute to the <img>, so that its row will not stretch the way it now does.

Upvotes: 1

Related Questions