RailsApps/rails-composer — pull request #81 by rceee (2013-02-22 19:15:06+00:00)
Title: Changed layout header tag to div for IE compatibility

I ran into some trouble after putting a Rails-Composer app into production when I switched over to Windows and loaded the site up in IE8. Suddenly the entire navbar area was completely without styling. I searched the web and found that quite a few people were running into this problem, and some were trying Bootstrap CSS hacks, and others were just giving up. Finally, I found the solution somewhere: the problem arose whenever one used a header tag rather than a div tag for the enclosing container for the nav area.

Some versions of IE (I believe 8 and below) have problems recognizing the header tag, and as a result, the entire top portion of the layout will break, making everything vertical and unstyled in IE.

It's unfortunate, because using header is semantically and HTML5-correct, but upon a simple switch to div, it made everything instantly backwards-compatible with all versions of IE supported by Bootstrap. In theory, this should be covered by the HTML5 Shiv, but for whatever reason, with Bootstrap, much of the styling (I guess because Bootstrap's styling is rather complex) was not being applied to the "tacked on" header tag functionality in IE < 9. Furthermore, we are relying on the user to have javascript enabled, since the HTML5 shiv is a javascript script, so it cannot degrade gracefully (which Rails intends to do by design, I think), and those without javascript enabled in IE will have broken layouts inside the header tag(s). Thus, this pull is how I fixed it in my own app, and everything went back to normal in both IE and all the modern browsers (I believe this is actually how Bootstrap says to lay out their example layout, as well; using a div, rather than a header):

http://twitter.github.com/bootstrap/scaffolding.html#layouts
http://twitter.github.com/bootstrap/components.html#navbar

Hope this helps.