Is it possible to specify seperate Firefox and IE height?

Question

I have two tables that need to line up side by side. In order to achieve this I have to specify a td height.

In IE the height should be 2.1em. In Mozilla it needs to be 1.76em.

There does not appear to be a

-moz-height:1.76em;

Any idea how I can achieve my goal?

Answer 1

You can put the IE height into a separate stylesheet and load it after the default one, using IE-conditional comments so the other browsers ignore it. Otherwise, you can use jQuery to change the height after it's loaded (if ($.browser.msie))

Answer 2

Yes it is. For Fire Fox do this:

@-moz-document url-prefix() {
    //Your css here
    #my-id { font-size: 100%; }
}

For IE you can do something like this:

[if IE 8]><link rel="stylesheet" href="DefaultSTyleForIE8.css" type="text/css" media="screen, projection"/><![endif]

This css will only work for IE 8