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.
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.
For media queries, does this work well in IE8?
<!--[if lt IE 9]>
<script src="css3-mediaqueries.js"></script>
<![endif]-->
I don't have any machine or VM with IE8 to test it. I have tested it in IE9 using IE8 compatibility mode. It seems to work until I refresh the page. Then the media queries don't work anymore.
The JS file is from Google http://code.google.com/p/css3-mediaqueries-js/ and enables media query functionality for older browsers.
Yes, it works on IE8. But the best approach would be to provide a fallback for all browsers that don't support mediaqueries.
To achieve it, you need Modernizr with MQ test and yepnope:
http://modernizr.com/download/#-shiv-mq-cssclasses-teststyles-load
(this bundle also comes with html5shiv, useful if you're using HTML5)
After including it in your <head> section, test mqs and load the fallback conditionally:
Modernizr.load([
{ test : Modernizr.mediaqueries , nope :'css3-mediaqueries.js' }
]);
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
I am getting rid of browser compatibilty issues.
so i come up with idea to load the only css according to browser.
So say if user uses IE then only styleIE.css get loaded if firefox styleFF get loaded and so on.
my question is it correct method if not what care should taken to avoid this compatibilty issues.
because when i solve issues for IE then it opens the new issue in a my stable version of FF
That is done frequently although you probably want to use a general CSS file with the shared styles and combine it with the browser dependent CSS file.
But in fact most CSS problems with different browsers can be solved without this trick and by just using the correct markup and styles...
Usually it's enough to create a stylesheet that looks well in normal browsers, and then make a IE-only supplemental stylesheet that fixes the incompatibilities and include it through conditional comments (although IE8+ is kind of OK and IE7 usually works):
<!--[if IE]>
<link rel="stylesheet" href="/ie_sheet.css" type="text/css">
<![endif]-->
Since IE6 is a horrible monster from the dawn of time, which needs its own specific hacks, you can include a different stylesheet for IE6 (and lower) and IE7 (and higher; not really needed most of the time):
<!--[if lte IE 6]>
<link rel="stylesheet" href="/ie6_sheet.css" type="text/css">
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="/ie_newer_sheet.css" type="text/css">
<![endif]-->
Other browsers parse these as HTML comments and ignore them.
See also: a more detailed discussion of conditional comments.
I use a reset stylesheet, a normal stylesheet (i.e., for all standards-compliant browsers) then IE-specific stylesheets that reference the various versions of IE. The IE stylesheets only cover the items that IE has trouble with. I use the Microsoft conditional comments for including those stylesheets, so they are not read by other browsers.
It's not morally reprehensible, but it is less than ideal.You can solve cross-browser compatibility issues by learning a little more about what is going on.
http://hsivonen.iki.fi/doctype/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.positioniseverything.net/explorer.html
Yes, many websites do just that.
That works just fine, the only thing to keep in mind is that, everytime your user loads a page, now the browser has to run through all the conditionals. So as long as it's not excessive (one check for each version of every major browser), nobody will notice.
Now making changes to the css if you've got even just 3 or 4 versions will be a bit of a pain, but everything has it's cost.
Here's the situation.
I made three style sheets for each of the three pages I am currently working on. One that works in IE8/Safari/Opera/Firefox. One that works in IE7 and one which if used alone works on IE6
I tested everything on www.xenocode.com/browsers and that sites' IE 6 and 7 emulators.
3 I used a variation of the article's suggestions for a way to make all the sheets work. (In the section:
http://www.thesitewizard.com/css/excludecss.shtml
The problem is that while it calls up the proper css for IE 8 and IE 7 online (It works just fine directly off my computer), it can't seem to call up the code for IE6 properly online causing the layout to be messed up in IE 6 (Or at least the emulator on xenocode.com.
Is there a better method?
(Can't show you the full page, due to my client being adamant about not showing it until the project is finished.)
Assuming you are using browser conditional statements...
I would check that the emulator your using is able to interpret browser conditional statements. If unsure you could always disable all other stylesheets and link normally (using the link tag) to just the IE6 stylesheet and then test
You want to have IE6 specific CSS? Also, please consider using Microsoft SuperPreview to locally see how your design looks in various versions of IE6.
You can use these css selection tags for the specific Browser version for IE.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie60.css" /><![endif]-->
<!--[if IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie55.css" /><![endif]-->
<!--[if lt IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie50.css" /><![endif]-->
http://rafael.adm.br/css_browser_selector/
I love this thing because it lets me define granularly all the changes I want for different browsers / operating systems.