SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Sydney Australia
    0 Post(s)
    0 Thread(s)

    Post CSS Link behaviour doesn't work

    i have implemented a slider from with no problem. Looking good!

    Besides the css sheet and a jscript sheet for the slider I received a style sheet called generic.css which controls aspects of the page that don't relate to he slide show. I want to edit the generic.css to control the links, hover colour, etc
    Doesn't seem to matter what I do the default is all that works, links are underlined. This is because the html page ignores my instructions and defaults to underlined links. I had visited and active but i don't need them. It did not work when they were there either.

    I want to add something like this

    a:link {color: blue; text-decoration: none; }
    a:hover { color: orange; text-decoration:underline;}

    to what is already there, which is this:

    body {background:#F6F6F6;font:normal 0.8em Verdana; margin:0; padding:0; padding-bottom:60px;
    a:link {color: #red; text-decoration: none; }
    h2 {display:inline;}
    .div1, .div2 {width:980px;margin:0 auto;}
    .div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;}
    .div1 P {font-size:18px;}
    .div1 a, .div2 a {color:#07C;}
    .div2 {margin-top:70px;}
    .div2 li {padding-top:6px;padding-bottom:6px;}
    .green {color:Green;}
    .cn {font-family: "Courier New", Georgia;}
    #status {display:inline-block; margin-left:26px;line-height:50px;height:50px;vertical-align:middle;}

    border: dashed 1px #BCBCCB; padding:8px 12px; background-color: #F3F3F9; white-spacere; font-family:"Courier New", Georgia;
    font-size:12px; margin:6px 0;overflow:auto;

    If i remove the link to generic.css from the web page the font defaults to times new roman so i know the page IS referencing the style sheet.
    Help is appreciated.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    219 Post(s)
    12 Thread(s)
    Hi there,

    It's probably just a typo, but color: #red won't work.
    It has to be color: red or color: #FF0000


    Code CSS:
    a:link {color: blue; text-decoration: none; }

    will affect the style of all of the links in your document (unless they have been specifically styled otherwise).
    Obviously you can only do that once.

    You can however, drill down your CSS selectors to style links on different parts of the page differently.
    Have a look at the following example:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Link styling example</title>
          .special a{color:yellow;}
          #special a{color:green;}
        <p><a href="#">A link</a> Some interesting content</p>
        <p class="special"><a href="#">Link two</a> Some more interesting content</p>
        <div id="special"><a href="#">Link three</a> Even more interesting content</div>
        <a href="#">Another link</a>
    Can you see how we set the default link colour to red with this a{color:red}, then by using .special a{color:yellow;} we can style all of the links contained within an element which has a class of "special" differently, and finally using #special a{color:green;} we can style all of the links contained within an element which has a id of "special" differently again.

    You should be able to use this to do what you want.
    But if you still can't get it to work, post a link to your page and I'll gladly have a look.


Posting Permissions

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