links on top of absolute image become un-clickable

StackOverflow https://stackoverflow.com/questions/21709017

  •  10-10-2022
  •  | 
  •  

Question

I've tried changing the z-index for the image and hyperlink with no luck. If I remove the image(girl.png) the link works. What am I doing wrong?

     <table width="842" cellpadding="0" cellspacing="0" bgcolor="#f9a531" style="margin-bottom:0px; margin-top:50px; padding-right:20px;">
  <tr><td height="30" align="right" valign="middle"><a href="portfolio.html">PORTFOLIO</a>&nbsp;&nbsp;<a href="https://www.facebook.com/pages/Ashleys-Hair-Design/299450416776890https://www.facebook.com/pages/Ashleys-Hair-Design/299450416776890" target="_blank"><img src="http://ashleyshairdesign.ca/images/facebook.gif" height="18" width="8" border="0" alt="Ashley Hair Design facebook page"></a>
  <br />
  </td></tr>
  </table>
<!-- End top bar -->



    <table  width="842"  cellpadding="0" cellspacing="0" bgcolor="#e6e4e1" style="background-image:url(http://ashleyshairdesign.ca/images/bg1.gif); background-position:top; background-repeat:repeat-y; padding-top:30px;padding-left:50px; padding-right:30px;">

      <tr><td>
    <img src="http://ashleyshairdesign.ca/images/ashley.jpg" width="375" height="500" alt="Ashley Wright Hair Designer" align="middle">
        </td>      


      <td valign="top" align="left">
    <img src="http://ashleyshairdesign.ca/images/logo.png" width="290" height="131" border="0" alt="Ashley Hair Salon in Manotick"  vspace="0" />  
      <br /><br />
      <h3>
         613-715-HAIR (4247)<br />
         <a href="mailto:ashleywright63@mac.com" class="content-links">ashleywright63@mac.com</a><br />
         5562-B Manotick Main st. <br />
         Manotick, ON K4M 1B3<br />
      </h3>


      <img src="http://ashleyshairdesign.ca/images/hours.png" /><br />
      Tue 9:00 - 6:00<br />
      Wed - Thu 9:00 - 8:00<br />           
      Fri 9:00 - 6:00<br />
      Sat 9:00 - 4:00<br />
      Sun &amp; Mon - Closed<br /><br />
    <img src="http://ashleyshairdesign.ca/images/girl.png" alt="Ashleys Hair Salon" style="position:absolute; top:34%; left:53%;" class="transparent" />   
    <a href="http://www.schedulicity.com/Scheduling/Default.aspx?business=AHDZC3" title="Online scheduling" target="_blank"><img src="http://www.schedulicity.com/Business/Images/ScheduleNow_LG.png" alt="Schedule online now" border="0"  /></a> 
      </td></tr>
      <tr><td colspan="2" align="center">
        <br /><br />
      <h3 style="margin:0px;">Beauty and Personal care</h3>
      Experience in special occasion updos, contemporary styling and technical ability<br /><br /> 
    </td></tr>
      </table>

Website: ashleyshairdesign.ca

Was it helpful?

Solution 2

You should remove the div that hold you link! There's no need to out the link in an div!

<div style="z-index:2;">link</div>
<a href="http://www.schedulicity.com/Scheduling/Default.aspx?business=AHDZC3" title="Online scheduling" target="_blank" style="z-index:3;position:absolute;">

See your working code on jsfiddle: http://jsfiddle.net/r4xeH/1/

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

Edit:

Updated the jsfiddle! Like I noticed, z-index only works if on positioned elements! You didn't position the <a href></a> so the z-index never worked for the <a></a> element and that's why the image was on top of the link.

If you look at your HTML, try to put styling in a CSS file, avoid inline styling. Also do not table's for layout. Tables must be used for showing data like you would in an Excel file. Use div's instead and position them!

OTHER TIPS

Malformed HTML:

<div style="z-index:2;>"

So, i stripped down your code to this:

<table width="842" cellpadding="0" cellspacing="0" bgcolor="#e6e4e1" >
    <tr>
        <td valign="top" align="left">
            <div style="z-index:2;>"
                <a href="http://www.schedulicity.com/Scheduling/Default.aspx?business=AHDZC3" title="Online scheduling" target="_blank">
                <img src="http://www.schedulicity.com/Business/Images/ScheduleNow_LG.png" alt="Schedule online now" border="0" />
                </a>
            </div>
        </td>
    </tr>
</table>

Everything was removed and the link still didn't work. Then i corrected an error: " to --> moving the " inside the > and the link starts working.

Then I put all your codes back in and made that one change

<div style="z-index:2;">

The link still works.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top