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;
}

Answer 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.

Answer 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>