Hi I am tring to make a responsive page using media Query and i want it to be worked in IE7 and IE8
Can anyone please help on this issue.
thanks in advance
Your best bet will probably be using a JS library. Respond.js (https://github.com/scottjehl/Respond) is a great solution for media queries for IE8 and lower. One word of caution: its written pretty narrowly (only has support for min-width and max-width queries) but should have enough for the basics.
Related
I am using this plugin here:
http://tympanus.net/Tutorials/3DRestaurantMenu/
It works pretty well, however, it lacks support for IE11. In IE9 and lower, it appears as a 2D menu, disabling CSS3. However, IE11 apparently has partial CSS3 support, but incomplete support and hence it appears weird. The plugin uses Modernizr to recognize this, I believe. I have tried using the latest Modernizr version without success. Is there a way to add a header tag in there to detect any IE browser and disable CSS3 elements completely?
Thank you in advance!
I was able to target IE11 using media queries:
https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/
So it appears, IE11 is still missing complete CSS3 support, unless I'm missing something?
So, well, we have an XPage application which works very well on all the browsers including the internal notes browser. Since, our target audience is both the desktop/mobile users we have designed a responsive layout using css media queries which works well on browsers, however, we just found out that when it runs as a notes application, it doesn't respect the media queries. It works as if there were no media queries (For eg. even the mobile specific items are shown on desktop). Any suggestions here to get it working? We are far way through and removing media queries would be kind of a last alternative.
Any help would be really appreciated. Thanks!
I think the reason is that your Notes browser is rendering as IE. IE doesn't support media queries up through IE 8.
IE is the default, try changing the internal browser to Firefox. See this link for instructions.
http://www-01.ibm.com/support/docview.wss?uid=swg21268588
One of my development teams have written a couple CSS files that work flawlessly with IE. However, the UI is all messed up when rendered on other browsers.
Is there a tool that can take these CSS files and convert them into cross browser version? Unfortunately, these CSS files are too large and the expertise desirable to cook cross browser CSS and test it is lacking in the team at present.
The most recent versions of all prominent browsers need to be supported.
No, because that would require a tool to understand your design intent and then fix it. If it was so easy to create cross browser compatible css by just using a magic tool we would all be using it.
Usually I see this done the other way around. Get it to work in all browsers and then hack in fixes to IE. My guess is that a few simple simple things are grossly affecting the layout. I would fix it for a more standards compliant browser like Firefox and then hack in fixes to old versions of IE as necessary.
You might want to try Prefixr. It did help me with some CrossBrowser issues, but I programmed for Chrome. Don't know how great the compatibility is the other way around.
I am trying to find a CSS Compatibility overview for mobile browsers. I am primarily interested in regular CSS2 support. CSS3 support would be great, but my initial concern is about regular positioning, spacing, and other layout properties from CSS2. Does anybody know of an up-to-date compatibility table?
This is quite a good one. It may not be entirely up to date but is definitely a start:
http://www.quirksmode.org/m/css.html
Hope it helps.
try http://www.caniuse.com . Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers
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. :)