I need an IE9 CSS hack to be able to set the background-position property differently for IE9.
I have tried with several different ones that didn't work and from what I read somewhere, the background property is not possible to "hack" at least the same way as the other.
I basically need this to only apply to IE9:
#ABB_ABContent .subnav li.selected { background-position: center 17px; }
Any suggestions?
If you can't find anything else, there's always conditional comments:
<!--[if IE 9]>
IE9-specific code goes here
<![endif]-->
This would have to live in your HTML code, rather than your stylesheet, but you could use it to include an additional CSS file for IE9.
Alternatively, you may want to look up the Modernizr library. This is a small Javascript tool which you add to your site, which detects what features your browser supports, and allows you to write your CSS to target specific features (or their absence). If there's something about IE9 that it doesn't support which you're trying to work around, this may be the best solution.
I'm still puzzled as to what problem you're trying to solve though.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="your path" />
<![endif]-->
Related
I have one line of CSS to change on a couple of classes on a Wordpress site to make it backward compatible to IE9 (it is currently on a localhost site in development).
The CSS i need to turn off is just one line and where I'll change the opacity from 0 to 1 so the headings show in older IE versions - the transforms etc won't be recognised so these won't be an issue.
If I use a conditional comment, because it's only one line of CSS - can I use the following:
<!--[if IE 9]>
<style>
span, .animate3, .animate4 {opacity: 1!important;}
</style>
<![endif]-->
I can't seem to find any info about using the style tag after a conditional comment. It would seem easier than setting up a stylesheet for one line of code?
Any help ideas would be awesome
Paul.
Yes, the way you set it up is correct and can be implemented in the <head> of the document.
As mentioned in the MSDN Compatibility documents about conditional comments:
<!--[if expression]> HTML <![endif]-->
is the way to write it. Any HTML element inside can be written, so <style> is valid to use.
<!--[if IE 9]><style>body { background-color: red; }</style> <![endif]-->
Read more about conditional comments at MSDN or at Quirksmode (with some better examples).
Is it possible to use different css selector for IE(any version of ie) and chrome? Its a normal top property which appears differently in both browser and needs to explicitly adjusted according to the browser
You cannot do this in CSS alone. You need what are called "conditional comments" like the following:
<!--[if IE 8]>
<p>This is IE 8</p>
<![endif]-->
These are added to your HTML and can be used in many ways. Two primary ways that I have used them are:
To link to a wholly different CSS style sheet
To change the class on the <html> or some other parent tag and use CSS rules to select any children of it
I realize that second description may sound a bit complex but it's actually pretty simple so here's an example:
<!DOCTYPE HTML>
<!--[if IE 8]>
<html lang="en-US" class="ie8">
<![endif]-->
<![if !IE]>
<html lang="en-US">
<![endif]>
...
<body>
<div class="someClass"></div>
</body>
...
Then, in your CSS, use a selector like: .ie8 .someClass
Welcome to the club! Anyways, although you can try to set browser specific css on elements, actually you cannot guarantee that it'll work exactly like you aimed. Because it depends on how those browsers handles these css classes, and there is nothing you can do about that. You may try to set different css classes for IE like this:
<!--[if lt IE 9]>
<html class="ie">
<![endif]-->
<!--[if (!IE) | (IE 9)]><!-->
<html>
<!--<![endif]-->
Notice that these are actually comment lines, but ie reads these lines and set the user-defined css class "ie" to html element (you may notice that Chrome and Firefox ignores these statements). you can then use this css, for example;
html.ie div{
top: 0;
}
It's really annoying to deal with these cross-browser ie bs, I know. hope this helps
What you want to achieve?
If you want to compensate browsers all differences you can use for eg. modernizr
If you want to add special css file for IE you can use Conditional comments They look like this:
< !--[if IE 9]>
< link rel="stylesheet" type="text/css" th:href="ie9.csss"/>
< ![endif]-->"
If you want to fix something in css selector you can use hack(HACK! means not recommended, avoid but if you really have to and you have gun next to your head etc...) which will make properties or css class understandable only for specific browser (google this there is to many of them) eg. http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575
And last option learn CSS and find where you made mistake because probably some element is diffrent size and that caused 1-2 px difference with position top
I'm working on a small website, but of course IE doesn't view it the same as Chrome or Firefox do. I've read around and found using <--[if IE]> should make only IE use the stylesheet I need.
When I was using Microsoft Expression on a different PC earlier, it worked fine. I came home and started editing in Dreamweaver CS5, now it doesn't work as it should.
I researched it a little and I know that Dreamweaver views it as a comment rather than an if function.
So how can I fix/get around this?
Thanks in advance!
P.S. The whole piece of code I'm using is <!--[if IE ]> <link href="IEcss.css" rel="stylesheet" type="text/css"> <![endif]-->
Edit: I found the answer, I had to close the comment tag before referencing the stylesheet. http://www.quirksmode.org/css/condcom.html
You have a space after IE:
<!--[if IE ]>
Should be:
<!--[if IE]>
Other than that, it looks correct. But the space may very well be throwing it off, because conditional comments have to match an exact syntax – otherwise they get interpreted as regular comments and ignored.
Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.html
I've spent most of today trying to work out why the css on my site isn't working correctly in IE7. You can see the site at http://www.ecocamel.com
When you land on the product scroller page with the shower heads. .. everything is a mess, with mouseover popups partly showing without any mouseover, and products flowing out of the container to the right..
I tried adding overflow:hidden, and position:relative, which did fix quite a lot of it.. but it then caused the website to chop off part of the left / right arrows on other browsers...
SO I've removed everything for now. Just infuriating that it works perfectly on every other browser. How can I work out the best way of fixing it without impacting other browsers? I guess I can add the overflow:hidden / postion:relative stuff with a conditional IE7 statement so it doesn't impact other browsers.. but that still doesn't resolve things properly.
A good method is to use conditional comments.
You could use:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
In this cases extra classes are put on the html tag for you to style explicit for IE6/7/8
Like:
div {color:#ff00ff}
.ie7 div {color:#00ff00;}
In the case of using conditional IE7 statements, while it seems a crap way to do it, if that is the only alternative without re-writing your CSS then that is the best solution.
As GordonM has mentioned, it's hard for us to know what's going on without seeing the code. But as you're using position:relative, I may suggest trying to use z-index so that the popup's display on top of everything (like they should do).
As well as this, have you followed the CSS box model correctly? What I tend to do is write these basic statements when I create a div or p tag:
div {
float:left;
width:100%;
margin:10px;
}
This is cross browser compliant, as I used to work for an agency who wanted their websites to use just one CSS file for all browsers. It is possible to build a web page with HTML and CSS and make it work on every single browser (excluding IE6) without the use of conditional statements. But as I think you've come/coming to the end of development, you aren't in a position to re-write your CSS completely. So try the z-index idea first, then try applying the above code to any affected div.
Google "conditional css for IE" and you'll find a plethora of tutorials showing you how to create conditional CSS for only IE version x+ or specifically ie7.. even all browsers but IE. Most websites require some, if not a ton of IE tweaking. Also, look in to a reset.css to set all margins and paddings to 0 to help with consistency.
In laying out a page with absolute positioning, I realized that it rendered differently from browser to browser. I've been looking online about css selectors to see if there was some way to change the positioning based on which browser the user was using, but I haven't been able to find anything very helpful. Any ideas?
That looks like a bad strategy to me... I wouldn't want to switch from absolute to, say, relative or some other kind of positioning based on the kind of browser. They all should implement positioning fairly similar. You'd probably need to add some extra styles to make a particular element behave properly on certain browser, but changing the global positioning method based on browser is not a good idea, IMO.
UPDATE:
On CSS alone, there isn't any standard mechanism to detect a browser. You can use tricks like the one below to detect a particular version of IE, for example:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
or something like:
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
For a more complete list of options see here.
Another alternative is to use jQuery (if it's an option for you) and adjust the element's style using javascript depending on the browser. Something like:
if ( $.browser.msie ) {
$("#div ul li").css( "display","inline" );
} else {
$("#div ul li").css( "display","inline-table" );
}
More examples here.
A word of caution: none of the above methods is infallible. One, for example, can make Firefox identify itself as Internet Explorer.