[CODE4LIB] same css, different servers, one breaks in IE
Hi folks, I've been working on integrating some Bootstrap into our library website, and I've stumbled on weird thing that I can't explain: I'm using the basic bootstrap templates, straight out of the box with no customization, and the CSS feature that compresses the header on narrow screens doesn't work on IE(v9) on my library web server. But exactly the same code on my personal server works just fine. Both sets of code work fine in Chrome and Firefox. Both servers are some mix of Linux+Apache. Why would the same css work on one server but not another? I ran Fiddler to be sure that the css was actually being called, and it is. I wonder if others will get the same results. Working in IE: Out of the box hero template: http://alltrees.org/ken/bootstrap/docs/examples/hero.html Just the responsive header (no JS, just relies on 2 css files): http://www.alltrees.org/ken/bootstrap/docs/examples/top-nojs.html Not working on IE: http://www6b.wittenberg.edu/lib/test/bootstrap/docs/examples/hero.html http://www6b.wittenberg.edu/lib/test/bootstrap/docs/examples/top-nojs.html Any ideas? I'm mystified... Thanks Ken
Re: [CODE4LIB] same css, different servers, one breaks in IE
Never mind? This appears to be a campus network issue, not inherent to IE On Jun 28, 2013, at 10:11 AM, Ken Irwin kir...@exchange.wittenberg.edumailto:kir...@exchange.wittenberg.edu wrote: Hi folks, I’ve been working on integrating some Bootstrap into our library website, and I’ve stumbled on weird thing that I can’t explain: I’m using the basic bootstrap templates, straight out of the box with no customization, and the CSS feature that compresses the header on narrow screens doesn’t work on IE(v9) on my library web server. But exactly the same code on my personal server works just fine. Both sets of code work fine in Chrome and Firefox. Both servers are some mix of Linux+Apache. Why would the same css work on one server but not another? I ran Fiddler to be sure that the css was actually being called, and it is. I wonder if others will get the same results. Working in IE: Out of the box “hero” template: http://alltrees.org/ken/bootstrap/docs/examples/hero.html Just the responsive header (no JS, just relies on 2 css files): http://www.alltrees.org/ken/bootstrap/docs/examples/top-nojs.html Not working on IE: http://www6b.wittenberg.edu/lib/test/bootstrap/docs/examples/hero.html http://www6b.wittenberg.edu/lib/test/bootstrap/docs/examples/top-nojs.html Any ideas? I’m mystified… Thanks Ken
Re: [CODE4LIB] same css, different servers, one breaks in IE
In looking quickly at your not working in IE example, it looks to me like it does work in IE9 but not 8. So perhaps it works like you think it does, only you're not seeing it because of IE's idiosyncrasies? Hope I'm correctly understanding your question. A few common IE gotchas, if you haven't tried these already or aren't accustomed to messing with IE much (F12 for developer tools - actually lots of good stuff here for checking the DOM, stylesheets, network): *Be sure that IE is pretending to be the browser you think it is - check the browser mode and document mode listed in the developer tools menu. IE likes to switch modes for no good reason. *IE can also be very aggressive about caching. There are cache settings you can change in the developer tools but I find that they don't always work. A full cache clear is sometimes what it takes to get the latest CSS update. On Fri, Jun 28, 2013 at 10:11 AM, Ken Irwin kir...@wittenberg.edu wrote: Hi folks, I've been working on integrating some Bootstrap into our library website, and I've stumbled on weird thing that I can't explain: I'm using the basic bootstrap templates, straight out of the box with no customization, and the CSS feature that compresses the header on narrow screens doesn't work on IE(v9) on my library web server. But exactly the same code on my personal server works just fine. Both sets of code work fine in Chrome and Firefox. Both servers are some mix of Linux+Apache. Why would the same css work on one server but not another? I ran Fiddler to be sure that the css was actually being called, and it is. I wonder if others will get the same results. Working in IE: Out of the box hero template: http://alltrees.org/ken/bootstrap/docs/examples/hero.html Just the responsive header (no JS, just relies on 2 css files): http://www.alltrees.org/ken/bootstrap/docs/examples/top-nojs.html Not working on IE: http://www6b.wittenberg.edu/lib/test/bootstrap/docs/examples/hero.html http://www6b.wittenberg.edu/lib/test/bootstrap/docs/examples/top-nojs.html Any ideas? I'm mystified... Thanks Ken
Re: [CODE4LIB] same css, different servers, one breaks in IE
Another IE (8 and less, I believe) gotcha is it only processes 4095 rules in a CSS file; you have to break large files into multiple chunks. More on this: http://stackoverflow.com/questions/9906794/internet-explorers-css-rules-limits Best, Eric Phetteplace Emerging Technologies Librarian Chesapeake College Wye Mills, MD On Fri, Jun 28, 2013 at 10:28 AM, Josh Wilson joshwilso...@gmail.comwrote: In looking quickly at your not working in IE example, it looks to me like it does work in IE9 but not 8. So perhaps it works like you think it does, only you're not seeing it because of IE's idiosyncrasies? Hope I'm correctly understanding your question. A few common IE gotchas, if you haven't tried these already or aren't accustomed to messing with IE much (F12 for developer tools - actually lots of good stuff here for checking the DOM, stylesheets, network): *Be sure that IE is pretending to be the browser you think it is - check the browser mode and document mode listed in the developer tools menu. IE likes to switch modes for no good reason. *IE can also be very aggressive about caching. There are cache settings you can change in the developer tools but I find that they don't always work. A full cache clear is sometimes what it takes to get the latest CSS update. On Fri, Jun 28, 2013 at 10:11 AM, Ken Irwin kir...@wittenberg.edu wrote: Hi folks, I've been working on integrating some Bootstrap into our library website, and I've stumbled on weird thing that I can't explain: I'm using the basic bootstrap templates, straight out of the box with no customization, and the CSS feature that compresses the header on narrow screens doesn't work on IE(v9) on my library web server. But exactly the same code on my personal server works just fine. Both sets of code work fine in Chrome and Firefox. Both servers are some mix of Linux+Apache. Why would the same css work on one server but not another? I ran Fiddler to be sure that the css was actually being called, and it is. I wonder if others will get the same results. Working in IE: Out of the box hero template: http://alltrees.org/ken/bootstrap/docs/examples/hero.html Just the responsive header (no JS, just relies on 2 css files): http://www.alltrees.org/ken/bootstrap/docs/examples/top-nojs.html Not working on IE: http://www6b.wittenberg.edu/lib/test/bootstrap/docs/examples/hero.html http://www6b.wittenberg.edu/lib/test/bootstrap/docs/examples/top-nojs.html Any ideas? I'm mystified... Thanks Ken
