7 Replies Latest reply on Oct 6, 2006 8:35 AM by Newsgroup_User

    What's wrong with my stylesheet?

    BullocksTroy
      I am having trouble with the text in the orange box on the left:

      http://www.whsprx.com/aboutus.html

      I can't seem to figure out what's wrong with my visited link styles here. When you click on one of these links, the link will then show up as purple (which i believe is the default color, not one i specified), and the hover class also changes - initially you'll see just the background color changes in a bar that spans the whole orange box. but after a link is clicked, on hover the bg color bar is cut off (see "the Board" in particular) and the font color changes to a lighter one.

      i don't want the hover class to change at all - it should be the same for links and visited links. visited links can change to a different color though, but not that default purple.

      here's my current CSS, which someone helped me out with so i'm not sure exactly how everything works...
      what is causing the problem?

      .aboutus {
      font-weight:bold;
      color:#011E5A;
      text-decoration:underline;
      padding: 3px 6px;
      }

      .aboutus a {
      font-weight:bold;
      color:#011E5A;
      text-decoration:underline;
      padding: 3px 6px;
      }

      .aboutus a:link {
      font-weight:bold;
      color:#011E5A;
      text-decoration:underline;
      display: block;
      }

      .aboutus a:hover {
      background-color:#F7AD6A;
      padding: 3px 6px;
      }

      .aboutus a:visited {
      font-weight:bold;
      color:#011E5A;
      padding: 3px 6px;
      }

      .aboutus p {
      margin: 0;
      padding: 0;
      }
        • 1. Re: What's wrong with my stylesheet?
          Level 7
          You haven't specified a colour for visited ...

          a:link {
          text-decoration: none;
          color: #7A96E0;
          }
          a:visited {
          text-decoration: none;
          }
          a:hover {
          color: #F8BD84;
          }
          a:active {
          text-decoration: none;
          color: #F8BD84;
          }

          --
          Jo



          "BullocksTroy" <webforumsuser@macromedia.com> wrote in message
          news:eg0vp2$2k8$1@forums.macromedia.com...
          >I am having trouble with the text in the orange box on the left:
          >
          > http://www.whsprx.com/aboutus.html
          >
          > I can't seem to figure out what's wrong with my visited link styles here.
          > When
          > you click on one of these links, the link will then show up as purple
          > (which i
          > believe is the default color, not one i specified), and the hover class
          > also
          > changes - initially you'll see just the background color changes in a bar
          > that
          > spans the whole orange box. but after a link is clicked, on hover the bg
          > color
          > bar is cut off (see "the Board" in particular) and the font color changes
          > to a
          > lighter one.
          >
          > i don't want the hover class to change at all - it should be the same for
          > links and visited links. visited links can change to a different color
          > though,
          > but not that default purple.
          >
          > here's my current CSS, which someone helped me out with so i'm not sure
          > exactly how everything works...
          > what is causing the problem?
          >
          > .aboutus {
          > font-weight:bold;
          > color:#011E5A;
          > text-decoration:underline;
          > padding: 3px 6px;
          > }
          >
          > .aboutus a {
          > font-weight:bold;
          > color:#011E5A;
          > text-decoration:underline;
          > padding: 3px 6px;
          > }
          >
          > .aboutus a:link {
          > font-weight:bold;
          > color:#011E5A;
          > text-decoration:underline;
          > display: block;
          > }
          >
          > .aboutus a:hover {
          > background-color:#F7AD6A;
          > padding: 3px 6px;
          > }
          >
          > .aboutus a:visited {
          > font-weight:bold;
          > color:#011E5A;
          > padding: 3px 6px;
          > }
          >
          > .aboutus p {
          > margin: 0;
          > padding: 0;
          > }
          >


          • 2. Re: What's wrong with my stylesheet?
            BullocksTroy Level 1
            Ok, I specified a color for a: visted. but the hover class is still changing when I don't want it to. The hover only changes on visited links, even though i've now specified colors for both the general a:hover class and the aboutus a:hover class....
            i'm confused.

            http://www.whsprx.com/aboutus.html


            quote:

            Originally posted by: Newsgroup User
            You haven't specified a colour for visited ...

            a:link {
            text-decoration: none;
            color: #7A96E0;
            }
            a:visited {
            text-decoration: none;
            }
            a:hover {
            color: #F8BD84;
            }
            a:active {
            text-decoration: none;
            color: #F8BD84;
            }

            --
            Jo



            "BullocksTroy" <webforumsuser@macromedia.com> wrote in message
            news:eg0vp2$2k8$1@forums.macromedia.com...
            >I am having trouble with the text in the orange box on the left:
            >
            > http://www.whsprx.com/aboutus.html
            >
            > I can't seem to figure out what's wrong with my visited link styles here.
            > When
            > you click on one of these links, the link will then show up as purple
            > (which i
            > believe is the default color, not one i specified), and the hover class
            > also
            > changes - initially you'll see just the background color changes in a bar
            > that
            > spans the whole orange box. but after a link is clicked, on hover the bg
            > color
            > bar is cut off (see "the Board" in particular) and the font color changes
            > to a
            > lighter one.
            >
            > i don't want the hover class to change at all - it should be the same for
            > links and visited links. visited links can change to a different color
            > though,
            > but not that default purple.
            >
            > here's my current CSS, which someone helped me out with so i'm not sure
            > exactly how everything works...
            > what is causing the problem?
            >
            > .aboutus {
            > font-weight:bold;
            > color:#011E5A;
            > text-decoration:underline;
            > padding: 3px 6px;
            > }
            >
            > .aboutus a {
            > font-weight:bold;
            > color:#011E5A;
            > text-decoration:underline;
            > padding: 3px 6px;
            > }
            >
            > .aboutus a:link {
            > font-weight:bold;
            > color:#011E5A;
            > text-decoration:underline;
            > display: block;
            > }
            >
            > .aboutus a:hover {
            > background-color:#F7AD6A;
            > padding: 3px 6px;
            > }
            >
            > .aboutus a:visited {
            > font-weight:bold;
            > color:#011E5A;
            > padding: 3px 6px;
            > }
            >
            > .aboutus p {
            > margin: 0;
            > padding: 0;
            > }
            >





            • 3. Re: What's wrong with my stylesheet?
              Level 7
              I didn't notice earlier, sorry - you have your hover and visited 'round the
              wrong way...

              .aboutus a:hover {
              background-color:#F7AD6A;
              color:#011E5A;
              padding: 3px 6px;
              }

              .aboutus a:visited {
              font-weight:bold;
              color:#011E5A;
              display: block;
              padding: 3px 6px;
              }

              Switch them around and I hope this will be sorted. The rule is Link Visited,
              Hover, Active

              --
              Jo



              "BullocksTroy" <webforumsuser@macromedia.com> wrote in message
              news:eg3k8t$a9p$1@forums.macromedia.com...
              > Ok, I specified a color for a: visted. but the hover class is still
              > changing
              > when I don't want it to. The hover only changes on visited links, even
              > though
              > i've now specified colors for both the general a:hover class and the
              > aboutus
              > a:hover class....
              > i'm confused.
              >
              > http://www.whsprx.com/aboutus.html
              >
              >
              >
              quote:

              Originally posted by: Newsgroup User
              > You haven't specified a colour for visited ...
              >
              > a:link {
              > text-decoration: none;
              > color: #7A96E0;
              > }
              > a:visited {
              > text-decoration: none;
              > }
              > a:hover {
              > color: #F8BD84;
              > }
              > a:active {
              > text-decoration: none;
              > color: #F8BD84;
              > }
              >
              > --
              > Jo
              >
              >
              >
              > "BullocksTroy" <webforumsuser@macromedia.com> wrote in message
              > news:eg0vp2$2k8$1@forums.macromedia.com...
              > >I am having trouble with the text in the orange box on the left:
              > >
              > > http://www.whsprx.com/aboutus.html
              > >
              > > I can't seem to figure out what's wrong with my visited link styles
              > > here.
              > > When
              > > you click on one of these links, the link will then show up as purple
              > > (which i
              > > believe is the default color, not one i specified), and the hover class
              > > also
              > > changes - initially you'll see just the background color changes in a
              > > bar
              > > that
              > > spans the whole orange box. but after a link is clicked, on hover the bg
              > > color
              > > bar is cut off (see "the Board" in particular) and the font color
              > > changes
              > > to a
              > > lighter one.
              > >
              > > i don't want the hover class to change at all - it should be the same
              > > for
              > > links and visited links. visited links can change to a different color
              > > though,
              > > but not that default purple.
              > >
              > > here's my current CSS, which someone helped me out with so i'm not sure
              > > exactly how everything works...
              > > what is causing the problem?
              > >
              > > .aboutus {
              > > font-weight:bold;
              > > color:#011E5A;
              > > text-decoration:underline;
              > > padding: 3px 6px;
              > > }
              > >
              > > .aboutus a {
              > > font-weight:bold;
              > > color:#011E5A;
              > > text-decoration:underline;
              > > padding: 3px 6px;
              > > }
              > >
              > > .aboutus a:link {
              > > font-weight:bold;
              > > color:#011E5A;
              > > text-decoration:underline;
              > > display: block;
              > > }
              > >
              > > .aboutus a:hover {
              > > background-color:#F7AD6A;
              > > padding: 3px 6px;
              > > }
              > >
              > > .aboutus a:visited {
              > > font-weight:bold;
              > > color:#011E5A;
              > > padding: 3px 6px;
              > > }
              > >
              > > .aboutus p {
              > > margin: 0;
              > > padding: 0;
              > > }
              > >
              >
              >
              >

              >
              >
              >


              • 4. Re: What's wrong with my stylesheet?
                BullocksTroy Level 1
                I switched the order..still not working. am i missing something else?


                quote:

                Originally posted by: Newsgroup User
                I didn't notice earlier, sorry - you have your hover and visited 'round the
                wrong way...

                .aboutus a:hover {
                background-color:#F7AD6A;
                color:#011E5A;
                padding: 3px 6px;
                }

                .aboutus a:visited {
                font-weight:bold;
                color:#011E5A;
                display: block;
                padding: 3px 6px;
                }

                Switch them around and I hope this will be sorted. The rule is Link Visited,
                Hover, Active

                --
                Jo



                "BullocksTroy" <webforumsuser@macromedia.com> wrote in message
                news:eg3k8t$a9p$1@forums.macromedia.com...
                > Ok, I specified a color for a: visted. but the hover class is still
                > changing
                > when I don't want it to. The hover only changes on visited links, even
                > though
                > i've now specified colors for both the general a:hover class and the
                > aboutus
                > a:hover class....
                > i'm confused.
                >
                > http://www.whsprx.com/aboutus.html
                >
                >
                >
                quote:

                Originally posted by: Newsgroup User
                > You haven't specified a colour for visited ...
                >
                > a:link {
                > text-decoration: none;
                > color: #7A96E0;
                > }
                > a:visited {
                > text-decoration: none;
                > }
                > a:hover {
                > color: #F8BD84;
                > }
                > a:active {
                > text-decoration: none;
                > color: #F8BD84;
                > }
                >
                > --
                > Jo
                >
                >
                >
                > "BullocksTroy" <webforumsuser@macromedia.com> wrote in message
                > news:eg0vp2$2k8$1@forums.macromedia.com...
                > >I am having trouble with the text in the orange box on the left:
                > >
                > > http://www.whsprx.com/aboutus.html
                > >
                > > I can't seem to figure out what's wrong with my visited link styles
                > > here.
                > > When
                > > you click on one of these links, the link will then show up as purple
                > > (which i
                > > believe is the default color, not one i specified), and the hover class
                > > also
                > > changes - initially you'll see just the background color changes in a
                > > bar
                > > that
                > > spans the whole orange box. but after a link is clicked, on hover the bg
                > > color
                > > bar is cut off (see "the Board" in particular) and the font color
                > > changes
                > > to a
                > > lighter one.
                > >
                > > i don't want the hover class to change at all - it should be the same
                > > for
                > > links and visited links. visited links can change to a different color
                > > though,
                > > but not that default purple.
                > >
                > > here's my current CSS, which someone helped me out with so i'm not sure
                > > exactly how everything works...
                > > what is causing the problem?
                > >
                > > .aboutus {
                > > font-weight:bold;
                > > color:#011E5A;
                > > text-decoration:underline;
                > > padding: 3px 6px;
                > > }
                > >
                > > .aboutus a {
                > > font-weight:bold;
                > > color:#011E5A;
                > > text-decoration:underline;
                > > padding: 3px 6px;
                > > }
                > >
                > > .aboutus a:link {
                > > font-weight:bold;
                > > color:#011E5A;
                > > text-decoration:underline;
                > > display: block;
                > > }
                > >
                > > .aboutus a:hover {
                > > background-color:#F7AD6A;
                > > padding: 3px 6px;
                > > }
                > >
                > > .aboutus a:visited {
                > > font-weight:bold;
                > > color:#011E5A;
                > > padding: 3px 6px;
                > > }
                > >
                > > .aboutus p {
                > > margin: 0;
                > > padding: 0;
                > > }
                > >
                >
                >
                >

                >
                >
                >





                • 5. Re: What's wrong with my stylesheet?
                  Level 7
                  On Fri, 6 Oct 2006 13:36:20 +0000 (UTC), "BullocksTroy"
                  <webforumsuser@macromedia.com> wrote:

                  >I switched the order..still not working. am i missing something else?

                  Yes.

                  Link
                  Visited
                  Hover
                  Active

                  LVHA, this order!!
                  • 6. Re: What's wrong with my stylesheet?
                    BullocksTroy Level 1
                    quote:

                    Originally posted by: Newsgroup User
                    On Fri, 6 Oct 2006 13:36:20 +0000 (UTC), "BullocksTroy"
                    <webforumsuser@macromedia.com> wrote:

                    >I switched the order..still not working. am i missing something else?

                    Yes.

                    Link
                    Visited
                    Hover
                    Active

                    LVHA, this order!!



                    yes, i did this, but no luck.
                    i even gave the visted and hover classes the same properties just to see if it would change, and with all the edits i make the appearance never seems to change...
                    here's what the css looks like now:


                    .aboutus a:link {
                    font-weight:bold;
                    color:#011E5A;
                    text-decoration:underline;
                    display: block;
                    padding: 3px 6px;
                    }

                    .aboutus a:visited {
                    background-color:#F7AD6A;
                    font-weight:bold;
                    color:#011E5A;
                    display: block;
                    padding: 3px 6px;
                    }

                    .aboutus a:hover {
                    background-color:#F7AD6A;
                    color:#011E5A;
                    display: block;
                    padding: 3px 6px;
                    }

                    .aboutus a:active {
                    font-weight:bold;
                    background-color:#F7AD6A;
                    color:#011E5A;
                    display: block;
                    padding: 3px 6px;
                    }

                    • 7. Re: What's wrong with my stylesheet?
                      Level 7
                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                      <html>
                      <head>
                      <title></title>
                      <meta http-equiv="Content-Type" content="text/html;
                      charset=iso-8859-1">

                      <style type="text/css">
                      <!--
                      .aboutus a:link {
                      color: #011E5A;
                      display: block;
                      font-weight: bold;
                      padding: 3px 6px;
                      text-decoration: underline;
                      }

                      .aboutus a:visited {
                      background: #F7AD6A;
                      color: #011E5A;
                      display: block;
                      font-weight: bold;
                      padding: 3px 6px;
                      }

                      .aboutus a:hover {
                      background: #F7AD6A;
                      color: #011E5A;
                      display: block;
                      padding: 3px 6px;
                      }
                      .aboutus a:active {
                      background: #F7AD6A;
                      color: #011E5A;
                      display: block;
                      font-weight: bold;
                      padding: 3px 6px;
                      }
                      -->
                      </style>
                      </head>

                      <body>
                      Here is a <span class="aboutus"><a href="#">link</a></span>.
                      </body>
                      </html>