How can I prevent this div in my table from increasing the cell height?


Tags: html,css,css3

Problem :

I have an example of the problem here: http://jsfiddle.net/s6t3p/

I have the following markup:

<h1>Just Text</h1>
<table>
    <tr>
        <td class='cell'>Some Text</td>
        <td class='cell'>More Text</td>
    </tr>
</table>


<h1>With Icon Cell</h1>
<table>
    <tr>
        <td class='cell'>Some Text</td>
        <td class='cell-ico'><div class='ico'></div></td>
        <td class='cell'>More Text</td>
    </tr>
</table>

And the following CSS:

table,td,tr
{   
    margin: 0; padding: 0;
    border: none; outline: none;
    font-size: 100%; font: inherit;
    vertical-align: baseline;
}

table  { border-collapse: collapse; border-spacing: 0;}
.cell 
{
    border:solid 1px #DDD; padding:0 5px; text-align:left;
    line-height:27px;
}
.ico {width:24px; height:24px; background:#05F;}

I wish for each cell to be 27px in height. This is the case for the 1st table. But the second table which contains a cell with a 24px div has a height of 32px. I don't understand why. It seems like a 24x24 div should fit inside fine without increasing the cell height.

Can anyone explain why this is happening and how to fix it so that I can keep the cells at a height of 27px? I am currently testing with FireFox 29.

Thanks for any help.



Solution :

If you are looking to display tabular data, then this is the way to go :)

The behaviour is caused by vertical-align: baseline;.

Just reset the vertical-align for .cell-ico and provide a set height. Give .ico a height of 100%.

Have a fiddle

.cell-ico {
    height: 24px;
    vertical-align: top;
}
.ico {
    width:24px;
    height: 100%;
    background:#05F;
    display: block;
}

    CSS Howto..

    Every third post excerpt shows up on its own line

    How to set Highcharts data series in x-axis using crosshairs?

    Maintain border-spacing when using show() on a display:table element hidden with display:none

    How to implement cross-context CSS image cursors?

    how to force page break between absolutely positioned elements in css

    How to use a sprite for a background on a div, positioning to a part of the sprite to the right of the div

    How can I align multiple lists in the same row?

    Unable to show progress bar

    How to fix bottom of layout of 100% height (jQuery Mobile and Google Map)?

    How to make circle by using HTML CSS only?

    How to use below css as inline for table row (tr)?

    how to make sure that that grid layout row adjusts the height automatically as per content

    How do I make an image shrink and grow according to re-sizing the browser.

    How do I increase the width of a navbar dropdown?

    How to override default CSS in cakePHP 1.3?

    how to make unorder list all in same block and have gap within each link (CSS)

    How to do mutiple css class in one line javascript code

    only show those div where i do mouse-over

    CSS: How do I prevent the background color of div from going behind the image it is sitting above?

    How can I create DIV “rows” while having a DIV float beside them?

    I want to add same function for two css class. How can I do it?

    How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

    How to select attribute value for a selected element with wombat

    How to horizontally center text in bootstrap button?

    css how to get rounded corners on button.

    How to fix the Height for this area?

    How do I apply CSS rules from a local domain to content in an iFrame from another domain

    How to apply CSS after adding elemnts with jquery

    How to switch “controlgroup” background color

    How to convert all color code #XXYYZZ to shorter 3 character version #XYZ of whole css file?