IE allows you to do detect which version of IE is running based on their browsers comment conditions (I actually don't know if that is what they are called, someone can correct me if it is not).
<! --[if lt IE 7]> css code here.. <! [endif] -->
Does anyone know if other browsers have followed their example to determine what version of thier browser is being used?
<! --[if FF]> css code here.. <! [endif] -->
<! --[if O]> css code here.. <! [endif] -->
In general, you shouldn't need to do this with modern browsers (FF3.6, Chrome, IE9, Safari). Also, if you target a hack at a browser that is still changing, you run the risk of the hack still working but the problem it solved being fixed, and then your fix breaks.
Hacks or conditional comments should only be aimed at old browsers (IE6 and IE7 are the main targets).
No, conditional comments are only supported by Internet Explroer and the list of available conditions is quite astounding.
Note that you can use conditional comments to hide things from IE browsers in general:
<!--[if !IE]><!-->
<b>This HTML is not seen by IE</b>
<!--<![endif]-->
Ugly, ugly, though...
Not that I'm aware of. Are you trying to serve up different CSS or a combo of CSS and JS/other?
Perhaps using the vendor prefixes like -moz-, -webkit- and -o- before CSS declarations might work for you in that case.
Nope,
conditional comments are IE only.
Related
I have researched a lot regarding why my JSTree is renderering really badly in IE8, while working perfectly in Chrome. At least one of the problems is IE8's lack of support for the css-property background-size. I am using custom icons to represent folders and files. Each line in the tree structure has a height of 24px in IE8 , when it is 40 in chrome. The latter browser calculates the line height, by automatically wrapping around the icon size, using background-size: auto;. IE8 does not.
I've tried to implement lots of different solutions to make up for IE8's lacking functionality, like:
How do I make background-size work in IE?
IE 8: background-size fix
and the linked-to https://github.com/louisremi/background-size-polyfill
However, due to the complexity of the jstree, and it's default css-files, I am having a really hard time implementing any of these solutions into the existing code, as I am lacking the experience to fully understand the structure of the default.css.
What would be the correct course of action to make this work? I've also searched for compatible .css files for IE8, but found nothing.
An answer which confirms my fears of having to create my own .css from scratch, and understanding it completely, would also be very welcome. However, I would love a second opinion, before I invest the time to do that.
EDIT:
These are screenshots from my current situation:
Chrome has nice spacing, and visible chevron/arrows/expanding icons. Also, the font works.
IE8 has no auto-size, which makes the height 24px instead of 40px. Ive tried manually setting them to 40, but no luck. The lack of visual finesse does not bother me too much, but the lack of the arrow expanding icons are vital to my application's usability.
Working edits of the current theme, will be accepted as an answer. So will link to alternative themes that are compliant with IE8. Or anything that helps me understand how to fix the problem myself.
The best way is create a separate style sheet for IE8
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
there are many other things like in page like you need to add meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and one more thing please post some of your code in a fiddle so that we can better trace the actual cause of problem.
Update:
also check after adding this fix..
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
I hope this will add something positive.
Update:
After checking jsTree Demo I can conclude one more problem the jQuery Version.
If you are using jQuery v1.10.1 or later. that jQuery does not have support from older browsers like IE8 for that one must use v.1.9.1 which is the last version which supports IE8.
Try respond.js which made your ie8 browser to compatible for css3 pseudo elements and other stuff.
https://github.com/scottjehl/Respond/tree/master/src
I spent a good amount of time making a website look good, working with Google Chrome and Firefox, however as is often the case, when I look at it in Internet Explorer it looks worse than it did at the start. I believe there is a way to have an IE only css file, however I don't recall how to do it. Can you point me in the right direction.
Also I would like to know if there is a way to have
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
work for IE. I looked into this years ago and I think the only option then was to have images create the radius. Hopefully there is something new that works (the simpler the better). The border radius is just one of the many things that render differently now that I changed the css.
Thanks
Answer to your first question: to include a stylesheet file in IE only, wrap your <link>ing with a conditional comment. Here's an example on how to do it:
<!--[if IE]>
<link rel = "stylesheet" type = "text/css" href = "cssfile.css" />
<![endif]-->
Answer to your second question older versions of IE do not support border-radius. IE9 does support it, though. There's no workaround other than to use images or third-party plugins like jQuery corner.
Internet Explorer 9 and higher versions support border-radius. Lower versions do not support this. You can
use images
Ignore Internet Explorer 8 and below
use jquery plugin http://jquery.malsup.com/corner/
Your are looking for Conditional stylesheets vs. CSS hacks and one I had to dig out from the very bottom: PIE CSS3 decorations for IExplorer.
IE-specific CSS:
Use Modernizr to determine which features are available in the user's browser. This will add classes to the <body> tag, which you can then reference in your stylesheet, to activate certain styles if a given feature is or isn't there.
Use Conditional comments to include an IE-specific stylesheet.
Use an IE CSS hack, like the ones described here: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
Border radius:
This is supported by IE9, so you must be using IE8 or earlier (or a compatibility mode).
Ignore it for uses of older IEs. It's not worth the effort to support them for a feature that doesn't actually affect the usability of the site.
Use CSS3Pie to hack in the border-radius feature into IE. It's a hack, but it works quite well (better than some others that are being recommended here).
We're implementing CSS scrollbars on our website, and they're working fine with all browsers apart the older versions of IE (like IE8).
We cannot get IE to process the same CSS/JS rules in order to obtain the same output.
As we've noticed that some websites have managed to make explorer display the custom bars instead of the standards, I would like to know if someone has a pice of code to share that make the CSS bars appear exactly the same way independently from the browser that the client is using.
Thanks in advance!
There's no such magical piece of code to make website look the same on all browsers. Each problem is css/js is to be treated specially, especially on IE.
If you want to apply css rules to only internet explorer, you could make use of IE Conditional Comments
I used this one for custom scroll bars and it supports all major browsers, might be you have used these one..!! anyways here is link
http://www.hesido.com/web.php?page=customscrollbar
Write custom css for IE8 using conditioanal comments
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
.ie8 .bar {
your code...
}
I'm familiar with the html conditional tags
<!--[if IE]><![endif]-->
Because of various issues I need to use a single stylesheet. So I cannot use the above solution. I can't find hacks that work to target only ie9 browsers so I need an alternative.
I remember seeing once a condition used in a stylesheet that only IE understood. Something with an # sign and 'MS'. It was awhile ago.
Does anyone know about this? Can it be used for browser specific (ie only) styling?
OK this is about the BETA and PREVIEW's of IE9, but maybe these will work for the full release also?
http://archivist.incutio.com/viewlist/css-discuss/112904
<body>
<!--[if IE 9]><div id="ie9"><![endif]-->
... your page here ...
<!--[if IE 9]></div><![endif]-->
</body>
with a css like
#ie9 #wrapper { background-color: blue; }
will make a blue background only in IE9, all other browsers won't find <div id=ie9> since its hidden in the comments. that should do the trick :)
See also Wikipedia on Conditional comments for an in-detail explanation.
Addressing all the browsers back to IE6 is quite challenging. Every browser supports different features of the specifications. Is there a guide on a safe subset of CSS which can be used across browsers (IE6,IE7,FF1,FF2,Safari,Opera)? That way I wouldn't have to test my style sheets in 6 different browsers after every small modification - and adjust to their irritating quirks.
Here is a valuable reference.
http://www.quirksmode.org/css/contents.html
Also, for IE and select other browsers - conditional comments.
http://msdn.microsoft.com/en-us/library/ms537512.aspx
I use them this way. I override any IE specifics.
<link rel="stylesheet" type="text/css" href="theme.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="theme-ie6.css" />
<![endif]-->
In my experience while some CSS attributes might be supported by all browsers they don't always behave the same. Even some of the most basic attributes, like margin/padding/float, can cause things to look different between IE and everything else.
Usually the overall site template is the most complex. The way I do things is once I get that template written, and the simple classes to be used by the actual content, test a few sample pages in all the browsers. Usually you won't throw any major wrenches in the system once you're just working on content (although I'll always do a paranoid check here and there).
Both links from Daniel and jleedev are valuable resources. Your best bet in many cases is to use a reset stylesheet (just one example) that will minimize the rendering differences between browsers.
Dean Edward's IE7 is a JavaScript include that will add many standard CSS functionality into IE6/7 (such as <abbr> and support for pseudo selectors).
I recommend developing for Firefox/Opera/W3 spec, then using conditional comments for IE6/7.
I have found a book called Pro CSS and HTML Design Patterns, which contains pre-tested snippets of reusable CSS. This is very close to what I actually needed.