Apply a Different CSS Width Property Based on Browser? (Ie8, Ff)

Apply a different CSS width property based on browser? (IE8, FF)

For Firefox and IE specifically:

In CSS:

@-moz-document url-prefix() {
    //Firefox-specific CSS here.
}

In HTML:

<!--[if IE 8]>
    <style type="text/css">
        //IE8-specific CSS here.
    </style>
<![endif]-->

Apply style ONLY on IE

Update 2017

Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.

---

Original

The simplest way is probably to use an Internet Explorer conditional comment in your HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.

How to apply different css style to one class in different browsers

/* Chrome 28+ (also affects Safari and MS Edge now) */
@supports (-webkit-appearance:none) { /* Needed styles */ }

/* Firefox (any) */
_:-moz-tree-row(hover), .selector { /* Needed styles */ }

/* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector { /* Needed styles */ }

/* Internet Explorer 10+ */
_:-ms-lang(x), .selector { /* Needed styles */ }

/* Also Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Needed styles */
}

/* Internet Explorer 9+ */
_::selection, .selector { /* Needed styles */ }

/* Safari 6.1+, Chrome for iOS */
@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) { @media {
  /* Needed styles */
}}

If you need IE9-

For IE9- you can apply conditional comments and add style or link tag there. Also they allow to add conditional markup for browsers.

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

Width issues using HTML select within a DIV using IE

Sadly there is no css solution for this as it relates to the elements behaviour.
As such I will direct you to another source.
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
This changes the width of the element when it is focused on and sets it back when it loses focus. Not very elegant but still allows the whole option to be seen.
Hope this helps.

Css style problems on input in IE8

Try specifying a line-height: 34px or thereabouts.

load different css file based on browser

Request.Browser will give you complete browser information, where you can check version, browser name, browser type etc.

if(Request.Browser.Browser == "IE")
    {
        HtmlLink css = new HtmlLink();
        css.Href = ResolveClientUrl("~/style/StyleSheet.css");
        css.Attributes["rel"] = "stylesheet";
        css.Attributes["type"] = "text/css";
        css.Attributes["media"] = "all";
        Page.Header.Controls.Add(css);
    }

IE8 CSS Hack - best method?

You should reverse your method. First your site should look good in modern browsers (like Firefox, Chrome, Opera, IE 9), and then you can start worrying about the others.

As others suggested, conditional comments can be your friend.

First, you should develop your CSS to look fine in the modern browsers. Then check IE8, see what problems you get. If you need to, include an IE-specific stylesheet. After that, you can check in IE7 and then IE6 if you support it, and add further fixes.

An example:

<link rel="stylesheet" href="normal.css" type="text/css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="ie8.css"><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->

In this case you include normal.css which is for modern browsers. You found some strange IE8 issues, so in ie8.css you fix the problems. You don't have to include all your selectors in this, only the ones that need a fix (the values will be overridden for IE 8 and lower). After that, if there are still some strange things in IE7, you can add your ie7.css and fix those, and so on.

Please refer to the links the others gave you to get more information on the usage of conditional comments.

Finally: making IE8 render as IE7 for ease is never a good idea, and should be avoided. IE7 is the far past (in the IT world, IE8 should be the far past either...), develop for the present and the future, and after that you can care about the people who are still stuck with old technology (based on your audience and business plan).

How to write specific CSS for mozilla, chrome and IE

For that

• You can scan user Agent and find out which browser, its version. Including the OS for OS specific styles
• You can use various CSS Hacks for specific browser
• Or Scripts or Plugins to indentify the browser and apply various classes to the elements

Using PHP

See

• http://php.net/manual/en/function.get-browser.php
• http://techpatterns.com/downloads/php-browser-detection-basic.php
• http://techpatterns.com/downloads/php_browser_detection.php (contains JS also)

Then then create the dynamic CSS file as per the detected browser

Here is a CSS Hacks list

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

Source: http://paulirish.com/2009/browser-specific-css-hacks/

If you want to use Plugin then here is one

http://rafael.adm.br/css_browser_selector/

---

Related Topics