In the time since last posting I have tried out the implementation strategy
as mentioned by Jukka and Georg/Gunlaug (with working example on
http://www.gunlaug.no/tos/moa_29.html )
Now even with the working example by Georg, I still had a lot of
implementation issues. One of the last things that teased me was that in my
code, IE6 sort of "collapsed" the height of the link element on hover. Very
weird. Also, IE seemed dependent of adding either
background-image/background-color, or border to force rendering the 100%
height. I got it working by adding a 1px transparent gif as background image
for the hover link. Could not use border as the containing div had rounded
corners (and IE 6 misinterprets border-color: transparent).
The main issue for me was that my code behaved totally inpredictable. I had
a working example (with too many css rules). I decided to remove some of the
redundant rules (to see how much I could remove with the example still
working). But oddly enough, when i pressed undo, I could not get the
examples to work that previously worked for me..... I know it sounds like a
user error. What did I oversee... But I even did this in pair with my
colleague to minimize the risk of user errors.
So eventually, I decided upon the javascript solution (see first mail in
thread), that is more robust:
(i know, kind of off topic as Jukka mentioned it, but as a future reference
for others I decided to add it here)
<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function(){
//alert('JQuery has detected DOM is ready for manipulation');
$('.box').addClass("clickable");
$('.box').click( gotolink );
});
// gotolink() finds the first p>a link element in the div
// Takes the link href and redirects to that URL when called
var gotolink = function(){
location.href = $(this).children('p').children('a')[0].href;
};
The actual two lines that do the work can be chained and reduced to:
$('.box').addClass("clickable").click( gotolink );
Thanks to everybody for chipping in. Even though I would have prefered a
css-only solution, I'm happy with this simple implementation.
/Jesper
blog: www.justaddwater.dk
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
