This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
I am trying the following CSS hack for IE8 and below:
.class {
background-color: #BFBFBF;
width: 1154px;
width: 930px \9;
}
But this CSS hack is affecting IE9 also.
Could you please help me to apply this width attribute only for IE8 and below?
The other answers are better answers - you should be using conditional comments. But to answer your question as to why what you're doing isn't working, try
width: 930px\9;
Without the space.
Use conditional comments.
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
While I would advise against browser-specific CSS at all, your best bet would be to use conditional comments.
<!--[if lte IE 8]><html class="ie8-"><![endif]-->
.ie8-.class {
width: 930px;
}
Rather than resorting to a bunch of hacks, I would really advise taking advantage of javascript (see http://modernizr.com/) to place your browser type as a class in the html tag. So, the markup of your page in IE8 would include:
<html class="ie8">....
That way, you can reference browser specific classes in your style sheet:
.class {
background-color: #BFBFBF;
width: 1154px;
}
.ie8 .class {width: 930px}
Related
My intro photo slightly covers the breadcrumbs panel on IE and Chrome, see here https://www.hawaiidiscount.com/luaus.htm
It looks fine on Safari and Firefox.
I have been reading on the Internet about css specific code for IE and tried different methods to fix that, but it doesn't work. What am I doing wrong? Thanks!
<!--[if IE]>
<style>
.breadcrumbs {
margin-top: -22px;
}
</style>
<![endif]-->
<style>
.ie .breadcrumbs {
margin-top: -22px;
}
</style>
<style>
#breadcrumbs {
margin-top: -22px;
}
</style>
It's possible that the different heights are due to the different font rendering engines on the different browsers, as this element is being positioned by <br /> elements.
You're able to use conditional statements, such as
<!--[if IE]>
.element{
margin-top: 10px;
}
<![endif]-->
.. to add code that only IE6 - 9 will render, however this will not work in IE10 and above.
You could also browser sniff, but this is really not a good solution as it's better to have one codebase that works across browsers. You also won't be able to anticipate all browsers that your users will use.
The website you've shared is also using quite a few negative margins and absolute positions, which can also cause inconsistent layout issues.
My suggestion would be to remove all <br /> elements, remove as many of the negative margins and absolute positions as possible and lay the page out using a simpler system. For instance, you've split out the background of the breadcrumbs from the text of the breadcrumbs - these should really be together so that you can easily style them together.
Hope that helps
I'm setting image width based on conditional comments as follows.
<o:conditionalComment if="lte IE 9">
<style>
.image-width {
width: 210px;
}
</style>
</o:conditionalComment>
<o:conditionalComment if="!IE">
<style>
.image-width {
width: 216px;
}
</style>
</o:conditionalComment>
It works on Internet Explorer (8). IE 8 sets the image width to 210px. The image width on other browsers however, should be set to 216px. The last conditional comment i.e !IE does not function on other browsers (Chrome and FF).
How to apply the width: 216px; style on browsers other than IE?
The generated HTML code appears to be correct as follows.
<!--[if lte IE 9]>
<style>
.image-width {
width: 210px;
}
</style><![endif]-->
<!--[if !IE]>
<style>
.image-width {
width: 216px;
}
</style><![endif]-->
The !IE is somewhat an extreme conditonal comment condition. It's namely utterly useless.
Basically, every browser ignores everything inside comments <!-- ... -->. IE is the only browser which actually interprets the content of comments matching <!--[if ...]> ... <![endif]-->. Note that other browsers don't interpret them and still treat them like <!-- ... -->.
When you use !IE, then IE browser won't interpret the comment's content. But other non-IE browsers also not, for the very simple reason that they don't support conditional comments. In effects, the comment is not being parsed by any browser. It has exactly the same effect as <!-- ... -->. The only feasible reason why !IE condition exists is that Microsoft assumed that "other" browsers would in some future support conditional comments as well (this was after all a severe misassumption; even more, the support for conditional comments is removed since IE10).
In order to achieve your concrete functional requirement, you'd better swap the two style declarations and make the main one non-conditional. In CSS, the latter declared one has higher precedence.
<style>
.image-width {
width: 216px;
}
</style>
<o:conditionalComment if="lte IE 9">
<style>
.image-width {
width: 210px;
}
</style>
</o:conditionalComment>
Simple as that. Even IE understands that.
By the way, you'd better use <h:outputStylesheet> resp. <link> elements instead.
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
Friends, please help me in defining specific css rule for IE9?
For example like this
/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }
You can prepend the CSS style with
:root
to make it IE9-specific, like this:
:root #element { color:pink \0/IE9; } /* IE9 */
Use IE conditional comments:
<!--[if ie 9]>
your stuff here
<![endif]-->
\9 is a "CSS hack" specific to Internet Explorer.
This simply means that the one specific line of CSS ending with a \9;
In your example,
If your CSS looked like this...
html .twit-post .delete_note a
{
background-position-y: 2px\9;
}
html .twit-post .delete_note a:hover
{
background-position-y: -14px\9;
}
The result would be background-position-y: -14px; in IE 9
I think you can do the same as if you want to write specific code for IE6 but say IE9 instead :)
<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->
use conditional CSS:
(place the code above the <head> on your html, and IE9 will read that extra CSS file)
<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->
This means the approach is with a new CSS file rather than a hack in the classes, this guarantees the CSS are valid.
I found that in some cases using negative values (when using a compiler to compile LESS files) using:
margin-right: -15px\9; /* This fails */
margin-right: ~"-18px\9"; /* This passes */
You shouldn't need to target IE9. It is capable of handling modern css and shouldn't be hacked. This is an outdated method of developing.
This question already has answers here:
Targeting only Firefox with CSS
(13 answers)
Closed 5 months ago.
Is it possible to detect Firefox Browser only with CSS like IE?
for example, IE browser can be detected like:
<!--[if IE 7]>
/* IMPORTING CSS FOR IE */
<![endif]-->
Can be Firefox browser detected like this code?
Not that I know of, but you can try this:
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This website has more options as well
You can place this in your CSS file or between your <style type='text/css'> tags in your HTML. Works Fine!
Nowadays you can use the #supports CSS rule:
#supports not( -moz-appearance:none ){
/* Add non-firefox CSS code here */
}
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I do IE conditionals in CSS?
How can I apply the rules below to IE only?
.abc {
float:left;
height:0;
margin:0 10px;
width:0;
/*Apply these rules for IE only*/
position:absolute;
left:30;
top:-10;
/*Apply these rules for IE only*/
}
In browsers up to and including IE9, this is done through conditional comments.
<!--[if IE]>
<style type="text/css">
IE specific CSS rules go here
</style>
<![endif]-->
A good way to avoid loading multiple CSS files or to have inline CSS is to hand a class to the body tag depending on the version of Internet Explorer. If you only need general IE hacks, you can do something like this, but it can be extended to be version specific:
<!--[if IE ]><body class="ie"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->
Now in your css code, you can simply do:
.ie .abc {
position:absolute;
left:30;
top:-10;
}
This also keeps your CSS files valid, as you do not have to use dirty (and invalid) CSS hacks.
A fast approach is to use the following according to ie that you want to focus (check the comments), inside your css files (where margin-top, set whatever css attribute you like):
margin-top: 10px\9; /*It will apply to all ie from 8 and below */
*margin-top: 10px; /*It will apply to ie 7 and below */
_margin-top: 10px; /*It will apply to ie 6 and below*/
A better approach would be to check user agent or a conditional if, in order to avoid the loading of unnecessary CSS in other browsers.
I prefer using a separate file for ie rules, as described earlier.
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie-style.css"/><![endif]-->
And inside it you can set up rules for different versions of ie using this:
.abc {...} /* ALL MSIE */
*html *.abc {...} /* MSIE 6 */
*:first-child+html .abc {...} /* MSIE 7 */