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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tables and Hover

    I am unable to get hover to work on the <th> line in a table. Here is an example table. It doesn't like the <a=href"#"> on the <th> line. The CSS that I am using is shown below:

    <table id="table3">
    <tr>
    <th scope="col"<a=href"#">&nbsp;&nbsp;&nbsp;&nbsp;Item 1</th>
    </tr>
    <tr>
    <td><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Item 2</td>
    </tr>
    <tr>
    <td><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Item 3</td>
    </tr>

    #table3 th:a: hover {
    text-decoration: none;
    color: white;
    background-color: black;
    {

    #table3 td:a: hover {
    text-decoration: none;
    color: white;
    background-color: black;
    {

    The td CSS gives a successful hover, but the th does not. I don't think to ever gets as far as the <th> CSS entry because it doesn't like the "<href="#"> in the HTMl.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Bad html and bad CSS don't help when it comes to getting things to work. You need to make sure both are valid. Compare this to what you have
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    #table3 th a:hover {
    text-decoration: none;
    color: white;
    background-color: black;
    }
    
    #table3 td a:hover {
    text-decoration: none;
    color: white;
    background-color: black;
    }
    </style>
    </head>
    <body>
    <table id="table3">
    	<tr>
    		<th scope="col"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Item 1</a></th>
    	</tr>
    	<tr>
    		<td><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Item 2</a></td>
    	</tr>
    	<tr>
    		<td><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;Item 3</a></td>
    	</tr>
    </table>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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