I have a website which displays fine on all browsers (even lower versions of IE than IE10). But, on IE10, the images are having rendering issues like the screenshot attached below. If would have random colored bars on it at random times, but once refreshed it would be okay. I don't have any Javascripts on the page, just the styling to display the images. Any ideas? I tried googling and on StackOverflow but no luck. Do I need to put some sort of meta tags?
Check about "Compatibility View" Option.
and why don't you try the edge meta tag?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Related
I am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.
But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.
Could anyone point out what I am doing wrong?
Add this to your HTML head..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
as suggested here http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
<meta name="viewport" content="initial-scale=1">
would be an even better choice as it makes going from portrait to landscape and back a much more pleasant user experience as with/height would adopt naturally because of the possible auto-scaling.
Adding this for people searching this error for whom the accepted answer is not working. I believe this will be a rarer, but nonetheless frustrating case:
If your page is rendering inside a frameset (for example domain cloaking), then putting the meta tags won't help. You would need to put them in the page on the cloaking domain, which you may or may not have access to depending on your DNS host.
Try clearing your browser's cache and open the page in a fresh tab. This sometimes resolves the issue for me whenever it happens.
Some of my CSS wont work in IE8 but will work in chrome,firefox,IE11.
I first made the website on chrome and then realized it didnt work in ie11 so I put code into the html like the code below...
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
After putting this, my website works on ie11. Later to find out, that it does not work on ie8.
I am making this website for my company and all around the company ALL the staff use different browsers, so I need to make sure it works on all.
Do I have any hope? or do I have to give up on this one? I have researched all over google about everyone different code inserts they put in for it to work on ie8 but it doesnt work.
In my CSS im using stuff such as border-radius and box-shadow and many many more.
Is there an alternative... to say, "if you are using ie8 to display this website, display this piece of code differently to suit the browser."
Thanks
What you are basically looking for is "graceful degradation". Check out some articles about that here:
https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
http://searchnetworking.techtarget.com/definition/graceful-degradation
In any case, keep in mind that making a modern page work on IE8 is a tedious task, and most likely unnecessary. The global market share for IE8 is currently around 1%, so you really have to consider if you do that extra work.
Chrome and Firefox, same page, same CSS, with normalize.css, render differently.
It started out as a select box being a few pixels short in Firefox. I've since traced it to two issues:
Firefox renders responsive elements(rem', em) as integers. `80 in CSS is 2em on the page.
Firefox renders borders differently than Chrome.
Is there a way to have render pages the same?
Please go through YUI, i think this would turn your pages run out of font rendering issues, and also try adding meta tag within <head> tag
<meta name="viewport" content="width=device-width, initial-scale=1">
here are the other references i would like you to refer, if the problem persists http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
I have red all the questions and answers on this issue. Still it didn't help. In my IE 11, the doctype is always commented out.
I think IE is Rendering the page in compatibility view. I am assuming this because some html properties such as border-radius are red underlined as if IE 11 not recognizing it, so I think that IE is not Rendering the page in Standard mode, though in developers tool Edge is selected.
I have chekced all the compatibility Settings. Everythings is unchecked and fine.
The Website was previously running on IE8 and was optimised for that.
Could you please post a code snippet of your current HTML document?
I would try to do it like this:
<!DOCTYPE html>
I added the following meta-tag to my webpage and it works for me:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I found it on this post
I am trying to find a solution of the IE white flash in a meteor app.
The website is this one (note that it's in closed beta).
IE9 gives a very bad user experience, and while I don't think it will ever be as good as with more modern browser, I really think some issues should be resolved.
And I think that the white flash on page change it's the worst one.
Basically for every action that changes the url, the page redraws itself and flashes white for a few milliseconds.
I've read other topics and tried to apply some of the suggest fixed, but nothing worked.
I've tried to insert
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
But I think it does nothing on IE9 or in this case.
I also tried to set the background of html and body to dark gray, it did nothing.
I'm actually not sure what else should I try and if this is a common issue when building website with realtime, modern frameworks.
Thanks in advance.
P.S. I also found this issue in iron-router, and it seems that IE<10 trigger a full page refresh every time, and probably that's the main cause of what I'm seeing, because Meteor needs a bit of time to load itself, thus leaving the page blank while it's doing it's magic.
this meta tags
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
not supported in IE9.
As solution for you example you can use compatibility with IE8
you can add
<meta http-equiv="X-UA-Compatible" content="IE=8" />