Hi Sitepoint community.

I've stumbled over this problem a lot since I first started doing CSS + XHTML & tried to do everything as semantic as possible.

I'll illustrate the problem with a prototype I'm working on at the moment (hence the lack of design)



I'd like to have the user experiece as the following.
when a visitor goes over one of these device blocks, his cursor should become a hand (like on all links), & the border of the list element should become darker.
I don't want any flickering of the cursor when he moves his mouse over the block element. The visitor should have the feeling as if he's going over one big button.

before doing any CSS, I always start semantically coding the XHTML.

i'd be something like this :

Code:
<li>
	<h3>C520 Series</h3>
	<img src="" alt="" />

	<h4>C520 Series features</h4>
	<ul>
		<li>bluetooth</li>
		<li>mp3 player</li>
		<li>Western Europe</li>
	</ul>
	
	<h4>C520</h4>
	<del>&euro; 9999,99</del>
	<strong>&euro; 9999,99</strong>

	<h4>C520t</h4>
	<ul>
		<li>+ integrated TMC antenna</li>
	</ul>
	<del>&euro; 9999,99</del>
	<strong>&euro; 9999,99</strong>
</li>
Aas you can see, no links in it yet because that's where my main problem exists.
where or how should I include the link, so that it is semantically correct & the user experiences the block as one big link. ?
keep in mind that you may not place block elements inside an anchor tag (XHTML specifications)

following code could work but is kinda messy :
Code:
<li>
	<h3><a href="" title="">C520 Series</a></h3>
	<a href="" title=""><img src="" alt="" /></a>

	<h4><a href="" title="">C520 Series features</a></h4>
	<ul>
		<li><a href="" title="">bluetooth</a></li>
		<li><a href="" title="">mp3 player</a></li>
		<li><a href="" title="">Western Europe</a></li>
	</ul>
	
	<h4><a href="" title="">C520</a></h4>
	<del><a href="" title="">&euro; 9999,99</a></del>
	<strong><a href="" title="">&euro; 9999,99</a></strong>

	<h4><a href="" title="">C520t</a></h4>
	<ul>
		<li><a href="" title="">+ integrated TMC antenna</a></li>
	</ul>
	<del><a href="" title="">&euro; 9999,99</a></del>
	<strong><a href="" title="">&euro; 9999,99</a></strong>
</li>
& this is the not so semantic way I solved the problem before

Code:
<li>
	<a href="" title="">
		<strong class="title">C520 Series</strong><span class="remove"> </span>
		<img src="" alt="" /><span class="remove"> </span>

		<strong class="subtitle">C520 Series features</strong><span class="remove"> : </span>
		
		<span class="general_features">
			<span>bluetooth</span><span class="remove">, </span>
			<span>mp3 player</span><span class="remove">, </span>
			<span>Western Europe</span>
		</span>

                <span class="remove"> | </span>
		
		<strong class="subtitle">C520</strong><span class="remove"> : </span>
		<del>&euro; 9999,99</del><span class="remove"> - </span>
		<span class="price">&euro; 9999,99</span>

               <span class="remove"> | </span>

		<strong class="subtitle">C520t</strong><span class="remove"> : </span>
		<span class="device_features">
			<span>+ integrated TMC antenna</span>
		</span><span class="remove">, </span>
		<del>&euro; 9999,99</del><span class="remove"> - </span>
		<span class="price">&euro; 9999,99</span>
	</a>
</li>
The goal is to have perfect code & visualisation with css & javascript enabled, css without javascript, no css & javascript for the following browsers :
IE 6+, FF 1+, Safari, Konqueror, Camino, ...

so a quick overview of my question :
Whats the best way to handle this block with the following :
- it has to be clickable everywhere
- no cursor flickering (in IE)
- semantically correct code
- has to look visually right with CSS disabled
- hover state of the link should highlight the whole border of the block. (will be replaced by a background later)
- has to work perfect in IE 6+, FF 1+, Safari, Konqueror, Camino.

Hope to see some creative answers on this question.

PS : i was not sure where to post this question, in the XHTML or CSS
if it's posted wrong, please move it to the correct forum.

cheerz, Fr&#233;