By Blaz on

ok so firstly here is my site ... http://urbanmyth.net/drupal

If you look at it in any other browser it works fine ... except all versions of IE.

The problem is the boxes on the homepage dont get the same yellow hover effect in IE. Now some of the boxes are jus standard static html / CSS and wont change (they work fine) the others (that dont work in IE9) are Drupal Blocks that update when a user creates content for that section. In IE9 if you hover over the very top edge of the blocks that dont work properly the hover will appear. It seems that no matter what i do the image stays in front of the hover therefore not registering the hover properly. Ive tried all kinds to try and solve this problem from playing about with CSS and z-index ... to even creating the image as a separate block and putting it below the rollover on the specific region on the blocks page.

This site is due to go live today and this it the only thing stopping it going live ... a speedy response will be greatly appreciated.

This is the code that the standard static boxes use and they all work perfectly fine in IE9

 <div id="idKitchen4" class="col1 square-rollover-img" style="position:absolute; top:225px;">
   <a href="#linkhere">
     <span>
       <h3>TITLE HERE</h3>
       <br />
       <p>lorem ipsum ... </p>                
     </span>
   </a>
</div>

This is one of the blocks that doesnt work in IE9, under fields in views I have TITLE, TEASER & FEILD_MAIN_IMAGE all there but all have the "exclude from display" box ticked. Under them all I have NODE:LINK with "rewrite the output of this field selected" and the following code inserted.

<div id="idBlogBlock" class="col1 square-rollover-img">
  <a class="clBlogBlock" href="/drupal/blog_tech">
    <span>
      <h4>Tech</h4>
      <h3>[title]</h3>
      <br/>
      <p>[teaser]</p>
      <br/>
      <b>Read blog post ...</b>
    </span>
  </a>
</div>
[field_main_image_fid]

The CSS involved : -

.square-rollover-img a{color:#000; width: 205px; height:205px; display: block; text-decoration: none;}
.square-rollover-img a{}
.square-rollover-img a:hover{background:#FF0; opacity:.85; filter:alpha(opacity=80); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s;}
.square-rollover-img a:active{}
.square-rollover-img a span{display:none; width:175px; padding:15px; text-align:left; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif;}
.square-rollover-img a:hover span{display: block;}

.col1 { width:205px;!important max-height:205px; margin:10px;}

⋅ Categories: Drupal 6.x

Comments

Jay Almers’s picture

Jay Almers commented

I am not sure if this is the reason or not, as I don't have readily-available access to IE9, but there seems to be some some empty <a> tags being rendered in your Views blocks.

Example: 

<div id="idBlogBlock" class="box col1 square-rollover-img">
<a href="/drupal/content/r2b2"> </a>
<a class="clBlogBlock" href="/drupal/blog_kitchens">
<span>
<h4>Kitchens</h4>
<h3>R2B2</h3>
<br>
<p>Sometimes an idea comes along that just blows your mind, revolutionary,&nbsp;but based on principles so old as to be almost obselete. Impractical yet...</p>
<br>
<b>Read blog post ...</b>
</span>
</a>
</div>

Given how IE tends to choke on even the slightest bumps in the road, I could see this as being unhealthy at the least. I will try and get access to a machine that has IE9 on it and see if I can see its behavior.

chronosinteractive’s picture

chronosinteractive commented

You're using Transition Duration for the swap/change effect.

Line 66 of style.css

.blogsquare-rollover-img a:hover{background:#FF0; opacity:.85; filter:alpha(opacity=80); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;
			  			 -o-transition-duration: 0.5s; transition-duration: 0.5s;}

Transition Duration is CSS3 and is not supported by IE at all. http://www.w3schools.com/cssref/css3_pr_transition-duration.asp

Blaz’s picture

Blaz commented

Thanks for your feedback!

To be honest this has been a bit of a rushed job and developed in just a few weeks, ive done what i can with the time given to me.
So ill get round to getting rid of all the empty tags (due to views and blocks) eventually.

As for the Transitional i didnt even think of that! But that obviously explains why the hover doesnt nicely fade in in IE.

For now what i did was made the hover area a few pixels bigger so it bleeds out behind the main image. This means that its triggered when people go to rollover the image. However it doesnt look as clean and if people mouse over too quickly it doesnt register (in IE). Ill keep at it but for now this will keep the client happy.