Add IE6 specific hacks CSS that only gets loaded if user agent is MSIE 6.

This sets the background-image to render using DirectX alpha channels to properly transparentize PNG's. Also removes ordering on ordered lists so that we don't get 1. 1. 1. 1. in the dragdrop list.

diff --git a/app/views/layouts/main.rhtml b/app/views/layouts/main.rhtml
index 5ae18dc81a11db933e7b20df5b9627d299075ad6..5836b4f2e4422f832c979dd3eacd54831b466e81 100644 (file)
--- a/app/views/layouts/main.rhtml
+++ b/app/views/layouts/main.rhtml
@@ -5,6 +5,7 @@
     <%= stylesheet_link_tag "common", :media => "all" %>
     <%= stylesheet_link_tag "main", :media => "all" %>
     <%= stylesheet_link_tag *(@stylesheets) %>
+    <%= stylesheet_link_tag "ie6hacks", :media => "all" if request.user_agent =~ /MSIE 6/ %>
     <%= javascript_include_tag "prototype", "effects", "dragdrop", "controls" %>
   </head>
 

diff --git a/public/stylesheets/ie6hacks.css b/public/stylesheets/ie6hacks.css
new file mode 100644 (file)
index 0000000..4446647
--- /dev/null
+++ b/public/stylesheets/ie6hacks.css
@@ -0,0 +1,29 @@
+/*
+
+ IE6 Hacks for Transparent PNG and list ordering
+
+*/
+
+div#bar-left {
+  background-image: none;
+  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/top_bar_1.png', sizingMethod=\'scale\');
+  width: 153px;
+  height: 37px;
+  padding-top: 8px;
+  float: left;
+  clear: left;
+}
+
+div#bar-right {
+  background-image: none;
+  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/top_bar_2.png', sizingMethod=\'scale\');
+  width: 78px;
+  height: 37px;
+  padding-top: 8px;
+  float: left;
+  clear: right;
+}
+
+ol {
+  list-style-type: none;
+}

diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
index 1d63f4c05241684ed46060d136832e0de5338ccd..acdff30b59a552c68e5708f4536dc9ea246e937a 100644 (file)
--- a/public/stylesheets/main.css
+++ b/public/stylesheets/main.css
@@ -25,9 +25,6 @@ h3 {
        margin: 0 0 1em 0 !important;
 }
 
-ol {
-  list-style-type: none;
-}
 .special {
        background-color: #999999;
        color: white;