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 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    67
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Problem with code

    I have built a football league table using HTML + CSS and to highlight each line with a different background color i have used the following in the html page:

    Code:
    <tr class="box">
    and then in the external style sheet i have used:

    Code:
    tr.box:hover {
    background-color: green;
    }
    But for some reason it has stopped working. Could someone tell me why please

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Not without a link to your site or you pasting the html/css for anyone to look at.
    Teed

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    67
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hi teedoff i really did forget to leave a link.
    You can find my web page Here

    As you will see when you hover over the text the background color changes as well. But on my desktop it simply won't work?
    Last edited by Frump; 02-27-2014 at 08:31 PM.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Odd It seems to work in all the browsers I have.

    What OS and browser are you seeing this in?
    Teed

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Frump,
    Seems to work fine for me too. Some issues could be fixed though... [Invalid] Markup Validation of http://www.freewebs.com/diarco/fix-res.html - W3C Markup Validator
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Sep 2010
    Posts
    67
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I am running CrunchBang Linux 11 Wardof 32bit and using the default Iceweasel browser

  • #7
    New Coder
    Join Date
    Sep 2010
    Posts
    67
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Have since uploaded another web page and had it validated but it still work work for me!Here. As i stated earlier i am using CrunchBang Linux and running two browsers, Iceweasel and Opera.

  • #8
    New Coder
    Join Date
    Sep 2010
    Posts
    67
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Have since uploaded another web page and had it validated but it still won't work for me!Here. As i stated earlier i am using CrunchBang Linux and running two browsers, Iceweasel and Opera.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Frump View Post
    Have since uploaded another web page and had it validated but it still won't work for me!Here. As i stated earlier i am using CrunchBang Linux and running two browsers, Iceweasel and Opera.
    It's too bad the CSS validator doesn't catch it but you have an error in your CSS.
    Remove this bit I've highlighted in red and see what happens -
    Code:
    body {
                margin:0;
                padding:0;
               } 
          
          table {
                margin-right:auto;
                margin-left:auto;
                }
    
           th {
               border:1px solid black;
               font-size:14px;
               padding-bottom:0;
               background-color: #ff0000;
              }
    
           td {
               text-align:center;
               font-size:12px; 
              }text
    
           tr.box:hover {
               background:#c0c0c0;
              }
    
           caption {
               text-decoration:underline;
              }    
    
           #month {
               text-align: left;
               text-decoration: underline;
               color: #0000ff;
               font-weight:bold;
              }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Sep 2010
    Posts
    67
    Thanks
    9
    Thanked 0 Times in 0 Posts
    That certainly did the trick Excavator. The only reason i didn't check the code is because it passed validation. Will know better next time.
    Very big thanks to you Excavator and everyone else who replied. Cheers!


  •  

    Posting Permissions

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