Question

I want to use display: table and display: table-cell for my layout in browsers that support it. In IE7 I simply want to float my columns (since I assume it’s not possible to get it to work in that browser), but cannot find anything about how to do it using Modernizr. Can anyone help me please?

I suppose I could use a browser conditional, but was hoping to not have to break out another CSS file.

Thanks!

Answer 1

If all you want to do is apply a single different rule for IE7 and less, I’d be tempted not to use Modernizr for this specific job.

Simply do something like this, to avoid having to "break out another CSS file":

#menu li {
    display: table-cell;
    *float: left;
}

This uses the Star Property Hack to provide a rule to only IE7 and below.

Another option is the !ie7 hack, which is for some odd reason my highest voted answer.