Content goes here... Btw, BODY-tag cursor pointer is currently OFF.

Solution(?)

Add “cursor:default” to #page. Must be the tuna sandwich I ate late night... =|

The Dilemma

So, pretty much I’m trying to have everything that isn’t part of the #page except for #header clickable.

However, people need to know that those areas are clickable. The problem with that is if you add “cursor:pointer” to the BODY-tag, the cursor can also be see at the top layers (it bleeds through). This is also the same if you add it to div#header by the way. I’m not so sure what else to search for in terms of any leads to fixing it or a way around.

Any pointers/tips/suggestions are greatly appreciated. TIA

Here’s how my markup looks:

                <body>
                    <div id="page" class="container">
                        <div id="header"/>
                        <div id="content"/>
                        <div id="footer"/>
                    </div>
                </body>

Here’s what I have for the JS:

                function bodyClick(url) {
                    $('body').click(function(e) {
                        var obj = (e.target ? e.target : e.srcElement);
                        if (obj.tagName != 'BODY') return true;
                        $('body').css('background','#'+genHex());
                        return false;
                    });
                    $('#header').click(function(e) {
                        var obj = (e.target ? e.target : e.srcElement);
                        if (obj.id != 'header') return true;
                        $('#header').css('background','#'+genHex());
                        return false;
                    });
                }