From 25a49f9f2e33540dc413210f9dd09c6cec141896 Mon Sep 17 00:00:00 2001
From: Scott Main <smain@google.com>
Date: Thu, 30 May 2013 13:51:08 -0700
Subject: [PATCH] fix IE 7/8 bugs on IO videos page

Change-Id: I94d47989e8c1075c9864d0a4577434917a7913d7
---
 docs/html/channels/io2013.jd | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/html/channels/io2013.jd b/docs/html/channels/io2013.jd
index 7c7aca44667c..977eb2f2aed3 100644
--- a/docs/html/channels/io2013.jd
+++ b/docs/html/channels/io2013.jd
@@ -3,7 +3,6 @@ page.title=Google I/O 13
 @jd:body
     
 <style>
-
 #ioplayer-frame {
   z-index:10;
   width:703px;
@@ -56,6 +55,7 @@ ul.videos li {
   background-repeat:no-repeat !important;
   background-size:320px auto;
   background-position:10% 50%;
+  z-index:1; /* IE: the description is 2 */
 }
 ul.videos li a {
   color:#fff !important;
@@ -70,6 +70,7 @@ ul.videos li a {
   background-image: -moz-linear-gradient(top, rgba(0,0,0,0.8), transparent);
   background-image: -o-linear-gradient(top, rgba(0,0,0,0.8), transparent);
   background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
 }
 ul.videos.featured li {
   margin:0 0 2px;
@@ -85,12 +86,14 @@ ul.videos li h4 {
   text-shadow:1px 1px 0 rgba(0,0,0,0.8);
   font-size:18px;
   line-height:22px;
-  color:inherit;
+  color:#fff;
   margin:0;
+  height:100%; /* IE: to fill clickable area */
 }
 
 ul.videos li .description-frame {
   display:none;
+  z-index:2; /* IE: the li is 1 */
 }
 ul.videos li a:hover .description-frame {
   display:block;
@@ -150,12 +153,15 @@ ul.videos span.tag {
 }
 ul.videos span.tag.design {
   background-color:rgba(51, 181, 229, .7);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc33b5e5', endColorstr='#cc33b5e5',GradientType=0 ); /* IE6-9 */
 }
 ul.videos span.tag.develop {
   background-color:rgba(255, 136, 0, .7);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccff8800', endColorstr='#ccff8800',GradientType=0 ); /* IE6-9 */
 }
 ul.videos span.tag.distribute {
   background-color:rgba(153, 204, 0, .7);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc99cc00', endColorstr='#cc99cc00',GradientType=0 ); /* IE6-9 */
 }
 
 </style>
@@ -285,11 +291,11 @@ function buildPlaylist(data, ul, tag) {
     shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
 
     var a = $('<a href="#" id="' + id + '" '
-          + 'onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" >');
+          + 'onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
     var pShortDescription = $('<div class="description-frame"><div class="arrow-up"></div>'
           + '<div class="description">' + shortDescription + '</div></div>');
     var h4Title = "<h4>" + title + "</h4>";
-    var li = $('<li style="background-image:url(\'' + thumbUrl +'\')">');
+    var li = $('<li style="background-image:url(\'' + thumbUrl +'\')" />');
 
     li.append(a);
     a.append(h4Title).append(pShortDescription);
-- 
2.11.0