Question

I have the following code:

<style>
    .moduletable-categories {
        margin: 1em 0;
    }
    .clear {
        overflow: hidden;
    }
    .menuitem-link {
        /* fill parent */
        display: block;
        zoom: 1;
    }
    #categories-nav .menuitem {
        display: block;
        width: 31.9148936170%;
        margin-right: 2.1276595744%;

        background: url('../images/cm-bottomnav-bg-point.png') repeat;

        float: left;
    }
    #categories-nav .menuitem-link {
        padding: .5em;
        margin: 4px;

        height: 70px;

        background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#000));
        background: -moz-linear-gradient(top, #888, #000);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#000000');

        font-size: 90%;
        text-transform: uppercase;
        font-weight: bold;

        vertical-align: top;
    }
    #categories-nav .menuitem-link:active {
        background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#888));
        background: -moz-linear-gradient(top, #000, #888);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#888888');

        color: #fcd3a5;
    }
    /* last menu item in #categories-nav */
    #categories-nav .menuitem.item-665 {
        margin-right: 0;
    }
</style>

<nav class="moduletable-categories clear">
    <ul class="menu" id="categories-nav">
        <li class="menuitem item-596">
            <a class="menuitem-link" href="/custom/category-1">Category 1</a>
        </li>
        <li class="menuitem item-597">
            <a class="menuitem-link" href="/custom/category-2">Category 2</a>
        </li>
        <li class="menuitem item-665">
            <a class="menuitem-link" href="/custom/category-3">Category 3</a>
        </li>
    </ul>
</nav>

Here’s how it looks in the browser:

It LOOKS exactly how I want it in all browsers (even IE7+). It even works perfectly in all browsers except (to nobody’s suprise) IE. In all browsers except IE the user can click anywhere on the “button” to follow the link (with nifty little button press effect as well). IE (all versions, even 9) doesn’t let the user click anywhere on the button. The user must click on the text instead, which is not what I want at all.

So what’s the workaround for this one? I tried adding “zoom: 1” to the anchor tag and that didn’t seem to make any difference whatsoever. Obviously IE knows that the anchor element is supposed to be a button-like block, since it renders it as such, however it won’t register any clicks (or hover events for that matter) unless the mouse is directly over the “Category x” text.

Answer 1

Solved this one by setting a 1px by 1px transparent background image to the anchor tag (no-repeat). IE and all other browsers still render the buttons appearance via the CSS gradients, only now the whole button is clickable in IE as well as all other browsers.