CODEWITHSUNDEEP
cssfirefox
P.Brian.Mackey
P.Brian.Mackey

Reputation: 44285

Is it possible to specify seperate Firefox and IE height?

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?

Upvotes: 4

Views: 14193

Answers (7)

Jomin George Paul
Jomin George Paul

Reputation: 571

in mozilla it is possible to change the height for mozilla by height: -moz-calc(470px); and auto height by height: -moz-available;

Upvotes: 2

DA.
DA.

Reputation: 40671

Browser detect IE using IE's conditional comments and write out separate BODY tags:

<!--[if IE]><body class="ie"><!--<![endif]-->
<!--[if !IE]><!--><body><!--<![endif]-->

Then whenever you have a style, you can be more specific by adding the ie class to over-ride only IE:

.mystyle {styles for good browsers}
.ie .mystyle {styles for IE}

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

Here's a list of CSS filters by browser:

http://en.wikipedia.org/wiki/CSS_filter

Upvotes: 1

brandizzi
brandizzi

Reputation: 27050

I would shamelessly use IE conditional comments:

<style>
td {
    height: 1.76em;
}
</style>

<!-- [if IE]>
<style>
td {
    height: 2.1em;
}
<style>
<!endif-->

Upvotes: 1

Andrew
Andrew

Reputation: 13853

I would recommend the html5 boilerplate method,

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

then you can target ie in your css like,

.oldie #myel{
    height: 2.1
}

Upvotes: 1

codecraftnap
codecraftnap

Reputation: 1553

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

Upvotes: 5

Soatl
Soatl

Reputation: 10592

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

Upvotes: 2

Related Questions