Hi,
Unsure if possible but just wondering if there is a means in CSS to distinguish between two browsers, i.e. IE6 and IE8 as I have a style that I need to apply, but the value needs to be different for IE6 and IE8, i.e.
ul.sf-menu li li.sfHover ul {
left: 14.3em; /* for IE8 */
left: 15em; /* for IE6 */
top: 0;
}
Is there anyway when IE8 is being use then use IE8 left style and vice-versa?
Thanks.
You can use different css files, with something like this:
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="../CSS/ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="../CSS/ie7.css" media="screen" /><![endif]-->
Put all your IE6 "hacks" in one file. When the day comes that IE6 is no more (what a great day!) you can just remove the link. It is quite tidy, rather than within one CSS file.
You can add an IE6-only stylesheet that overrides the values.
<link rel="stylesheet" type="text/css" href="style" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
There is absolutely no way to do this within CSS because there should be absolutely no need for this in CSS - browsers should all apply styling equivalently and the content should not be concerned with the user's choice of browser.
That said, for practical concerns you have to use CSS hacks, conditional comments, or progressive enhancement techniques.
If you absolutely have to distinguish between IE versions, you can use a "condition comment". This is an IE-specific feature which looks like this:
<!--[ie IE 6]>
....everything here will only be seen by IE6
<![endif]-->
In this example, all other browsers just see it as an HTML comment and ignore it. There is also a variation which allows other browsers to see it, which means you can also use it for things that you explicitly want to exclude only from particular IE versions.
Note that Conditional Comments are used in the HTML document, not the stylesheet, so you'll need to either embed your styles in the HTML, or have separate stylesheets for different browsers.
If you're coding for IE6 it has a habit of being unavoidable, but in general I'd prefer to avoid browser-specific code wherever possible.
It's better to use feature detection - in other words, your code looks for specific features that you want to support, and reacts accordingly depending on whether the feature is available or not on the browser. This means you can cope with unexpected situations such as a user with a browser you've never heard of, etc.
With that in mind, I'd recommend using Modernizr, which loads your site with CSS classes depending on the available features, which you can then use to help you decide how to present your site on any given browser.
Use Conditional comments to build classes into the the html start tag:
<!Doctype html>
<!--[if IE 6]>
<html lang="de-DE" class='ie ie6 lte6 lte7 lte8 lte9'>
<![endif]-->
<!--[if IE 7]>
<html lang="de-DE" class='ie ie7 lte7 lte8 lte9'>
<![endif]-->
<!--[if IE 8]>
<html lang="de-DE" class='ie ie8 lte8 lte9'>
<![endif]-->
<!--[if IE 9]>
<html lang="de-DE" class='ie ie9 lte9'>
<![endif]-->
<!--[if !IE]><!-->
<html lang="de-DE">
<!--<![endif]-->
Be aware: The class attribute is not allowed in HTML 4 for <html>, so use HTML5 and <!Doctype html>.
Now, in your stylesheet you may use these classes:
.ie8
{
top: 10px;
}
.lte7
{
top: 15px;
}
I use the CSS Browser Selector which is a jQuery plugin that reads specified rules in your CSS sheet, so no need for conditional comments or hacky workarounds.
You can use http://rafael.adm.br/css_browser_selector/ Browser Selector, it's a great javascript solution.