dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: CSS link styles not working

  1. #1
    Join Date
    Jul 2012
    Posts
    6

    CSS link styles not working

    I'm having a problem with some css on a website I am working on. I have validated and there doesn't seem to be anything wrong with the css code itself.

    So here's the deal- every other part of my css works, just not the link styles in the body section. The link coding in the header, footer and sidebars work perfectly. In fact, all other body css works fine (h1, etc), just not the body section links. I don't see any conflicting code in the individual page html but I could be missing something. Here's a link to the most obvious page:

    http://firelightincentives.com/resources.shtml

    The links should all be red and underlined (and show up that way in Dreamweaver) but they are showing up as black and then grey when clicked. So it appears the a:visited is working but not the a:link or a:hover.

    This is the code:

    a:link {
    color: #FF3333;
    font-weight: bold;
    text-decoration: underline;
    }
    a:visited {
    color: #606163;
    text-decoration: underline;
    }
    a:hover {
    color: #606163;
    font-weight: bold;
    text-decoration: underline;
    }

    Could this be an issue of using shtml pages or javascript in the headers? I am at a complete loss. Any help would be appreciated!

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    The CSS code in the <style> section of the page is overriding the instructions in your external stylesheet file.

  3. #3
    Join Date
    Jul 2012
    Posts
    6
    So having the page background color there is dropping the link styles but allowing the rest of the body formatting?

  4. #4
    Join Date
    Jun 2012
    Location
    FL, USA
    Posts
    48
    try td.content a:.... {...} to specify the place those links are.

    I do believe the above is correct: that <style> tag is overriding the linked CSS file and applying the link styles

  5. #5
    Join Date
    Jun 2012
    Location
    FL, USA
    Posts
    48
    The background-color style is no problem. Your problem is this:

    <style type="text/css">
    <!--
    a:link {
    color: #000;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #333;
    }
    a:hover {
    text-decoration: none;
    }
    a:active {
    text-decoration: none;
    }
    a {
    font-weight: bold;
    }
    -->
    </style>

    You may not know that <!-- --> does not denote a comment for CSS, so that style is being read by the browser and thus overriding your wanted link styles

    Use /* ..... */ for CSS

  6. #6
    Join Date
    Jul 2012
    Posts
    6
    Okay, that's weird. That coding doesn't even show up in my editor. Only when I go online and view page source. Does Dreamweaver hide it in code view? That wouldn't surprise me. However, how can I view it in the editor to get rid of it?

  7. #7
    Join Date
    Jul 2012
    Posts
    6
    This is the code view in Dreamweaver:

    <link href="css/styles_FLG.css" rel="stylesheet" type="text/css">
    <link rel="Shortcut Icon" href="/favicon.ico">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <style type="text/css">
    <!--
    body {
    background-color: #606163;
    }
    -->
    </style>
    </head>

  8. #8
    Join Date
    Jun 2012
    Location
    FL, USA
    Posts
    48
    Something is throwing another <head> tag into your file.

    Maybe a PHP include?

    Look at the source again. It's got what you posted here in <head> but then ANOTHER <head> with what I posted.

  9. #9
    Join Date
    Jul 2012
    Posts
    6
    Thanks captainscall! You're a genius! The usurping code was buried in my header include file. Problem solved. Have I ever told you you're my hero?

  10. #10
    Join Date
    Jun 2012
    Location
    FL, USA
    Posts
    48
    Heh, no problem. Sometimes it helps to have an extra pair of eyes.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles