How to make onClick behavior inside div active?

Question

Code seems correct in Dreamweaver CS4, yet when clicking within the <div></div> tag area on initial webpage containing below code in browser (using F12 to view on local system -- browser is FireFox 3.6.8) no action occurs and no webpage redirect info appears in bottom bar of browser.
Code is essentially as follows:
<table>
<th width="338"><div id="bgimage"  onClick="../subdirectory/webpageA.htm"><p class="maincopy">blah blah<br />blah blah<br />blah blah</p></div></th>
<th width="338"><div id="bgimage" onClick="../subdirectory/webpageB.htm"><p class="maincopy">blah blah<br />blah blah<br />blah blah</p></div></th>
<th><div id="bgimage"  onClick="../subdirectory/webpageC.htm"><p class="maincopy">blah blah<br />blah blah<br />blah blah</p></div></th>
<th><div id="bgimage"  onClick="../subdirectory/webpageD.htm"><p class="maincopy">blah blah<br />blah blah<br />blah blah</p></div></th>
</table>
Each table cell includes text superimposed over 50% opaque  background image. Looks great! Can easily change text and republish to  website if want to quickly modify one line of text to emphasize something new/different about the associated category the background image represents. Intent is taht the website visitor should be able to click  anywhere within each image to go to detailed page.
Tried putting <a href ...></a> around <div> ...  that creates the hyperlink, BUT each line of text is then underlined.  Don't want to change href in CSS to remove underline because then other  links in site will not have underline.
Anyone have any suggestions other than rebuilding images w/text over them in Fireworks? That is a klugy multistep process every time a minor change is desired.

Answer 1

Several points:
1. I saw you're using Firefox. There are some known issues with onClick in Firefox. Google "Firefox onclick" for help with that.
2. Are the onClicks neccessary? You're not calling any javascript functions, why not just use <a>'s?
3. If you change the DocType to html5, you can use <a> to wrap a <div> but that's the only DocType I know that will support that.
4. Your markup seems bloated. I'm assuming that the table is not being used for your layout. Would this be better?
<table>
     <th class="bgimage">
          <a href="../subdirectory/webpageA.htm">...</a>
     </th>
     <th class="bgimage">
          <a href="../subdirectory/webpageB.htm">...</a>
     </th>
     <th>
          <a href="../subdirectory/webpageC.htm">...</a>
     </th>
     <th>
          <a href="../subdirectory/webpageD.htm">...</a>
     </th>
</table>
Then if you needed to size the table cells use a CSS document with stuff like:
.bgimage{
     width: 338px;
     background: url(point/to/my/image.jpg);
table a{
     display: block;
.maincopy, table a *{
     // My maincopy rules here.