ansaurus

Question

Is it possible to apply CSS selectively depending on the browser being used?

Answer 1

+1 A:

IE 'hacks' such as leading the statement with a * let IE use the style, but nothing else.

http://www.webdevout.net/css-hacks#unrecommended-asterisk_prefix

Also conditionals - but these have to be IN THE HTML, NOT CSS.

http://www.quirksmode.org/css/condcom.html

josh.trow 2010-10-29 13:23:12

Answer 2

+1 A:

You'll need to use some sort of CSS "hack" in order to target a particular browser. See this guide for a detailed explanation of the different options available to you.

Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately.

Donut 2010-10-29 13:23:17

Answer 3

+1 A:

You can use conditional stylesheets...

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

There is a nice article here: IE Conditional Stylesheets

Steven Raines 2010-10-29 13:25:03

IE conditionals are my preferred way to do this, as it is a supported feature of IE. Exploiting a CSS parsing bug to target IE seems much more of a hack, and potentially could be broken if Microsoft fixes the CSS parsing bug without fixing the CSS rendering bug/misfeature which requires the different CSS for IE in the first place.

jhurshman 2010-10-29 13:34:30

Answer 4

+2 A:

write your body tag like so:

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

then write your specific ie rule with

.ie fieldset { ... }

(no extra requests on IE to handle specific bugfixes, no star hack or other tricks that make your css invalid)

Fabrizio Calderan 2010-10-29 13:25:03

Thanks guys. It looks like I'm advised not to do hack (something I've even never heard of before). I'll then gladly stick with the conditional comments.

Richard77 2010-10-29 13:48:34

Answer 5

+1 A:

I would advise against CSS hacks (such as the star hack) in favor of a better solution, IE Conditional Comments. You can create a separate stylesheet for IE, and even each major version of IE and put your rules in a separate stylesheet.

wsanville 2010-10-29 13:25:50

Answer 6

+1 A:

There are a number of ways to do CSS conditionally depending on browser. If the browser in question is IE, then I'd suggest that conditional comments are the best solution.

However, if you're having problems with padding, it's quite possible that you're simply encountering problems with using the wrong doctype (or more likely not using a doctype at all).

If this is the case, you should add a doctype to the top of your HTML. This will resolve a lot of the odd cross-browser layout issues.

There are some very complex-looking doctypes you can use for various versions of HTML and XHTML, but the best doctype to use is the simplest, which is the new HTML5 doctype:

<!DOCTYPE html>

This will work in all browsers (even those that don't actually support HTML5 yet).

Hope that helps.

Spudley 2010-10-29 13:35:22

Answer 7

+1 A:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

The above targets specific instances of IE since a bug might be version specific.

When creating your rule for IE6 and IE7 for example use

body.ie6 wrapper{background-color:#0000ff;}
body.ie7 wrapper{background-color:#00ff00;}

Julian 2010-10-29 13:54:37

Answer 8

+1 A:

Well, seems everybody said about conditional comments for including a second stylesheet with IE hacks needed, thus keeping everything under control, "hack free" in front of validators...

I would not make different. I use the same approach on my projects. But for this specific problem, I think your solution can be inside CSS itself.

A property named box-sizing. Read about it and check if it fixes your problem. http://www.quirksmode.org/css/box.html

Dave 2010-10-29 13:55:54

ansaurus

tags:

views:

answers:

Is it possible to apply CSS selectively depending on the browser being used?

related questions