IE7 and the CSS Table-Cell Property

IE7 and the CSS table-cell property

A good way of solving this setting the display value to '':

<script type="text/javascript">
<!--
function toggle( elemntId ) {
    if (document.getElementById( elemntId ).style.display != 'none') {
        document.getElementById( elemntId ).style.display = 'none';
    } else {
        document.getElementById( elemntId ).style.display = '';
    }
    return true;
}
//-->
</script>

The empty value causes the style to revert back to it's default value. This solution works across all major browsers.

table-cell in ie6 and 7

Instead of hiding the element through display, you could hide its visibility. This, however, won't collapse the cell and the space it occupies will still be there. It might (or might not) satisfy your needs:

.nav-menu td  {
    visibility: hidden;
}

.nav-menu .nav-item {
    visibility: visible;
}

If you really need to get rid of that space, then you can force the cell to occupy zero pixels like this:

.nav-menu td  {
    visibility: hidden;
    width: 0 !important;
}

.nav-menu td div {
    display: none;
}

You can view a demo here: http://jsfiddle.net/7z7qr/

display :table-cell does not work in ie 7?

If you desperately need functionality that can only be provided by display: table-cell in IE7, you have two choices:

• Use a real <table> and suffer unsemantic HTML.
• Use JavaScript for IE7 (and lower) to fix it: http://tanalin.com/en/projects/display-table-htc/

Table cell width in IE7 with table-layout: fixed table

Although I had spaces between the buttons I also had some   spaces there and it was preventing the word wrap and causing the table width to exceed the width I specified. Removing   from between the buttons fixed the problem. Each   was surrounded by a space (I just wanted to add more space) and all other browsers were doing the line break correctly, but IE7 must either remove the extra spaces or assume they should be   spaces.

Internet Explorer: Bad visualization of CSS Table (table-row, table-cell)

Add the following Class in your CSS.

 fieldset input{display:inline-block}

It will resolve your issue and display properly in all the browsers.

Demo

Display already hidden table cells in IE with CSS

You need to use display: table-cell; or display: table-row; in your separate class, for your <td> and <tr> tags respectively.

This won't work in IE6/7, so there are 2 other alternatives:

1. Nest a <span> tag and use the display: (none|block) property in CSS on this instead.
2. Use text-indent: (-9999em|0) to push the text off screen.

Internet Explorer is hiding my display:table-cell content

There seems to be an issue with IE and some layout CSS in the pseudo elements. The only way it seems to work is to place the element in the DOM with the layout properties (display, width, etc.). If you put them in the ::after CSS it doesn't display properly.

.table
{
    display:table;
    table-layout: fixed;
    width: 100%;
    border:1px solid;
}

.cell
{
    display:table-cell;           
}

.icon
{
   display: table-cell;
   vertical-align: middle;
   width: 20px;
}

.icon::after
{
    font-family:FontAwesome;
    content:"\f054"; 
    font-style:normal;    
    font-size: 14px;
    color:magenta;    
}

<div class="table">
    <div class="cell">Some text</div>
    <div class="icon"></div>
</div>

Interestingly, if you put it all in the after tag, it seems to make room for the content, it just doesn't display the content. Meaning, with a lot of text in the "cell" class div, you can see that it has made room for the ::after element, it just doesn't display the content.

Example

This isn't a preferred solution, but it is a solution.

---

Related Topics