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..

    How to make hover css menu fade in and out?

    How to use CSS on autocomplete textbox selected values

    Facebook Like Button - how to disable Comment pop up box?

    How to change height of ui-grid row?

    How to manage z-index of navigation menu?

    How to change the order of columns in CSS template to put important content first?

    How to build sliding horizontal menu. CSS

    Change Color Themes - How To Prevent the Site Goes Back to Default

    How implement google fonts when download the font in collection?

    How to get started with Blueprint [CSS Framework]?

    Why Does the

    tag creates a black background here? and how do I get rid from the border?

    How to deal with image references in CSS in a Rails 3.1 app

    How to implement CSS file style on selected div

    How to Manage Responsive Design in percentage(%)?

    How to add head section in a page that has layout template

    I want to bring css for select option. how to write for this image, sample output like this

    How can we retrive style from css by selector without creating element?

    how to i target a another div with jquery or css

    How to correctly add nested divs

    How to remove all input outline?

    How can I give an image a black opaque overlay?

    How can i get the source of the image in one div to another?

    How to override a property set in an id (CSS)

    how to set the outer
    adapt to the browser,and the div in it adapt to the outer one?

    How to translate html, css and js into one javascript (animation)

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    css code how to remove space between div class

    How to remove background color from reply of html email template in Outlook 2010/2013

    Jquery: Show/hide menu with single button

    How to create this layout using CSS