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).
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've only recently come to realise that Internet Explorer 10 doesn't support the CSS border-image property at all, not even using a vendor-prefix.
My normal go-to solution would be to use CSS3 PIE, however that's in the rather unique position of being unable to do a whole lot to help given that Microsoft have opted to depreciate support for .htc behaviours in IE10. There's a discussion about this on their forums here.
It seems possible that there might be a work-around by building a custom JS version of CSS3 PIE but I'm loath to take the performance-hit.
Is there any other way that anybody has discovered to convince IE10 to support border-image (as it really should!).
IE10 doesn't completely remove support for HTC behaviors. You can still use them if you force IE10 to emulate IE9, which you can do by adding the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
This would let you use CSS3 PIE's HTC behaviors again, but it would also prevent you from using other new features introduced in IE10. It's a tradeoff, but one that would allow your site to appear as intended in IE10 until such time as a better border-image polyfill is available.
Our website looks great in all browsers except IE 6-8. We're not even using many CSS3 features. These are just plain old IE rendering bugs (like margins and padding). Before trying to apply a bunch of IE specific fixes, I was wondering if anyone knows of a javascript library that I could apply to fix a bunch of these typical bugs?
Update: Like I mentioned, we're not necessarily using any "modern" CSS3 features nor HTML5, so these are just typical IE 8 bugs where IE renders things differently than all the other browsers.
Go for excellent normalize.css reset that takes care of most of it (also used by HTML5 Boilerplate)
Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.
As for getting support of CSS3 for browsers that don't support it, check out CSS3Pie
You don't need JavaScript; just use a CSS reset file: http://yuilibrary.com/yui/docs/cssreset/
That will work across most browsers to not only fix IE issues, but also make your site render more uniformly over different browsers.
You might wanna take a look at this one: https://code.google.com/p/ie7-js/
or this: https://code.google.com/p/html5shiv/
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 dont understand why the HTML5 website I am working on is different in all browsers. I know it must be CSS, but I dont know what.
on Chrome: http://slackmoehrle.com/chrome.png
on Safari: http://slackmoehrle.com/safari.png
on IE 7: http://slackmoehrle.com/ie7.png
on FireFox Mac: http://slackmoehrle.com/firefox.png
the style sheet can be found here: http://slackmoehrle.com/css.css
Can anyone shed any insight?
Many are saying that browser detection is not a good method, but I dont see what to do to make this all work in the various browsers
UPDATE:
without using a CSS reset: http://slackmoehrle.com/test/without-reset/
with using a CSS reset: http://slackmoehrle.com/test/with-reset/
Have a look at using a CSS reset stylesheet
My personal favorite is Meyer's: http://meyerweb.com/eric/tools/css/reset/
The only real problem with browser detection is the fact that if newer version of browser will support some new features (rounded borders for example), but you still will be doing some workarounds.
Better approach is to use feature detection, so you will be able to use some specific browser capabilities if it has support of them and some graceful degradation pattern when something isn't supported.
For CSS most pragmatic approach is to have reset CSS included for all browsers, then have some common CSS rules which look the same in all browser and additional CSS files for different browsers which contain rules that should be different for different engines.
From my latest experience it's almost always possible to maintain only two versions of these DIFF files - one for Firefox, Safari, Chrome and another for IE family. And use feature detection for JS.
First of all, no version of IE can handle the new elements of HTML5 without javascript help. Only modern browsers can and IE is not a modern browser.
As far as the other browsers go, I'll have to look more but I've not had any issue with any sites I've done but, then, I don't use CSS resets and set all the CSS on the elements myself.