I recently wrote this bit of XHTML/CSS which works exactly the way I want it to in Firefox (and some other browsers too), but of course it isn't technically valid because I put block elements inside inline elements. Any way to accomplish the same thing correctly without using images or javascript? The key point here is that there are rectangular clickable link regions which include some other elements, and which trigger rollover effects.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />
<title>Title</title>
<style type="text/css">
body { font-family:verdana,sans-serif; }
div.menuitem { float:left; text-align:center; min-width:100px; }
div.square { width:18px; height:18px; border-width:2px; border-color:#000000; border-style:solid; margin:0px auto 13px; }
a.nav { color:#000000; text-decoration:none; }
a.nav:hover div.square { background-color:#000000; }
a.nav:hover div.menuitem { text-decoration:underline; }
</style>
<!--[if IE]>
<style type="text/css">
div.menuitem { width:100px; }
a.nav:hover { cursor
ointer; }
</style>
<![endif]-->
</head>
<body>
<a href="index.html" class="nav">
<div class="menuitem">
<div class="square">
</div>
Home
</div>
</a>
<a href="contact.html" class="nav">
<div class="menuitem">
<div class="square">
</div>
Contact Us
</div>
</a>
</body>
</html>
[/HTML]
