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...
}
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'm trying to finish this site http://jolaga.laohost.net/topsleva/. Almost all looks good in all normal browsers. But IE8 looks like in mobile mode - all containers are 100% width.
Respond.js and html5shiv.js are included. Meta is in head section. I don't know what else should I do ? For sure IE ignores media queries - but I didn't figure out why.
shot in the dark, because i don't have ie7/8 installed at the moment, but here goes:
offhand, it looks like you are targeting less than ie9, so here ie7/8, with ie7.css.
i never use bootstrap, but i'm assuming you are using the regular repo, and not one you've tweaked on your own.
if thats the case, i'm positive that style sheet is only for ie7, and that is why ie8 is all busted up.
you have two options here:
1) get rid of existing conditional comments. create a style sheet for ie8 and place it inside its own conditional comments targeting ie8 and only ie8/
keep the existing ie7.css style sheet and wrap it up in its own set of conditional comments targeting itself.
<!--[if lt IE 9]>
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="js/respond.js"></script>
<![endif]-->
<!--[if IE 8]>
<link href="/css/bootstrap-ie8.css" rel="stylesheet">
<![endif]-->
<!--[if IE 7]>
<link href="/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->
2). keep ie7.css, create new styles for ie8 within ie7.css file, but you have to target one of the ie versions with a hack, specific to that version. you can read all about it, and view examples here:
http://www.impressivewebs.com/ie7-ie8-css-hacks/
Solved. The problem was that bootstrap css was before custom styles. I swapped them and everything works like charm
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).
I have a problem with css rendered differently in browsers, in IE to be specific, thought I could ask here for help, hopefully you can help me out with this : ))
my website is www.artisticworksllc.com if you go to the link, on homepage, below the slideshow there are five images linking to different categories of website.
I tested in Firefox & safari and they look ok, in Internet Explorer they are not aligned, fifth image comes down in IE. When I tested it with IE with compatibility view turned on, the images are aligned but other parts of website are messed up (image galleries for example)
Can anyone help me with this please? what to do? I dont know if this is padding or what is causing it. I know I have to implement some kind of IE hack but I dont know what and how : (
help is much appreciated : ))
Thank you
Before going down the crazy path of writing custom CSS per browser (and potentially version): get rid of the XHTML 1.0 Transitional doctype and move to one of the strict types. Preferably html 4.01 strict.
This alone will fix the vast majority of your boxing issues.
Some more info on Doctypes:
Read both pages of the following site. Great links on page 2.
http://www.communitymx.com/content/article.cfm?cid=85fee
http://www.alistapart.com/articles/doctype/
And, for "light" reading: http://hsivonen.iki.fi/doctype/
Basically, all browsers have various degrees of "standards" compliance. Anything that kicks off "quirks" mode or is "transitional" should be viewed with suspicion. However, once you understand what a doctype is and your choices around them, then you'll completely understand what's going on for any display differences you do run across.
For me, one of the best ways to learn was to create a simple floating div layout controlled by CSS. Some div's held images, others had extra long text, all of them had a border so I could see where things were breaking. I then tried various doctypes and viewed the page in the major browsers. Sometimes the differences were minor like slighly different default padding or margins; sometimes they were outrageous such as one browser allowing styles to be inherited that another didn't.
We have a decent sized web app (200+ pages) with fairly complicated layout requirements and the ONLY "hack" I've had to implement was to force the image tag (img) to be display:block; it looks pixel perfect identical in every browser and we are not using conditional style sheets or performing any type of browser sniffing.
After your link to pull in the CSS, put this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Make a second style sheet called ie.css and just change the parts that need to for IE.
You also have the ability to add versions:
<!--[if IE 7]>
for example.
you need to target versions of ie with conditional comments; using them you can set specific styles for any and all versions of ie to make them look how they should.
Check you padding and margin attributes for the list elements. Perhaps your size arrangements are right, but since every browser renders styles differently, IE is responding differently.
Can anyone tell me the best way to ensure asp.net sites look the same when view in IE, Chrome or Firefox?
I've just finished one which in testing seems fine in IE but not the other 2.
I have not used CSS on this site as its not that big, I just formatted the masterpage as I wanted it.
Could that be the problem?
I usually code for Firefox first. That makes things match almost 100% in Chrome, Safari and IE9 usually. Then I go through and test in IE 8 and 7. Minor adjustments are typically made within the same CSS file. For example, IE7 usually needs to have dimensions of a container explicitly set, where most modern day browsers don't require it and render things properly.
In those rare cases that you do need to style something specifically for one or more versions of IE, use conditional comments. Here are some good links on conditional comments and how to target specific browsers and versions:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.quirksmode.org/css/condcom.html
Unfortunately you will need to use CSS to get this to look similar in all browsers. I say similar as it is unlikely you will ever get it looking exactly the same.
Basically you will need to use the conditional CSS tags http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
I would recommend spliting out the style to the a CSS and getting that working in Chrome and Firefox. Then use the tutorial linked and add in IE hacks to make it look better.
There isn't an easy way of making a site look the same in all the browsers. As caveman_dick said, maybe it's even impossible. You have to use CSS and sometimes javascript...
But to help you, you can use some programs that simulate different browsers engines, so that you could see how your site behaves. Just google browser simulator. :)