Search code examples
htmlcssjoomlaalignment

Simple table won't size up

Notice the top colored table on the sidebar that says LIFESTYLE.

The text just won't vertical-align to the middle and that table just won't get any shorter.

It's basically a custom html module in Joomla with Gantry and K2 that I put some PHP into (Using Sourcerer) so it chooses it's table bg color based on an array of colors. Simple right?

There's got to be some margin, padding, something somewhere and I can't find it. Any ideas?

Solution

  • To be absolutely honest I don't know why this is happening but this seems to fix the issue...

    Replace the following:

    <div class="titlebars">
    <font color="#FFFFFF">LIFESTYLE</font>
</div>

    with:

    <span class="titlebars">
    <font color="#FFFFFF">LIFESTYLE</font>
</span>

    EDIT

    The problem is the <br> tag after the <div>:

    <td style="vertical-align: middle; width: 100%; line-height: normal; margin: 0px 0px 0px; padding: 0px; cellpadding=0 cellspacing=0"> 
    <div class="titlebars">
        <font color="#FFFFFF">LIFESTYLE</font>
    </div> 
<br> <----- THIS IS THE PROBLEM
</td>

    Remove it and the cell behaves as you want it to.