Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Problem with form submission because of table cell hover script...

    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?

    Code:
    .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;
    }
    Code:
    <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>
    Last edited by Errica; 02-03-2007 at 01:26 PM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Thanks for the replies. Even though this is the css forum, can someone assist with the javascript?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •