Make all contents of li clickable w/o js or bloated code?

Get Started
1

I’m trying to make all the contents of my li clickable - a big box with image tag and p elements inside.

I know you can’t just wrap the lot in an a tag because it’s not meant to contain block-level elements like the p tag.

One solution I came up with was to position the li relative, and create an empty a tag with a position of absolute, 100% size. This works in Firefox, but not in IE - the only clickable area of IE is the particular elements wrapped in the <a>. So to make all the block elements also clickable I’d have to put separate a tags on each - too much code.

I found a solution from Jquery but I’d really like to do this with just CSS. Is there a way? Here is my existing code with the above “solution”, for a reference. I haven’t put on the extra IE a tags, btw.

<ul id="agent-box">
                <li>
                    <img src="images/agent1.jpg" width="133" height="180" />
                    <p><a href="#">Scott Smith</a></p>
                    <p>Broker, Owner</p>
                 </li>
</ul>


ul#agent-box {
     list-style:none;
     margin:0;
     padding:0;
}
ul#agent-box li {
	position:relative;
	width:132px;
	border:1px solid #999;
	padding:6px;
	margin: 20px 20px 20px 0;
	float:left;
	height:248px;
}
ul#agent-box li:hover {
	background-color:#FFCC99;
}
ul#agent-box li a {
	position:absolute;
	height:100%;
	width:100%;
	left:0;
	top:0;
}

Also, any suggestions on what is the most accessible & cleanly-degradable way to do this?
Thank you!!

2

which circumstance are you referring to? are you saying i should wrap the whole li in an a tag?

3

Just give the hyperlinks (“A” tag) a display:block rule and their clickable area will expand to fill the available space.

4

That’s the trouble with hypotheticals, it’s too easy to imagine an extreme. :wink:

cheers,

gary

5

oh, ok. the two lines of text are formatted differently; should I just use a span for one then?

6

You don’t need the ‘p’ elements, as the ‘li’ is your block container. As Ed suggested, make the ‘a’ block.

li a {
    display: block;
    text-align: center;
    }

li a:hover {
    background-color: #eee;
    }

/*This is optional. If you drop it, add a 'br' after the image tag.*/
li a img {
    display: block;
    margin: 1em auto;
    }
=====================
  <ul>
    <li><a href="#"><img src="images/agent1.jpg"
         alt="[photo of Scott Smith]"
         width="133"
         height="180" /> Scott Smith
    <br />
    Broker, Owner</a></li>
  </ul>

cheers,

gary

7

Loosely, yes. I would question whether you’d want the whole thing clickable in that case, and whether you’re going out on a limb esthetically.

cheers,

gary

8

o rly?

it was just a hypothetical. but if i do end up ever needing it, i’ll post my design on this thread for your critique :wink:

9

The method that I use is to help things along with a bit of the ol’ Javascript.

Put the most obviously clickable bit of the <li> in an ordinary <a href=…> tag, so that it is still usable if Javascript isn’t turned on. Then you add the magic.
eg <li onClick=“window.open( ‘page.htm’,‘_top’ ); return false;”>
Bingo! Anyone who clicks anywhere in the <li> activates the onClick function, which opens page.htm in the current window/tab.

I’m sure there are better ways of doing it using unobtrusive scripting, although I can’t help but feel they will be massively more effort to set up, more work to maintain and change, and considerably more bytes to transfer. So I’m probably going to stick with my inelegant but functional solution unless someone can come up with a very good, practical reason not to!

10

i put a span around the second line, and it all works great. thanks!

just curious…what if i had a bunch of different lines of text in that list item, and they all needed to be formatted differently? not having an element to attach them to makes it hard to format. in that situation, would i just use lots of spans with classes or…?