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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts

    CSS/HTML Links not clicking/working

    Hello everyone!

    I'm excited about joining this forum.

    For some reason the links in the main body of the following code are not clickable nor are they underlining at mouseover. However, the links in my navigation and footer work perfectly. Please help!! Also, validator says there are problems with this code, but it does not list any problems in the area where my links are not working. I have bolded the CSS and the corresponding area in the HTML. please help!!! It's my first stylesheet!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html>
    <head>
    <title>CSS</title>
    <style type="text/css">
    
    .headerimg {
      position: absolute;
      left: 10px;
      top: 5px;
      background-image: url('/header.png');
      background-repeat: no-repeat;
      height: 250px;
      width: 1015px;
      text-indent: -9999px;
    }
    
    
    ul.navbar {
      display: inline;
      list-style-type: none;
      font-family: Aharoni;
      font-size: 1.3em;
      padding: 0px;
      margin: 0px:
      width: 1024px; 
      overflow: hidden;
      position: absolute;
      left: 40px;
      top: 275px;
    }
    
    ul.navbar li {
      display: inline;
      background: white;
      margin-right: 50px;
      margin-left: 0px;
      padding: 5px;
      width: 1024px;
    }
    
    
    a.two:link {color: #000000; text-decoration: none;}
    a.two:visited {color: #ff0053; text-decoration: none;}
    a.two:hover {color: #ff0053; background-color:black; padding: 5px; text-decoration:none;}
    
    a.one:link {
        color: #ff0053;
        font-weight: bold;
        padding: 0px;
        text-decoration: none;
    }
    
    a.one:visited {
        color: black;
        font-weight: bold;
        background-color: #fff;
        padding: 0px;
        text-decoration: none; 
    }
    
    a.one:hover {
      color: #ff0053;
      font-weight: bold;
      padding: 0px;
      text-decoration: underline;
      cursor: default;
    }
    
    a.one:active {
      color: #000000;
      font-weight: bold;
      padding: 0px;
      text-decoration: none;
    }
    
    h1 {
      font-family: Aharoni;
      padding-top: 388px;
      padding-left: 0px;
      position: absolute;
      left: 5px;
      top: 5px;
      background-image: url('/header.png');
      background-repeat: no-repeat;
      height: 250px;
      width: 1015px;
      text-indent: -9999px;
    }
    
    h2 {
      font-family: Aharoni;
      padding-top: 338px;
      padding-left: 0px;
    }
    
    h3 {
      font-family: Aharoni;
      padding-top: 20px;
      padding-left: 0px;
    }
    
    
    body {
      padding-left: 40px;
      font-family: "Century Gothic", Tahoma;
      color: black;
      background-color: #fff; 
    }
    
    
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    
    
    .footer, .push {
    height: 10em;
    background-color: black;
    color: #ff0053;
    font-family: "Century Gothic";
    font-weight: bold;
    font-size: 0.8em;
    }
    
    a.foot:link {color: #00bfbf; text-decoration: none;}
    a.foot:visited {color: #00bfbf; text-decoration: none;}
    a.foot:hover {color: #00bfbf; background-color:black; padding: 0px; text-decoration: underline;}
    
     ul.foot {
        list-style-type: none;
        padding-left: 10px;
        padding-top: 20px;
        margin: 0.6em;
        width: 9em;
        font-size: 0.8em;
    }
     
      ul.foot li {
        background: black;
        margin: 0.5em;
        padding: 0em; 
        width: 182px;
        height: 15px;
    }
    
    
    </style>
    </head>
    
    <body>
    <h1 class="headerimg"> text.</h1>
    
    <!-- Site navigation menu -->
    <ul class="navbar">
      <li><a class="two" href="http://blah.com">home</a></li>
    <li><a class="two" href="http://blah.com">text</a></li>
    <li><a class="two" href="http://blah.com">text</a></li>
    <li><a class="two" href="http://blah.com">text</a></li>
    <li><a class="two" href="http://blah.com">text</a></li>
    <li><a class="two" href="http://blah.com">text</a></li>
    </ul>
    <div>
    <!-- Main content -->
    <h2>Welcome!</h2>
    
    <p>text</p>
    
    <p>text</p> 
    
    <p>Check out our <a class="one" href="blah.com">text</a>.</p>
    
    <h3>Check out our</h3>
    
    Check out our super-cool 
    <a class="one" href="http://blah.com">link text</a>
    
    <p>Text
    </p>
    </div>
    <div>
    <div class="footer">
    <ul class="foot">
      <li><a class="foot" href="http://blah.com">text</a></li>
      <li><a class="foot" href="http://blah.com">text</a></li>
      <li><a class="foot" href="http://blah.com">text</a></li>
      <li><a class="foot" href="http://blah.com">text</a></li>
      <li><a class="foot" href="http://blah.com">text</a></li>
    </ul>
    </div>
    </body>
    </html>
    This is the error I get when I validate:

    27 ul.navbar Parse Error 0px: width: 1024px;
    34 Parse Error [: hidden; position: absolute; left: 40px; top: 275px; } ul.navbar li]




    I'd really appreciate the help.

    Thank you!
    Last edited by choc_pudding; 10-15-2011 at 10:26 PM. Reason: adding info

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello choc_pudding,
    To illustrate what's happening, make the background of .headerimg red, like this -
    Code:
    .headerimg {
      position: absolute;
      left: 10px;
      top: 5px;
      background-image: url('/header.png');
      background-repeat: no-repeat;
      height: 250px;
      width: 1015px;
      text-indent: -9999px;
    background: #f00;
    }
    When you do that you can see your absolute positioned element is covering your link.
    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

  • Users who have thanked Excavator for this post:

    choc_pudding (10-16-2011)

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 309 Times in 308 Posts
    Quote Originally Posted by choc_pudding View Post
    ul.navbar {
    display: inline;
    list-style-type: none;
    font-family: Aharoni;
    font-size: 1.3em;
    padding: 0px;
    margin: 0px:
    width: 1024px;
    overflow: hidden;
    position: absolute;
    left: 40px;
    top: 275px;
    }
    ...and that is a colon, whereas it should be a semi-colon.

    Dave

  • Users who have thanked tracknut for this post:

    choc_pudding (10-16-2011)

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Posts
    128
    Thanks
    26
    Thanked 0 Times in 0 Posts
    I add, be sure to run you css and html files through the W3schools validation to see if there are any errors.

    http://jigsaw.w3.org/css-validator/

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello choc_pudding,
    To illustrate what's happening, make the background of .headerimg red, like this -
    Code:
    .headerimg {
      position: absolute;
      left: 10px;
      top: 5px;
      background-image: url('/header.png');
      background-repeat: no-repeat;
      height: 250px;
      width: 1015px;
      text-indent: -9999px;
    background: #f00;
    }
    When you do that you can see your absolute positioned element is covering your link.
    Thank you!!! I reduced the height and used the z-index to move it back. It's perfect now.

    Hey Dav, thanks I did not notice that one.

    Javanewbie, thanks. I'm already doing that.


  •  

    Tags for this Thread

    Posting Permissions

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