BlackBerry Browser bug? Padding on a link doesnt increase the clickable area

Question

Hey Community!

I'm developing a mobile website and one of the browsers I need to make it work on is the BlackBerry Browser on the BlackBerry 8330 (Curve) running version 4.5. I came across a weird bug when I tried to style some links to look like buttons.

If I add padding to an anchor tag, the display of the link changes, but the clickable region does not. For instance, if I move the trackball over the link, the highlight of the clickable region appears at the top of the link, and its height matches the text as if no padding was applied:

The relevant code I am working with looks similar to this (stripped down heavily..):

<style type="text/css">
table, td { width: 100%; }
a { display: block; padding: 10px; }
</style>

<table>
  <tr><td><a href="http://www.somewhere.com"&gt;Somewhere Link 1</a></td></tr>
  <tr><td><a href="http://www.somewhere.com"&gt;Somewhere Link 2</a></td></tr>
  <tr><td><a href="http://www.somewhere.com"&gt;Somewhere Link 3</a></td></tr>
  <tr><td><a href="http://www.somewhere.com"&gt;Somewhere Link 4</a></td></tr>
  <tr><td><a href="http://www.somewhere.com"&gt;Somewhere Link 5</a></td></tr>
</table>

Any idea why this behavior is occuring? The clickable region gets increased by 10px on the top and bottom (not left and right) even though the highlight shows otherwise. The only thing I'm stumped on is the highlighted area and why it's not expanding/following the dimensions of the link.

Answer 1

I don't think display:block on an inline element works correctly in the blackberry browsers. I'm working on a blackberry version on a site and I'm having the same difficulty. If you found a solution to your problem I'd love to hear it.