CODEWITHSUNDEEP
htmlcsstwitter-bootstrapinternet-explorer-8
Barrosy
Barrosy

Reputation: 1457

Bootstrap in IE8 How to make some styling work?

I found out that I need to make use of Respond.js if I want to make Bootstrap work in IE8. Once included, everything looks well, except one thing. It seems like HTML5 elements style won't adjust (even when editing with inline-code when using developer tool in IE11 (with emulation on IE8) within my local html file, but when I do the same on a Bootstrap example, it seems to work perfectly fine though).

Changing the HTML from:

<footer>...</footer>

To

<footer style="BACKGROUND-COLOR: tomato">...</footer>

works within the example page (while editing within the browser), but does not work when I open my local file and do the same thing.

Why can I add styling to a footer on the HTML5 elements within the example page but not on my local file? Am I missing some file or do I need to do something differently? How can I make my <footer> styling work?

One suggestion I would do is making it just a <div> element with a class .footer but this is not the way it looks like within the Bootstrap example, so I do not know if this is the right way to fix the problem I am experiencing.

Upvotes: 1

Views: 42

Answers (1)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

HTML5 has a whole bunch of new elements for adding semantic meaning to your pages. For instance, nav signifies a navigational menu.

Since IE8 doesn’t know anything about these, it won’t recognize styles applied to them via CSS. Fortunately, there is an easy way to fix this by simply appending missing elements to the DOM of the page:

<!--[if lt IE 9]>
   <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->

Obviously you don’t have to define every HTML5 element in existence, just the ones you actually use. By the way, this code uses conditional comments, a feature introduced by Microsoft to specifically support differences in browser versions.

Another important thing to point out is that HTML5 elements are displayed as block by default, but IE8 doesn’t know that either. To mitigate this issue you could either specify display: block; when styling specific elements or do it wholesale in your CSS:

header, nav, section, article, aside, footer {
   display:block;
}

Note that if you’re using an HTML5 aware reset stylesheet (like this one), this is probably already taken care of for you.

Other way to use js liberaries

There are work-arounds in the form of the html5shiv and Modernizr polyfill scripts. Use one of these libraries to add support for HTML5 tags to old IE versions.

Upvotes: 2

Related Questions