CODEWITHSUNDEEP
internet-explorerinternet-explorer-8octopress
Oren Maurer
Oren Maurer

Reputation: 299

Octopress - rendered as mobile in IE8 and "navigate" has "undefined". How to fix it?

I have re-built my web site using Ocopress. I found it really great for building static site!

BUT the problem now is - that when I try to see in in Internet Explorer 8 - it has a "Mobile" look! I mean - that IE8 is thought to be mobile. And it's not. Al least not for me...

In addition - the "navigate" drop-down has "undefined" entries.

I use IE8 from time to time at my work PC (even though I prefer Firefox and Chrome / Chromium).

See the image I'm attaching - My Octopress site with IE8. [1]

Compare to how my Octopress site looks in Firefox (looks good!): [2]

Compare it to how my Octopress site looks in Google Chrome (also good!)

  1. My site on IE8 (not good):
    http://www.flickr.com/photos/meorero/8657827234/

  2. Firefox (good): http://www.flickr.com/photos/meorero/8656722709/

Upvotes: 0

Views: 284

Answers (2)

christl11
christl11

Reputation: 11

There's a few issues going on here in <= ie8 as I found with my octopress site.

(I'm using Octopress v2.0 as cloned from the master branch on March-11-2013)

  • the site uses html5 tags
  • the upgrade to Modernizr 2.6 drops respond.js which means the site always looks like the mobile version
  • and the navigate dropdown labels don't work in any ie versions

So, The following worked for me on my site:

  1. Add 

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="{{ root_url }}/javascripts/libs/respond.min.js"></script>
<![endif]-->

    to source/_includes/head.html before the </head> tag

  2. Get the respond.min.js file

    git clone https://github.com/scottjehl/Respond.git

    and put it in source/javascripts/libs

This should fix the styling and media query problem for <= ie8

  1. To fix the navigate drop down will need to fix the use of link.text attribute in octopress.js. The version of octopress I cloned includes jquery so:

    in source/javascripts/octopress.js make the changes to getNav() as indicated below, replacing link.text with $(link).text() as IE uses innerText rather than text attribute on the links.

    Heres the change set diff:

    @@ -3,10 +3,10 @@
   mobileNav.children('select').append('<option value="">Navigate&hellip;</option>');
   $('ul[role=main-navigation]').addClass('main-navigation');
   $('ul.main-navigation a').each(function(i, link) {
-    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
+    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+$(link).text()+'</option>');
   });
   $('ul.subscription a').each(function(i, link) {
-    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
+    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+$(link).text()+'</option>');
   });
   mobileNav.children('select').bind('change', function(event) {
     if (event.target.value) { window.location.href = event.target.value; }

The octopress issue tracking is closed on github for the moment so some or all of these things will hopefully be fixed by the next release.

Upvotes: 1

Oren Maurer
Oren Maurer

Reputation: 299

Here is what I did - this seems to work for Desktop browsers - including IE8 !!:

In ./source/_includes/head.html

Deleted this: 

<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en">
<!--<![endif]-->
<head>

And put this: 

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>

Upvotes: 0

Related Questions