[thelist] CSS: display: block on links

Bill Moseley moseley at hank.org
Sat Jan 13 11:10:58 CST 2007


I have an application with a something like 50+ pages with rather
simple html tables.

Often each column typically has only one link, and the link text
length can be very short so one has to be accurate with the mouse.

To make it easier to click I can add display: block to the <a> tags
then the entire <td> is click-able.

So, I have a bit of javascript that finds these tables, and where a
<td> only has one <a> element I set display = 'block'.

Where this doesn't work so well is when I have text on a second line:

    <td>
        <a href="stuff">x</a>
        <br />
        Some other text
    </td>

Then I end up with extra space due to the display: block on the <a>
and the following <br>.

Is there a better way to get the effect I want?

Here's my bit of javascript:

    var table_links = function() {
        if ( document.getElementById && document.getElementsByTagName ) {
            var content = document.getElementById('content');
            if ( !content ) return;

            var table_row = content.getElementsByTagName('tr');

            for (var i = 0; i < table_row.length; i++ ) {
                var row = table_row[i];
                var td = row.getElementsByTagName('td');


                for ( var j = 0; j < td.length; j++ ) {
                    var link = td[j].getElementsByTagName('a');
                    if ( link.length != 1 ) continue;
                    link[0].style.display = 'block';
                }
            }
        }
    }
    addEvent(window, 'load', table_links, false );





-- 
Bill Moseley
moseley at hank.org




More information about the thelist mailing list