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.
Related
I know IE8 only supports :after and not ::after.
I thought I could solve it in one line.
Here is the CSS:
E:after, E::after{ ..... }
But it doesn't work in IE8.
IE8 is behaving as expected and discarding the entire ruleset because it doesn't recognize double colons. See this slightly related answer. This is not buggy behavior.
If you need to support IE8, just use single colons. That's what you're supposed to do. :before with a single colon is guaranteed to work on all browsers and you can rely on it thanks to IE8.
E:after { ... }
you can place code for IE8 as this.
<!--[if IE 8]>
<style>...</style>
<![endif]-->
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
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...
}
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.
Which is the CSS hack you use most often and which one do you avoid using?
I am asking this question so that I can understand different views of different people about CSS hacks and also understand which hacks are good and which ones are not.
Not technically a hack, but I often include conditional comments to target IE 7-:
<!--[if lte IE 7]>
<link href="ie7.css" />
<![endif]-->
I actually get away without using many hacks.
Most used - clear fix
Most hated - !important rules because they are an indication that the stylesheet is probably not organized properly. It also means that some styles are too general that they ought to be. Not good for performance either.
I mostly use min-height hack and avoid using underscore trick something like _margin that targets IE6.
I've found that if I use the XHTML 1.0 strict doctype, mostly things just work... That said, I don't really do anything fancy... But a nice minimalistic site like SO would be pretty easy to design sans hacks...
PNG transparency in IE6 with AlphaImageLoader()...
IE versions >6 and Firefox and Chrome all support full 8-bit transparent PNGs, but for IE6 compatibility you have to do the above css hack. Your CSS file will no longer validate but if you rely on transparent PNGs like I do... it's worth it.
Most Used: Negative Margins
Seems this is the one I have to use most often: create a CSS class
.inline-block { display: inline-block; }
use it to style any element you wish to display as inline-block (instead of using display: inline-block; directly). Then, in your IE-only (v.7 or earlier?) file:
.inline-block
{
zoom: 1;
*display: inline;
}
Sad panda.