CSS Question in Internet Explorer

Question

I have an idea that I think can be done.

In the CSS file I need to put:

height: 50px; 

If the browser is Internet Explorer and

 height: 45px; 

if the browser is Chrome or Firefox.

How can i do this?

Answer 1

A special tag can be used as shown below:

 <style type="text/css" media="screen"> .yourTag { weight: 45px; } /*Normal browsers*/ </style> <!--[if IE]> <style type="text/css" media="screen"> /*IE*/ .yourTag { weight: 50px; } </style> <![endif]--> 

NB: IE understands the weight of an element with borders when other browsers do not.

Answer 2

There are several ways to achieve this, since it is often necessary to provide alternative stylesheets for IE compared to other browsers.

However, it is important to note that the IE version is also crucial - different versions of IE can have different problems, so you should target your hacks. In particular, Microsoft recently released IE9, which is significantly more compatible with other browsers than earlier versions; you almost certainly won't need your hack in IE9, so you have to be careful to rule it out.

If you explicitly want to target IE - for example, you need to get around a specific IE bug, then the best approach is to use conditional comments. This is an IE-specific feature that allows you to specify code that only works in IE, as well as specify the versions of IE in which it will work.

Conditional comments are as follows:

 <!--[if lt IE 9]><link rel="stylesheet" href="ie-specific-styles.css" /><![endif]--> 

IE sees special code; all other browsers view it as a regular HTML comment and ignore it.

You can learn more about them here: http://www.quirksmode.org/css/condcom.html

I would point out that many problems with window size in IE are caused by not using a valid Doctype. If your HTML code forces the browser to go into quirks mode, then you get the same problems in the same way, but the correct solution is not to crack styles until it works; the correct solution is to fix the HTML so that the browser does not go into quirks mode. This should lead to the fact that the box model will work correctly, and many problems with the odd layout will disappear.

Answer 3

You can use conditional CSS using

 <!--[if IE 6]> According to the conditional comment this is Internet Explorer 6 <![endif]--> 

There is also a way to check if Internet Explorer is not or not.

For example, Conditional style sheets and CSS hacks? Answer: None! .

Answer 4

Without specifying which version of IE you're talking about, it's hard to say. You can use a CSS hack, but conditional comments are usually better because they are more reliable in the future. Conditional comments are used like this:

 <!--[if IE] <link type="text/css" rel="stylesheet" href="ie-styles.css" /> <![endif]--> 

This is seen as a regular comment in browsers other than IE, but IE will interpret it as code.

See: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

Answer 5

While this is possible, it would be best to make sure that you eliminate all the causes for different CSS in the first place. Does your HTML document have a DOCTYPE so that IE is in standard mode? If so, show us a specific situation where you think you need different CSS, because this is most likely the best solution.

Answer 6

I did a couple of searches and found them, check that this can be useful:

• Firefox only targeting with CSS

• Can I target Google Chrome? (Yes, you can)

Answer 7

  <script type = "text/javascript"> function checkBrowser() { var browserName=navigator.appName; if (browserName=="Netscape") { //set height as 45px; } else { if (browserName=="Microsoft Internet Explorer") { //set height as 50px; } } } </script>