www.webdeveloper.com
Results 1 to 7 of 7

Thread: CSS attachment is causing green links instead of purple

  1. #1
    design is offline Supreme Master of the Web
    Join Date
    Oct 2003
    Posts
    188

    CSS attachment is causing green links instead of purple

    I recently added

    a:visited {
    color: #4B0082;
    text-decoration: none;
    font-size:12px;
    font-family:times new roman, arial, helvetica, sans-serif;
    {

    to my style sheet for visited links. I wanted it to be purple. At first the purple color code turned my links into green. I also tried the color code for violet, indigo, and other related colors of purple.

    My source of color codes is from http://www.htmlhelp.com. See design elements. The last link for design elements is RGB color codes.

    I want my unvisited to be blue and visited to be purple.

    Please help me to fix this. Another message board suggested that the problem was with the semicolon. I added it in, but it made no difference.
    Attached Files Attached Files

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    There were three errors that can cause the problems you were describing. There were some other minor errors. I've attached the fixed CSS file and placed comments where I made corrections and what was corrected.

    If you want, you can always validate your CSS at http://jigsaw.w3.org/css-validator/

    It's helped me on a number of occasions.
    Attached Files Attached Files

  3. #3
    Join Date
    Dec 2003
    Location
    London
    Posts
    5
    Hello.

    Make sure that if you have a style sheet attached, that you haven't added the style tag at the beginning of your document. This can also cause problems.

    Take Care x

    P.S. Your sytle tags should look like this:

    <style>
    A:link {text-decoration:none; color:#000000; }
    A:visited {text-decoration:none; color:#666699; }
    A:hover {text-decoration:none; color:#669999}
    </style>

    These definately work!

  4. #4
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    Code:
    <style type="text/css">
    blah blah blah
    </style>

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    And people always forget to enclose their style statements in an HTML comment tag.
    Code:
    <style type="text/css" media="screen|handheld|print|...">
    <!--
    /* Style declarations */
    -->
    </style>
    Properly importing CSS files:
    Code:
    <link rel="stylesheet" type="text/css" media="..." href="path/to/stylesheet.css">
    NOTE: By adding the media="" attribute, NS 4.0 - 4.8 does not recognize the link tag, at least with the playing around that I've done. Leave out the media attribute and NS imports the stylesheet.
    Code:
    <style type="text/css" media="...">
    <!--
    @import "path/to/stylesheet.css";
    /* Other style statements */
    -->
    </style>
    This method only works for 5.0+ browsers, basically those released 2000 and after. The only exception is Internet Explorer 4.5 for the Mac. It does import CSS files with this method, and gets the CSS box model wrong.

  6. #6
    design is offline Supreme Master of the Web
    Join Date
    Oct 2003
    Posts
    188

    Style tags

    Below is my style sheet (in full) with the style tags. Is there any correction that needs to be made. I recently added the style </style> tags. What corrections need to be made?

    <style>
    body {
    background: #ffffff;
    color: #000000
    font-size:12px;
    font-family:times new roman,arial,helvetica,sans-serif;
    }

    a:active {
    color:#0000FF;
    text-decoration: none;
    font-size:12px;
    font-family:times new roman, arial, helvetica, sans-serif;
    }

    a:link {
    color: #0000FF;
    text-decoration: none
    font-size:12px;
    font-family:times new roman, arial, helvetica, sans-serif;
    }

    a:visited {
    color:#4B0082;
    text-decoration: none
    font-size:12px;
    font-family:times new roman, arial, helvetica, sans-serif;
    }

    a:hover {
    color: #0000FF;
    text-decoration: none;
    font-size:12px;
    font-family:times new roman, arial, helvetica, sans-serif;
    }

    h1 {
    font-family: times new roman,arial,helvetica,sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 0;
    padding-bottom: 0;
    }

    h2 {
    font-family: times new roman,arial,helvetica,sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 0;
    padding-bottom: 0;
    }

    .banner{
    font-family: times new roman,arial,helvetica,sans-serif;
    color: #003300;
    font-size: medium;
    font-weight:bold;
    }

    .section {
    color: #800000;
    font-family: times new roman,arial,helvetica,sans-serif;
    font-size: medium;
    font-weight: bold;
    }
    </style>

  7. #7
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    Well, you could have saved yourself some typing:

    <style type="text/css">
    <!--
    body {
    background : #ffffff;
    color : #000000;
    font-size : 12px;
    font-family : "times new roman", arial, helvetica, sans-serif;
    }
    a:link {
    color : blue;
    }
    a:visited {
    color : purple;
    }
    a:hover
    color : red;
    }
    a:active {
    color: red;
    }
    a {
    text-decoration : none;
    font-size : 12px;
    font-family : "times new roman", arial, helvetica, sans-serif;
    }
    h1 , h2 {
    font-family : "times new roman", arial, helvetica, sans-serif;
    font-size : 18px;
    font-weight : bold;
    color : #000000;
    margin-bottom : 0;
    padding-bottom : 0;
    }
    .banner {
    font-family : "times new roman", arial, helvetica, sans-serif;
    color : #003300;
    font-size : medium;
    font-weight : bold;
    }
    .section {
    color : #800000;
    font-family : "times new roman", arial, helvetica, sans-serif;
    font-size : medium;
    font-weight : bold;
    }
    -->
    </style>
    Last edited by Robert Wellock; 12-02-2003 at 08:07 AM.

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