I'm creating a site using the Twitter Bootstrap, but I've discovered that the media queries don't work on anything below IE9 (unfortunately my target browser). This deeming the whole reason I'm using the bootstrap (for the responsive scaling grid) pretty useless.
I was considering the implementation of Andy Clarke's 320 and up responsive boilerplate within the bootstrap for the general better overall support on the IE side of things. (Or similar boilerplates)
Has anyone come across any examples of this being done online or on Github? (without the likes of SASS, HAML etc or being specifically created for a CMS). I have an idea of how I'm going to do it, but I'm not sure if it's a waste of time and I'd like to see if both tools can be pulled together successfully.
#fitzilla... I couldn't figure out how to add an additional comments, so I hope you find this.
I just checked my website in both IE7 & IE8 mode and both work. Do a view source on the initial page - you will see an additional hack for IE7 & IE8...
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Then check your includes against mine and see if they match. I believe the bootstrap-responsive has to be after the regular bootstrap css file.
In order for media queries to function in older browsers (IE7 and 8) you need to include a polyfill such as the respond.js in the body of your document to support those techniques. Just noticed that the 320andup framework uses the same polyfill so you can easily include it in your bootstrap project.
Here is a test page that you can use to test the queries on IE7 and 8:
http://chrisjacob.github.com/Respond/
Respond.js will make Bootstrap work for both IE7 & IE8 - at least using the developer tools (F12) of IE9. On my test site (http://ReactiveWebDesign.Net I include respond.js just before jQuery... the first included .js file
Related
I've been working on a site http://www.clockinpoint.com which is using bootstrap 3 has the frontend framework but when you view the site in IE8 its showing as the mobile version how can one get around this?
I have tested this so many time in localhost.It will never work in localhost,Jut upload the same folder on your server and then check it will 100% work.
IE8 does not have support for media queries. Which is an issue while develiping mobile first.
You basically need a seperate stylesheet for IE8 if you want to fix this. But since you're using preprocessors there's pretty easy to compile IE8 specific styles.
IE8, like the others have said, does not support Media Queries.
However, if you include Respond.js, you can manipulate it and the js will start thinking it can read it and it will work.
An example of this is Just Seal It, IE8 works fine in terms of responsiveness.
If not, you need to create a new stylesheet.
By importing this file http://d.pr/f/l0Yp from http://www.initializr.com/ this has fixed my IE issues, all working great now
Try using polyfills. See this IE8 issue with Twitter Bootstrap 3
Using the polyfills mentioned, you'd probably end up having code that looks like this:
<script src="/path/to/modernizr.min.js" type="text/javascript"></script>
...
<!--[if lt IE 9]>
<script type='text/javascript' src="/path/to/html5shiv.min.js"></script>
<script type='text/javascript' src="/path/to/respond.min.js"></script>
<![endif]-->
This worked well for me.
I am wondering how IE8 and below react to media queries in CSS.
I'm not looking for a solution for IE8 to render them. I'm just wondering if IE will just ignore them, or if IE will try to parse them.
Background story: we are building a responsive site, but since IE8 and below is rarely to be used on a smaller screen device, we hope IE just ignores media queries. This way IE8 (and below) users always see the "regular sized" version of the site, which is fine.
In short, you're exactly right.
IE8 does not support media queries, and will not parse any CSS contained within them.
Therefore, if you want to support IE8 in a responsive site, you should make sure that your default CSS which you want IE8 to use is outside of any media queries.
So the short answer is that what you said in the question is pretty much exactly right.
There are other considerations of course: IE8 isn't the only browser not to know about media queries; some older Android devices and other old phones may also not support them. If you need to support those devices, you may need to consider how to handle it. Fortunately there really aren't that many people browsing the web using those devices, so you can generally ignore them unless you have a specific need.
You also have the option of using a polyfill script like Respond.js, which adds support for media queries to older browsers like IE8. Note that this is a javascript library, so it will only run after the page has loaded, so there may be some delay and screen redrawing involved, which isn't pretty, but it is being used by a lot of sites and with good results, so you may want to consider it.
i.e 8 does not support media queries, but these poly fills which makes media queries support to i.e 8 and i.e 7. In fact its a good option to use else you need to show "regular sized" version of the site? its possible through some hacks i.e conditional comments of css link file and the way you write css code for i.e older browsers, try to override the styles with high css specificity.
note: if you are using html5 add another polyfill Html5shiv hosted by google.
use html5 and media queries like this:
<!--[if lt IE 9><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<script src="js/respond.min.js"></script>
<![endif]-->
Check for polyfills respondjs --- http://responsejs.com/ and css3 media queries --
https://code.google.com/p/css3-mediaqueries-js/
In order to use "regular sized" version.
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
learn some specs and tips,tricks log on http://www.pointmycode.com/
Using the Zen starter theme for Drupal 7, I've created this site: www.nettango.com. Everything seems to work fine and I've been figuring things out as issues come up. However, I've been trying to get IE8 to respect the responsive styles. Here's what I've done:
Site Settings:
Checked - Add Respond.js JavaScript to add basic CSS3 media query support to IE 6-8.
Checked - Add HTML5 shim JavaScript to add support to IE 6-8.
Checked - Add meta tags to support responsive design on mobile devices.
Which calls this into action:
<script src="/themes/zen/js/html5-respond.js"></script>
The script is being loaded, but it doesn't obey my mediaqueries.
After that, I replaced Zen's script with these:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Which had the same effect - nothing.
Here's a sample from my css file to show how the mediaqueries are setup:
#media screen and (max-width:1100px) {
html{font-size: 83%;}
#header {background:blue;}
}
Feel free to inspect the www.nettango.com site files. I've spent the majority of my day trying to solve this and have had no luck.
Thanks in advance for any help.
This is most likely because you are trying to use css3-mediaqueries while in development mode. Drupal 7 uses the #import rule for stylesheets in non-CSS aggregation mode.
From the css3-mediaqueires.js project summary:
Note: Doesn't work on #import'ed stylesheets...
Hence, css3-mediaqueries.js will only take effect when CSS aggregation is turned on (in production).
Appears the mediaqueries work on the live server, but not on our local server. Strange. Not sure why that is.
I also noticed you have to set firesass to false in your config.rb file. It wont work in IE8 if Firesass is enabled.
We recently redesigned our public-facing site, however one item was not fully communicated.
A certain portion of our site uses some of the newer display types in CSS. This looks fine in almost all browsers, but not in IE8's compatibility mode or in IE7.
This wouldn't be an issue, except the miscommunicated item was that we DO need to support IE7.
For this reason, my initial fix (forcing IE8 into standards mode) was rejected.
I'm currently developing a CSS to override these sections of the page. We want this to be a separate CSS file, not to use CSS hacks within the main stylesheet for maintainability reasons.
My understanding is that I can include this (or not) by using IE's conditional comments to include it only for version IE7 and below. If I use the conditional comment
<!-- if lte IE 7>
will this also be included with IE8's Compatibility Mode? If not, how do I specifically target IE 8 Compatibility?
At least in IE9, IE does function as IE7 as for conditional comments. For example, with following code:
<!--[if IE 7]>IE7.<![endif]-->
<!--[if IE 8]>IE8.<![endif]-->
<!--[if IE 9]>IE9.<![endif]-->
"IE7" will be shown in IE9 working in compatibility view mode triggered via a button at the right of location bar.
Update: just tested in IE8 — it does the same as IE9.
I have designed a web portal, I have made that website good looking at Firefox browser,
But when I started testing with IE, some issues which works in IE 6 may not work in IE 8,
means back ward compatability is not there in the IE.
You can check my website at cricket scores
In this scenario, which IE version do you think to consider and make my website to work normal.
Edit
As per the below suggestions, I understand that need to create the separate CSS file
corresponding to each IE version like 6, 7,8, 9 and so on in future,
if the number of CSS files increases, wont that affect the performance and loading of the web page
please advice,
Unfortunatley IE does not render things the same as Firefox and is a common problem. The best way is to do IE Specific IF statements and have IE 8 Emulate IE 7. This does require a few additional CSS files, edited for each version. Below is the generic way to have it set up for IE/FF (belongs in head). Normally IE 6 & 7 are viewed the same so you do not need to have different CSS files for them.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link rel="stylesheet" href="/templates/dchirotemplate/css/style.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="style_ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style_ie7.css" type="text/css" media="screen" /><![endif]-->
You can view a site I created with this style sheet setup by going to http://www.decrescenzochiropractic.com
Tip 1: Don't even bother trying to make things look good on IE6. Make it work on IE6 if you must, but if you start trying to achieve perfection in IE6 you'll be in for a world of pain and frustration.
We have officially dropped support for IE6 on our new site; we're not even testing with it.
Tip 2: Look into using some javascript libraries that provide better cross-browser compatibility for IE. Here are some good ones:
Dean Edwards' IE7.js
CSS3Pie
Whatever:hover
Selectivzr
Modernizr
Also consider using jQuery or similar; this is a bigger jump than just compatibility, since it involves changing your coding style quite considerably, but it does provide very good cross-browser compatibility for most of its functionality.
You should use IE-only conditional comments, in the form
<!--[if IE 6]> <p>hello world of bugs!</p> <![endif]-->
This way you can load custom stylesheets, etc.
You should make your site work with all browsers.
A quick and dirty trick for IE 6 and 7 is also the star selector but don't overuse it:
body{
background-color: blue;
*background-color: red /* Only shown in IE */;
}
Fact is IE will be the most troublesome of browsers.
Traditionally, IE has not been compatible, period.
While most of the other browsers were working to be compatible with the standards coming out, MS was trying to be smarter and better than everyone else and doing their own thing. This has caused a lot of problems for many designers. A lot of design books have an entire chapter on dealing with IE's quirks.
Fortunately, it appears MS is finally starting to see the light. To Microsoft's credit, IE8 defaults to a mode that is more standards-compliant that IE7, breaking sites that targeted earlier versions of IE. And, from what I've read, they're as committed as ever to the standards with IE9.
So to answer your question, I'd try and be compatible with the later versions. That way, your site is likely to remain valid for longer. However, any good website designer will test on all the top browsers. I use IE, Chrome, Opera, and FireFox.
I think you are going about this all the wrong way.
Yes, you could create separate style sheets, and you may still have to. However, the markup on your page is absolutely atrocious. You are sending every browser that hits that page into quirks mode, and getting pages to look the same, or even function the same, between browsers when they are all in quirks mode is a chore in and of itself. Don't get me wrong, it can be done, but it takes quite a bit of duck tape and bailing wire.
You should really fix your markup, then assess your css. You can definitely make a page that looks like yours with a single style sheet, even in IE6.