Slightly better internet explorer support

Site now works in IE9. IE8 Still has issues
because setting text of a <style> node seems to
break. Still investigating.

Author: hojberg

public/css/app.css

@@ -2,12 +2,13 @@
 ====================================================== */
 html, body                    { background: url(../img/noisebg.png); }
 body                          { font-size: 18px; font-family: 'Terminal Dosis', sans-serif; padding: 0; margin: 0; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
-a                             { color: rgba(255, 255, 255, 0.7); }
+a                             { color: #fff; color: rgba(255, 255, 255, 0.7); }
 ul, ol, form                  { margin: 0; padding: 0; }
 ul, ol                        { list-style-type: none; }
 h1                            { margin: 0; padding: 0; }
-h2                            { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
+h2                            { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: #626569; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); }
 input                         { font-size: 14px; border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; }
+input[type='radio']           { border: 0; }
 
 /* =LAYOUT
 ====================================================== */
@@ -19,18 +20,17 @@ input                         { font-size: 14px; border: 1px solid #777; box-sha
   background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
   background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
   background: radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 );
 }
-#footer                       { text-align: center; padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); vertical-align: top; }
+#footer                       { padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-top: 1px solid #797f85; border-top-color: rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); vertical-align: top; text-align: center; }
 #footer a                     { vertical-align: top; color: #fff; }
-.clr                          { overflow: hidden; }
+.clr:after                    { clear:both; content:"."; display: block; height:0; visibility: hidden; line-height:0; font-size:0; }
 
 .preview_and_configuration    { float: left; width: 395px; }
 
 /* =MODULES
 ====================================================== */
 /* preview */
-.arrow_box                      { padding: 40px; width: 280px; height: 100px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
+.arrow_box                        { padding: 40px; width: 280px; height: 100px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
 
 /* logo */
 .logo                             { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
@@ -51,5 +51,5 @@ input                         { font-size: 14px; border: 1px solid #777; box-sha
 
 /* css_result */
 .css_result                       { position: relative; float: right; width: 402px; }
-.css_result .code                 { white-space: pre; padding: 10px; display: block; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }
+.css_result .code                 { white-space: pre; padding: 10px; display: block; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: #8c9196; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid #696d72; border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); }
 .css_result .copy_code            { position: absolute; bottom: 5px; right: 10px; width: 14px; height: 22px; background: url(../img/clippy.png) no-repeat 0 4px; }

public/index.html

@@ -93,26 +93,26 @@ <h2>Arrow configuration</h2>
 
       (function() {
         var defer = (function (document, script) {
-            var urls = [],
-                firstScript = document.getElementsByTagName(script)[0];
+          var urls = [],
+              firstScript = document.getElementsByTagName(script)[0];
 
-            return function (url, callback) {
-              var inc;
+          return function (url, callback) {
+            var inc;
 
-              if (url && urls.indexOf(url) === -1) {
-                inc = document.createElement(script);
-                inc.async = true;
-                inc.src = url;
-                inc.onload = callback || function () {};
-                firstScript.parentNode.insertBefore(inc, firstScript);
-              }
+            if (url && $.inArray(url, urls) === -1) {
+              inc = document.createElement(script);
+              inc.async = true;
+              inc.src = url;
+              inc.onload = callback || function () {};
+              firstScript.parentNode.insertBefore(inc, firstScript);
             }
-          }(document, 'script'));
+          }
+        }(document, 'script'));
 
-          window.onload = function () {
-              defer(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js');
-              defer('//platform.twitter.com/widgets.js');
-          };
+        window.onload = function () {
+          defer(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js');
+          defer('//platform.twitter.com/widgets.js');
+        };
       })();
     </script>
   </body>

public/js/spec/views/arrow_css_view_spec.js

@@ -29,7 +29,7 @@ describe("CSSArrowPlease.ArrowCSSView", function () {
     it('renders the css when render is called', function () {
       expect( $code.text() ).toBe( '' );
       arrowCSSView.render();
-      expect( $code.text() ).toBe( arrow.toCSS() );
+      expect( $code.text().replace(/\s+/g, '') ).toBe( arrow.toCSS().replace(/\s+/g, '') );
     });
 
     it('calls clippy() on the copy_code node', function () {

public/js/spec/views/arrow_preview_view_spec.js

@@ -18,7 +18,7 @@ describe("CSSArrowPlease.ArrowPreviewView", function() {
 
     it('render delegates to ArrowCSSView.render', function () {
       arrowPreviewView.render();
-      expect( $container.text() ).toBe( arrow.toCSS() );
+      expect( $container.text().replace(/\s+/g, '') ).toBe( arrow.toCSS().replace(/\s+/g, '') );
     });
   });