Adding IE8 specific CSS files to fix the background images and buttons.

lib/static_resources.js

@@ -118,6 +118,14 @@ exports.resources = {
     '/css/style.css',
     '/css/m.css'
   ],
+  '/production/ie8_main.css': [
+    '/css/ie8_common.css',
+    '/css/ie8_main.css'
+  ],
+  '/production/ie8_dialog.css': [
+    '/css/ie8_common.css',
+    '/dialog/css/ie8.css'
+  ],
   '/production/communication_iframe.js': [
     '/lib/jschannel.js',
     '/lib/winchan.js',

resources/static/css/ie8_common.css

+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * These fixes are specific to IE8 that are common to the main site and dialog.
+ */
+
+.submit button,
+.submit button:hover,
+.submit button:focus,
+.submit .button:hover,
+.submit .button:focus {
+    background-image: url("/i/button-arrow.png");
+    background-position: center right;
+    background-repeat: no-repeat;
+}
+
+button[disabled], .submit_disabled button, .submit_disabled .button,
+.submit_disabled button:focus, .submit_disabled .button:focus,
+.submit_disabled button:active, .submit_disabled .button:active {
+  background-image: none;
+}

resources/static/css/ie8_main.css

+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * These fixes are specific to IE8 for the main site
+ */
+
+body {
+  background-image: url("/i/marketplace-header.png");
+  background-position: center top;
+  background-repeat: repeat-x;
+}
+
+

resources/static/dialog/css/ie8.css

+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * These fixes are specific to IE8.
+ */
+

resources/views/dialog_layout.ejs

@@ -13,6 +13,9 @@
     <script src="/lib/html5shim.js"></script>
   <![endif]-->
   <%- cachify_css('/production/dialog.css') %>
+  <!--[if lt IE 9]>
+    <%- cachify_css('/production/ie8_dialog.css') %>
+  <![endif]-->
   <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,700,700italic' rel='stylesheet' type='text/css'>
   <title><%= gettext('Mozilla Persona') %></title>
 </head>

resources/views/layout.ejs

@@ -12,6 +12,9 @@
   <![endif]-->
   <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,700,700italic' rel='stylesheet' type='text/css'>
   <%- cachify_css('/production/browserid.css') %>
+  <!--[if lt IE 9]>
+    <%- cachify_css('/production/ie8_main.css') %>
+  <![endif]-->
   <%- cachify_js(util.format('/production/%s/browserid.js', locale)) %>
   <title><%= format(gettext("Mozilla Person: %s"), [title]) %></title>
 </head>