CSS: Table and Table-Cell Replacement for Ie7

CSS: table and table-cell replacement for IE7

There are two ways to accomplish this. The first:

#header-nav{
    overflow: hidden;
    zoom: 1; /* IE6 and below work around */
}

#header-nav li{
    float: left;
    margin: 0;
    padding: 0;
}

#header-nav li a{
    display: block; /* if you want height and width */
    }    

The second:

#header-nav li{
    margin: 0;
    padding: 0;
    display: inline;
}

Personally I use the first of the two as it provides a bit more control for styling a block for color, width, height, margin, padding, etc. Plus, when you do a:hover the entire box is a link; not just the text. My recommendation is to not use tables. The results are unpredictable as you have seen. Not to mention, now its easier to add sub-menu's, using JQuery or CSS.

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.

CSS display table in IE

IE7 doesn't support display:table, your code looks fine in IE8, IE9 and IE10. So either you must use an actual <table> or, if it's an option, use floats instead.

No other way, I'm afraid.

Edit: Apparently this is for your page layout. You shouldn't be using <table> or display:table. Just float some DIVs man!

IE7 gets the content in my table to overlap

Three things:

1. The code would be much easier to fix and manipulate if you separated structure (HTML) from style (CSS). Not a terrible criticism, just an observation.

2. You could remove the positioning and floats in your tds and give the elements display:inline-block. Might work.

3. If that fails, use a conditional comment to target IE7 (eg., <!--[if IE 7]>) and apply widths to the tds there.

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.

Table layout wrong in IE(7)

I assume you are complaining about the minimal height of the middle row (the one containing only rowspanned cells), and the enlarged height of the adjacent rows to compensate, leaving gaps between the divs.

IE cannot calculate optimal row heights when the row contains only rowspanned cells. The usual solution when you absolutely cannot rejig it to get rid of the rowspan is to add a 1px 'dummy' column to one side of the table, containing empty cells, each with the 'height' set to how high the row should be.

But yes, depending on what you're planning to do with this, a CSS layout may well be more appropriate. If it's really a fixed-pixels-for-everything layout like this example, absolute positioning for each div will be a lot, lot easier.

Other bits: CSS width/height values require units (presumably 'px'); valign/cellspacing/etc. can be more easily done in a stylesheet even if you are using table layouts; a standards-mode DOCTYPE may prevent some of the worse IE bugs (although, not this old, non-CSS-related one).

---

Related Topics