Tutorial :image not appearing in IE7 OR IE8



Question:

I have an image that is using absolute positioning on my site. It is positioned to appear over a css-background-image. It works fine in gecko based browsers and webkit. I was surprised to see the same problem in BOTH versions of IE including 8. I am currently using a png for the image but tried it with a jpg and that made no difference. Relevant markup and css below....Any ideas ?

     <div id="have_vid">       <div id="click_here">          <a href="/services"<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png"</img></a>       </div>       </div>    #have_vid {      width: 328px;      height: 152px;      background-image: url(images/havevid.jpg);      background-repeat: no-repeat;      float: right;      margin-right: 10px;      margin-top: 10px;      padding-bottom: 14px;      border-bottom:1px dotted #616161;  }    #click_here{      position: absolute;      top: 50px;      right: 24px;  }  


Solution:1

Your 'A' element is wrong. Try

<a href="/services"><img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png" /></a>  

Also use fiddler to watch and see that IE is downloading the image correctly.


Solution:2

You're missing a closing angle on your <a> tag:

 <a href="/services"<img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png"</img></a>  

Should be:

 <a href="/services"><img id="join_now" src="<?php bloginfo('template_directory'); ?>/images/clickhere.png"</img></a>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »