Question

At web_application, IE 9 works but Safari 5.1 does not work when the user clicks on the Add and Delete Buttons.

Regarding the add/delete buttons:

I notice that in Safari the button is only responsive when the cursor is placed on the top part of the button…I noticed this was about the amount it was positioned from it’s normal layout.

Of course when I removed the positioning it worked. Next I tried switching from relative to absolute positioning but oddly enough had the same issue.

What is a fix for this, I need to position element but I need it to work as well. I hav the absolue positioning below.

  <form id="f3" method="post">
    <fieldset>
      <input class="te3" type="text" name="f3a" id="f3aa" maxlength="30"/>
      <span id="f3a">title:</span>
      <br>
      <input class="te3" type="text" name="f3b" id="f3bb" maxlength="2048"/>
      <span id="f3b">url:</span>
      <a id="f3c" class='but' href="javascript:void(0)">Add</a>
      <a id="f3d" class='but' href="javascript:void(0)">Delete</a>
    </fieldset>
  </form>

.but
  {
  margin-top:5px;
  font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
  text-decoration:none;
  font-size:14px!important;
  line-height:16px;
  padding:2px 2px;
  cursor:pointer;
  border:1px solid #bbb;
  color:#464646;
  outline:none;
  text-decoration:none;
  background:#f2f2f2 url(white-grad_1.png) repeat-x scroll left top;
  }
.but:hover
  {
  text-decoration:none;
  color:#000;
  border-color:#666;
  }
.but:active
  {
  text-decoration:none;
  background:#eee url(white-grad-active_1.png) repeat-x scroll left top;
  }


#f3c
  {
  position:absolute;
  bottom:-3px;
  left:262px;
  }
#f3d
  {  
  position:absolute;
  bottom:-3px;
  left:300px;
  }

Answer 1

for whatever reason, Safari handles z-indexing differently then IE. There was a hidden div blocking part of my link. I should have thought in more visual terms instead of wondering what was wrong with the code…that and keep my divs neater. The blocking div did not need to be there.

Simply setting z-index to 30 on my button fixed the issue.