...

View Full Version : Problem with form submission because of table cell hover script...



Errica
02-03-2007, 12:51 PM
I'd like to have a border appear around the entire cell when the mouse hover over it. The following works but it no longer allows the form within the cell to be clicked/submitted. Is there a workaround?

Also, I just noticed the hover effect doesn't work in IE6. Any idea here?


.target a {
text-decoration: none;
}

.target a:hover {
text-decoration: none;
}

.target a span {
padding: 4px;
border: 1px solid #CCCCCC;
display: block;
}

.target a:hover span {
border: 1px solid #990033;
}


<tr>
<td class="target"><a href="#"><span>
<table border="0" cellpadding="1" cellspacing="2" style="margin-top: 10px; width: 600px">
<tr>
<td rowspan="2" class="_prod_1_image"><a href="<!--#ystore_catalog id=0300 field=image -->" rel="lightbox" title=""><img src="/gfx/products/msds_poster_tn.jpg" alt="" width="69" height="100" border="0"></a></td>
<td rowspan="2" class="_prod_2_tital"><br><b><!--#ystore_catalog id=0300 field=name --></b></td>
<td class="_prod_3_price"><!--#ystore_catalog id=0300 field=price format=html --></td>
<tr>
<td class="_prod_4_order"><form method="post" action="<!--#ystore_order id=0300 -->">
<input type="submit" value="Order">
</form></td>
</tr>
</table>
</span></a></td>
</tr>

koyama
02-04-2007, 02:11 AM
Hi Errica,

There are some problems with the markup. One is not allowed to nest a table within inline elements such as <span>, <a>, etc. This may or may not be the reason why it doesn't work.

In any case the document will not validate and one shouldn't be using this approach.

To get a border around the table on mouseover you may have to use javascript.

Arbitrator
02-04-2007, 04:03 AM
Anchor and span elements cannot be parent elements of table, tr, td, a, form, or input elements.

The correct CSS is td.target:hover { border-color: #903; }. Of course, this is not supported by Internet Explorer 6, so if you must have the hover effect work in that version of the browser, you’ll have to resort to JavaScript, as mentioned.

Errica
02-04-2007, 03:02 PM
Thanks for the replies. Even though this is the css forum, can someone assist with the javascript?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum