You can't, without using JavaScript. Per the spec, inline elements (such as an anchor) may not contain block level elements such as a <div>.
If you really want to only use CSS. Use display:block on your anchors and pad them to achieve the height you want so that the anchor is as big. Get rid of the divs and use an unordered list. (Structured HTML does really make life easier, I promise) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> <!-- ul#leftnav{ width: 15em; background-color: #ECB200; list-style:none; padding: 0; border-bottom: thin solid white; } ul#leftnav li{ margin: 0; width: 100%; padding: .25em; border-bottom: thin solid white; } ul#leftnav :link, ul#leftnav :visited{ color: white; display: block; margin:0 0 0 -.25em; padding:.25em 0; border: thin solid red; /* Take out, used only to show where the effect will be available */ } ul#leftnav :link:hover, ul#leftnav :visited:hover{ color: black; } --> </style> </head> <body> <ul id="leftnav"> <li><a href="/" >Not This (Compliant)</a></li> <li><a href="/">Like This (non-compliant)</a></li> <li><a href="/">Program Services</a></li> <li><a href="/"><div class="LeftMenuItem">Admission Process</a></li> <li><a href="/">Location / Directions</a></li> <li><a href="/">Payment for Services</a></li> <li><a href="/">Confidentiality / Privacy</a></li> <li><a href="/">Contact Us</a></li> </ul> </body> </html> Sandra Clark ============================== http://www.shayna.com Training in Cascading Style Sheets and Accessibility -----Original Message----- From: Adkins, Randy [mailto:[EMAIL PROTECTED] Sent: Thursday, December 21, 2006 4:11 PM To: CF-Talk Subject: RE: CSS / HTML Compliant issue Okay I did that, however the box (DIV) does not act as a link until you mouse over the text itself. My goal is to be able to mouse over the box or the text and click to proceed to the link not just the text. -----Original Message----- From: John Cox [mailto:[EMAIL PROTECTED] Sent: Thursday, December 21, 2006 4:03 PM To: CF-Talk Subject: Re: CSS / HTML Compliant issue On 12/21/06, Adkins, Randy <[EMAIL PROTECTED]> wrote: > > If you will look at this one page, I am having a problem with being > compliant with CSS and HTML and achieving the desired behavior and > look. > > http://test.mksweb.net/ Take your width and positioning out of your anchor elements: a.LeftNav { width:191px;font-weight:bold;color:#525252;font-family: 'Arial';text-decoration: none;font-size: 13px;} and place them in your division definitions. Once done, move your anchors inside your divisions. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Create robust enterprise, web RIAs. Upgrade & integrate Adobe Coldfusion MX7 with Flex 2 http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:264829 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
