JQuery images roll over effect not working in IE8

JQuery images roll over effect not working in IE8

Hi 

I'm doing a micro-site with a grid of images, i created a bit of code to do a simple roll-over so when you are over the images display a blue panel with titles. It works fine in Firefox, Chrome and Safari but IE8 is not working at all. 

here is the link for the live version:


Could you guys give me directions and tips so I know what i am doing wrong, I will appreciate it. thanks in advance.

Jquery Code I put it in the header, just put it here to make it easy

  2. $(document).ready(function() {
  3. $("a.titlemask").hover(

  5. function() {
  6. $(this).children('.shide').show();
  7. }, function() {
  8. $(this).children('.shide').hide();
  9. });
  10. $("a.titlemask2").hover(

  12. function() {
  13. $(this).children('.shide').show();
  14. }, function() {
  15. $(this).children('.shide').hide();
  16. });
  17. });



html code:

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  6. <title>Lowe and Partners</title>
  7. <link href="css/main.css" rel="stylesheet" type="text/css" />
  8. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

  10. <script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script>

  12. <script type="text/javascript">

  15. $(document).ready(function(){
  18. $("a.titlemask").hover(
  20. function() {

  22. $(this).children('.shide').show();
  24. },
  26. function() {

  28. $(this).children('.shide').hide();
  30. });
  33. $("a.titlemask2").hover(
  35. function() {

  37. $(this).children('.shide').show();
  39. },
  41. function() {

  43. $(this).children('.shide').hide();
  45. });
  46.  
  47. });
  48.         
  49.         
  50.         </script>
  51.         
  52.         

  54. </head>

  56. <body>


  59. <div id="wrap">
  60. <div class="thumb"><img src="images/lowe.gif" alt="lowe" width="219" height="219" /><a  class="titlemask" href="#"><span  class="shide">Download<br/>Credentials</span></a></div>
  62. <div class="thumb"><img src="images/thumb-omo.jpg" alt="thumb-omo" width="219" height="219" /><a  class="titlemask" href="set-me-free-omo.html" target="_self"><span class="shide">Set Them Free<br/><em>Omo</em></span></a></div>
  64. <div class="thumb"><img src="images/thumb-organ-honors.jpg" alt="thumb-organ-honors" width="219" height="219" /><a  class="titlemask" href="leila-organ-donors.html" target="_self"><span class="shide">Leila<br/><em>Organ Donors</em></span></a></div>
  66. <div class="thumb double"><img src="images/thumb-the-force.jpg" alt="thumb-the-force" width="451" height="219" /><a  class="titlemask2" href="the-force.html" target="_self"><span class="shide">The Force<br/><em>Volkswagen Passat</em></span></a></div>
  68. <div class="thumb"><img src="images/thumb-criket.jpg" alt="thumb-criket" width="219" height="219" /><a  class="titlemask" href="cricket-ki-khushi-coca-cola.html" target="_self"><span class="shide">Cricket Ki Khushi<br/><em>Coca-Cola</em></span></a></div>
  70. <div class="thumb"><img src="images/thumb-the-cleaner.jpg" alt="thumb-the-cleaner" width="219" height="219" /><a  class="titlemask" href="the-cleaner-axe.html" target="_self"><span class="shide">The Cleaner<br/><em>Axe</em></span></a></div>
  72. <div class="thumb"><img src="images/thumb-rivers-of-light.jpg" alt="thumb-rivers-of-light" width="219" height="219" /><a  class="titlemask" href="rivers-of-light.html" target="_self"><span class="shide">Rivers of Light<br/><em>Colombian Ministry of Defence</em></span></a></div>
  74. <div class="thumb"><img src="images/thumb-contagion.jpg" alt="thumb-contagion" width="219" height="219" /><a  class="titlemask" href="contagion-trailer.html" target="_self"><span class="shide">Contagion Trailer<br/><em>Contagion</em></span></a></div>
  76. </div>
  77. <div class="footer">
  78. <div class="txt-footer"><p>© 2012 Lowe and Parttners Worldwide<br/>
  79. Powered by Lowe and Partners IT </p></div>
  80. <img src="images/lowe-small.gif" alt="lowe-small" width="49" height="33" />
  81. </div>

  84. </body>
  85. </html>

here is the css

  2. A:link, A:visited, A:active {font-family: 'Avenir_light_custom',  times, serif; font-size: 14px; color:#76bbe5;}

  4. A:hover {text-decoration: underline; color: #aad8f4;}

  6. body {
  7. background:#fff;
  8. }
  10. img {  
  11. border-style: none;
  12. }





  18. #wrap {
  19. background:#fff;
  20. width: 705px;
  21. margin: 36px auto;
  22. margin-top: 72px;

  24. }

  26. #main {
  27. width: 519px;
  28. height: 291px;
  29. margin: 0 auto;

  31. }


  34. .controls {
  35. margin: 0 auto;
  36. width: 519px;
  37. height: 20px;
  38. margin-top: 10px;
  39. }

  41. .controls p {
  42. font-family: 'Avenir_light_custom',  times, serif;
  43. font-size: 14px;
  44. line-height: 16px;
  45. color: #666;
  46. float: left;
  47. }


  50. .controls a {
  51. font-family: 'Avenir_light_custom',  times, serif;
  52. font-size: 14px;
  53. line-height: 16px;
  54. float: right;
  55. }

  57. .thumb {
  58. width: 219px;
  59. height: 219px;
  60. float: left;
  61. margin: 6px;
  62. position: relative;
  63. z-index: 1;
  64. }

  66. .thumb.double {
  67. width: 451px;
  68. height: 219px;
  69. float: left;
  70. }



  74. a.titlemask:link, a.titlemask:visited,  a.titlemask:active  {
  75. position: absolute;
  76. top:0;
  77. left: 0;
  78. z-index: 22;
  79. display: block !important; 
  80. width: 201px;
  81. height: 201px;
  82. padding: 9px;
  83. color: #fff;
  84. text-decoration: none;
  85. font-size: 14px;
  86. line-height: 15px;
  87. text-transform: uppercase;

  89. }


  92. a.titlemask:hover {
  93. background-color: rgba(105, 173, 222, 0.8);
  94. }


  97. a.titlemask2:link, a.titlemask2:visited,  a.titlemask2:active  {
  98. position: absolute;
  99. top:0;
  100. left: 0;
  101. z-index: 22;
  102. display: block !important; 
  103. width: 433px;
  104. height: 201px;
  105. padding: 9px;
  106. color: #fff;
  107. text-decoration: none;
  108. font-size: 14px;
  109. line-height: 15px;
  110. text-transform: uppercase;

  112. }


  115. a.titlemask2:hover {
  116. background-color: rgba(105, 173, 222, 0.8);
  117. }


  120. .titlemask span em, .titlemask2 span em {
  121. font-size: 11px;
  122. }

  124. /*


  127. .thumb a:link, .thumb a:visited,  .thumb a:active {
  128. position: absolute;
  129. top:0;
  130. left: 0;
  131. z-index: 22;
  132. display: block;
  133. width: 219px;
  134. height: 219px;
  135. background-color: green;
  136. }

  138. .thumb a:hover {
  139. position: absolute;
  140. top:0;
  141. left: 0;
  142. z-index: 22;
  143. display: block;
  144. background-color: purple;
  145. }

  147. */

  149. .titlemask span, .titlemask2 span {
  150. display: none;
  151. }

  153. .footer {
  154. width: 705px;
  155. margin: 36px auto;
  156. overflow: hidden;
  157. border-top: 57px solid #fff;

  159. }


  162. .header {
  163. width: 705px;
  164. margin: 36px auto;
  165. overflow: hidden;
  166. border-bottom: 57px solid #fff;
  167. }

  169. .txt-footer {
  170. width: 200px;
  171. height: 30px;
  172. float: left;
  173. margin-left: 450px;

  175. }

  177. .txt-footer p {

  179. padding-top:5px;
  180. font-family: 'Avenir_light_custom',  times, serif;
  181. font-size: 10px;
  182. line-height: 14px;
  183. color: #999;
  184. text-align: right;

  186. }

  188. .footer img {float: right; border-right: 16px solid #fff;}