Activating a phone call when clicking a link or hyperlinked image - Not working when giving link or image an ID?

Hoping someone might be able to help me with this.

I have a header graphic which I've floated / positioned multiple transparent (png) images on.

One of these images is a "Call Us - 555-555-555" graphic (transparent png)

What I am using right now:

<a href="tel:555-555-5555"><img src="http://www.domain.com/images/numfloat.png" alt="Call Now!" id="flo"></a>

It appears anytime I add an "id=##" to this, it breaks the link functionality. Same when I tried this with text.

Would anyone have a solution for this they could share with me please?

Thank you!

Update:

The contents of the header area:

    <div id="header-box">
<a id="header-link" href="http://www.domain.com"></a>


<a class="call" href="tel:000-000-0000">
   <img src="http://www.domain.comimages/numfloat.png" alt="Call Now!" id="flo">
</a>

</div>

The relevant CSS:

        #flo 
{ 
   width: 220px; 
   height: 83px; 
}



.call
{

   position:absolute; 
   top: 43px;
   left: 810px; 

}



#header-link { 
        position: absolute; 
        top: 43px; 
        left: 575px; 
        width: 200px; 
        height: 80px; 
        background-color: transparent; 
        border: 0px solid yellow; 

}



.custom #header {

    position:relative;
    padding-left: 0;
    padding-right: 0;
    border-bottom: none; margin-bottom: 15px; height: 190px;
    background-image: url(http://www.domain.com/images/header_graphic.jpg); 

}

Solution

You are moving your image out of your link by moving the image with the position absolute. Do this: CODE: http://jsfiddle.net/D67zL/1/ HTML

<a class="call" href="tel:555-555-5555">
   <img src="http://www.domain.com/images/numfloat.png" alt="Call Now!" id="flo">
</a>

CSS

#flo 
{ 
   width: 220px; 
   height: 83px; 
}

.call
{
   position:absolute; 
   top: 43px;
   left: 810px; 
}