Anchor colors

Discussion in 'HTML' started by tshad, Aug 2, 2007.

  1. tshad

    tshad Guest

    My links/anchors in my site are a turquoise color.

    a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    }
    a:link {
    color:#3EA2BC;
    }
    a:active {
    color:#3EA2BC;
    }

    I have some tags I want to be a different color so I set up a class -
    bodybold.

    It seems the way I do it with my menu list doesn't work for my other links
    For my menu Links I do it this way:

    ..nav-menu li a
    {
    height: 2em;
    line-height: 2em;
    color: #666666; /* Color of the Link - need to change it for a:visited as
    well */
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: bold;
    }
    ..nav-menu li a:visited
    {
    color: #666666; /* Color of visited link - should be the same as the "a"
    tag */
    }

    The class name, then the list, then the link. This is then applied as so:

    <div class="nav-menu" >
    <ul>
    <li><asp:HyperLink ID="HomeMenu" Text="Home" NavigateUrl="home.aspx
    runat="server"/></li>
    <li><asp:HyperLink ID="ViewBasicMenu"
    NavigateUrl="viewPositionsNS.aspx?type=Basic" Text="Basic Search"
    runat="server"/></li>
    </ul>
    </div>

    This doesn't work for my normal links:

    My <a> is:

    <a class="bodybold" href="file:///C|/Inetpub/wwwroot/media_kit">media</a>

    I tried this first:

    ..bodybold
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    That didn't work.

    I then realized that I needed to specifically set the <a> specifically as I
    do with my list menus, so I now have:

    ..bodybold a
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    ..bodybold a:link
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    ..bodybold a:active
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    ..bodybold a:visited
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    This still didn't work work. But then I did this which did work.

    a.bodybold:link
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    a.bodybold:active
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    a.bodybold:visited
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    Why didn't the previous ones work?

    Thanks,

    Tom.
     
    tshad, Aug 2, 2007
    #1
    1. Advertising

  2. tshad

    John Hosking Guest

    tshad wrote:
    > My links/anchors in my site are a turquoise color.


    By which I guess you mean #3EA2BC. A URL would be useful.

    >
    > a {
    > font-family: Verdana, Arial, Helvetica, sans-serif;
    > font-size:10px;
    > }
    > a:link {
    > color:#3EA2BC;
    > }
    > a:active {
    > color:#3EA2BC;
    > }
    >
    > I have some tags


    By which I guess you mean links, or elements, rather than tags.

    > I want to be a different color so I set up a class -
    > bodybold.


    I get itchy when I see a class name suggesting its presumed formatting
    rather than the semantic importance of the classed items. Here, I wonder
    which link elements you want to be non-#3EA2BC, and *why*. Are they auto
    models? Member names? Monitor brands? Planets? Species of primates? Name
    the class "planet" and then you can style (and re-style) as your heart
    desires. With bodybold you have to watch out constantly that you don't
    change from using font-weight: bold anymore.

    >
    > It seems the way I do it with my menu list doesn't work for my other links
    > For my menu Links I do it this way:
    >
    > .nav-menu li a
    > {
    > height: 2em;
    > line-height: 2em;
    > color: #666666; /* Color of the Link - need to change it for a:visited as
    > well */
    > text-align: center;
    > margin: 0;
    > padding: 0;
    > font-weight: bold;
    > }
    > .nav-menu li a:visited
    > {
    > color: #666666; /* Color of visited link - should be the same as the "a"
    > tag */
    > }
    >
    > The class name, then the list, then the link. This is then applied as so:
    >
    > <div class="nav-menu" >
    > <ul>
    > <li><asp:HyperLink ID="HomeMenu" Text="Home" NavigateUrl="home.aspx
    > runat="server"/></li>


    What the hell is asp:? This is why you should provide a URL, so we can
    see what you've really got.


    >
    > This doesn't work for my normal links:
    >
    > My <a> is:
    >
    > <a class="bodybold" href="file:///C|/Inetpub/wwwroot/media_kit">media</a>
    >
    > I tried this first:
    >
    > .bodybold


    > That didn't work.
    >
    > I then realized that I needed to specifically set the <a> specifically as I
    > do with my list menus, so I now have:
    >
    > .bodybold a


    You're just guessing. Read and digest an actual tutorial, like
    http://css.maxdesign.com.au/selectutorial/
    (http://css.maxdesign.com.au/selectutorial/selectors_class.htm) or
    http://www.htmldog.com/guides/cssintermediate/pseudoclasses/ (although
    beware because the HTMLDog page doesn't use the ordering :link,
    :visited, :hover, :active.

    > This still didn't work work. But then I did this which did work.
    >
    > a.bodybold:link
    > {
    > font-family:Geneva, Arial, Helvetica, sans-serif;
    > font-style:normal;
    > font-size:11px;


    BTW, please don't do this. Use % or em instead.

    > font-weight:Bold;
    > text-decoration:none;
    > color:#666666
    > }
    > a.bodybold:active
    > {
    > font-family:Geneva, Arial, Helvetica, sans-serif;
    > font-style:normal;
    > font-size:11px;
    > font-weight:Bold;
    > text-decoration:none;
    > color:#666666
    > }
    > a.bodybold:visited
    > {
    > font-family:Geneva, Arial, Helvetica, sans-serif;
    > font-style:normal;
    > font-size:11px;
    > font-weight:Bold;
    > text-decoration:none;
    > color:#666666
    > }
    >
    > Why didn't the previous ones work?


    ".bodybold a" selects the <a> elements which are descendants of elements
    with the bodybold class. You don't have any of those. What you have are
    <a> elements which have the bodybold class. Such elements are selected
    with a.bodybold, as you have done.

    Also BTW: since these three rule sets are identical, you can combine them to

    a.bodybold:link, a.bodybold:visited, a.bodybold:active
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    or even

    a.bodybold:link, a.bodybold:visited, a.bodybold:active
    {
    font: normal bold 11px Geneva, Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#666666
    }

    but if they're identical, why are you specifying them at all? And what
    about the :hover case?

    HTH

    --
    John
    Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
     
    John Hosking, Aug 2, 2007
    #2
    1. Advertising

  3. tshad

    tshad Guest

    I am not sure I understand your explanation on the differences between:

    ..bodybold a:link

    and

    a.bodybold:link

    and the reason the first one works for my links in my lists but not for the
    links by themselves.

    I am looking at your suggestions for information on it now.

    Thanks,

    Tom

    "John Hosking" <> wrote in message
    news:46b22034$...
    > tshad wrote:
    >> My links/anchors in my site are a turquoise color.

    >
    > By which I guess you mean #3EA2BC. A URL would be useful.
    >
    >>
    >> a {
    >> font-family: Verdana, Arial, Helvetica, sans-serif;
    >> font-size:10px;
    >> }
    >> a:link {
    >> color:#3EA2BC;
    >> }
    >> a:active {
    >> color:#3EA2BC;
    >> }
    >>
    >> I have some tags

    >
    > By which I guess you mean links, or elements, rather than tags.
    >
    >> I want to be a different color so I set up a class -
    >> bodybold.

    >
    > I get itchy when I see a class name suggesting its presumed formatting
    > rather than the semantic importance of the classed items. Here, I wonder
    > which link elements you want to be non-#3EA2BC, and *why*. Are they auto
    > models? Member names? Monitor brands? Planets? Species of primates? Name
    > the class "planet" and then you can style (and re-style) as your heart
    > desires. With bodybold you have to watch out constantly that you don't
    > change from using font-weight: bold anymore.
    >
    >>
    >> It seems the way I do it with my menu list doesn't work for my other
    >> links For my menu Links I do it this way:
    >>
    >> .nav-menu li a
    >> {
    >> height: 2em;
    >> line-height: 2em;
    >> color: #666666; /* Color of the Link - need to change it for a:visited
    >> as well */
    >> text-align: center;
    >> margin: 0;
    >> padding: 0;
    >> font-weight: bold;
    >> }
    >> .nav-menu li a:visited
    >> {
    >> color: #666666; /* Color of visited link - should be the same as the
    >> "a" tag */
    >> }
    >>
    >> The class name, then the list, then the link. This is then applied as
    >> so:
    >>
    >> <div class="nav-menu" >
    >> <ul>
    >> <li><asp:HyperLink ID="HomeMenu" Text="Home" NavigateUrl="home.aspx
    >> runat="server"/></li>

    >
    > What the hell is asp:? This is why you should provide a URL, so we can see
    > what you've really got.
    >
    >
    >>
    >> This doesn't work for my normal links:
    >>
    >> My <a> is:
    >>
    >> <a class="bodybold" href="file:///C|/Inetpub/wwwroot/media_kit">media</a>
    >>
    >> I tried this first:
    >>
    >> .bodybold

    >
    >> That didn't work.
    >>
    >> I then realized that I needed to specifically set the <a> specifically as
    >> I do with my list menus, so I now have:
    >>
    >> .bodybold a

    >
    > You're just guessing. Read and digest an actual tutorial, like
    > http://css.maxdesign.com.au/selectutorial/
    > (http://css.maxdesign.com.au/selectutorial/selectors_class.htm) or
    > http://www.htmldog.com/guides/cssintermediate/pseudoclasses/ (although
    > beware because the HTMLDog page doesn't use the ordering :link, :visited,
    > :hover, :active.
    >
    >> This still didn't work work. But then I did this which did work.
    >>
    >> a.bodybold:link
    >> {
    >> font-family:Geneva, Arial, Helvetica, sans-serif;
    >> font-style:normal;
    >> font-size:11px;

    >
    > BTW, please don't do this. Use % or em instead.
    >
    >> font-weight:Bold;
    >> text-decoration:none;
    >> color:#666666
    >> }
    >> a.bodybold:active
    >> {
    >> font-family:Geneva, Arial, Helvetica, sans-serif;
    >> font-style:normal;
    >> font-size:11px;
    >> font-weight:Bold;
    >> text-decoration:none;
    >> color:#666666
    >> }
    >> a.bodybold:visited
    >> {
    >> font-family:Geneva, Arial, Helvetica, sans-serif;
    >> font-style:normal;
    >> font-size:11px;
    >> font-weight:Bold;
    >> text-decoration:none;
    >> color:#666666
    >> }
    >>
    >> Why didn't the previous ones work?

    >
    > ".bodybold a" selects the <a> elements which are descendants of elements
    > with the bodybold class. You don't have any of those. What you have are
    > <a> elements which have the bodybold class. Such elements are selected
    > with a.bodybold, as you have done.
    >
    > Also BTW: since these three rule sets are identical, you can combine them
    > to
    >
    > a.bodybold:link, a.bodybold:visited, a.bodybold:active
    > {
    > font-family:Geneva, Arial, Helvetica, sans-serif;
    > font-style:normal;
    > font-size:11px;
    > font-weight:Bold;
    > text-decoration:none;
    > color:#666666
    > }
    >
    > or even
    >
    > a.bodybold:link, a.bodybold:visited, a.bodybold:active
    > {
    > font: normal bold 11px Geneva, Arial, Helvetica, sans-serif;
    > text-decoration:none;
    > color:#666666
    > }
    >
    > but if they're identical, why are you specifying them at all? And what
    > about the :hover case?
    >
    > HTH
    >
    > --
    > John
    > Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
     
    tshad, Aug 2, 2007
    #3
  4. On 2007-08-02, tshad wrote:
    > I am not sure I understand your explanation on the differences between:
    >
    > .bodybold a:link
    >
    > and
    >
    > a.bodybold:link


    The first one is an anchor inside an element with class="bodybold";
    the second is an anchor with class="bodybold".

    > and the reason the first one works for my links in my lists but not for the
    > links by themselves.


    URL?

    --
    Chris F.A. Johnson <http://cfaj.freeshell.org>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Aug 3, 2007
    #4
  5. Scripsit tshad:

    > My links/anchors in my site are a turquoise color.


    Bad idea, especially since you use the same color for unvisited and visited
    links.

    > font-size:10px;


    Bad idea.

    The symptoms strongly suggest that you should stop authoring web pages, take
    a crash course on the basics, and start afresh. Don't try to fix the pages
    you have already written; it's much faster and more productive to redesign
    them from scratch.

    I don't expect you to like this idea, but it's really the best advice.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Aug 5, 2007
    #5
  6. tshad

    tshad Guest

    Unfortunately, I don't have a public site to use - just an intranet.

    In the following, can I put the selectors together (the following works - I
    just want to see if I can combine them)?

    ..nav-menu-side li a
    {
    height: 2em;
    line-height: 2em;
    color: #666666; /* Color of the Link - need to change it for a:visited as
    well */
    text-align: center;
    margin: 0;
    padding: 0;
    text-decoration:none;
    font-size:9px;
    }
    ..nav-menu-side li a:link
    {
    color: #666666; /* Color of visited link - should be the same as the "a"
    tag */
    }
    ..nav-menu-side li a:visited
    {
    color: #666666; /* Color of visited link - should be the same as the "a"
    tag */
    }
    ..nav-menu-side li a:hover
    {
    color: #666666; /* Color of visited link - should be the same as the "a"
    tag */
    }
    ..nav-menu-side li a:active
    {
    color: #666666; /* Color of visited link - should be the same as the "a"
    tag */
    }

    I tried

    ..nav-menu-side li a:link a:visited a:hover a:active
    {
    color: #666666; /* Color of visited link - should be the same as the "a"
    tag */
    }

    And

    ..nav-menu-side li a:link a:visited a:hover a:active
    {
    color: #666666; /* Color of visited link - should be the same as the "a"
    tag */
    }

    neither of these worked.

    I am using them for my menu links that I want to be the same color and not
    change when visted as these are just for navigation and they will be using
    them constantly on all my pages.

    <div class="nav-menu" >
    <ul>
    <li><asp:HyperLink ID="HomeMenu" Text="Home"
    NavigateUrl="/jobSeeker/displayCompanyJobs.aspx" runat="server"/></li>
    <li><asp:HyperLink ID="ViewBasicMenu"
    NavigateUrl="/jobSeeker/viewPositionsNS.aspx?type=Basic" Text="Search"
    runat="server"/></li>
    <li><asp:HyperLink ID="NewAccountMenu"
    NavigateUrl="/jobSeeker/create_new_account.aspx" Text="Create Account"
    runat="server"/></li>
    <li><asp:HyperLink ID="LoginMenu" NavigateUrl="/jobSeeker/EELogin.aspx"
    Text="Login" runat="server"/></li>
    </ul>
    </div>

    Thanks,

    Tom

    "Chris F.A. Johnson" <> wrote in message
    news:...
    > On 2007-08-02, tshad wrote:
    >> I am not sure I understand your explanation on the differences between:
    >>
    >> .bodybold a:link
    >>
    >> and
    >>
    >> a.bodybold:link

    >
    > The first one is an anchor inside an element with class="bodybold";
    > the second is an anchor with class="bodybold".
    >
    >> and the reason the first one works for my links in my lists but not for
    >> the
    >> links by themselves.

    >
    > URL?
    >
    > --
    > Chris F.A. Johnson <http://cfaj.freeshell.org>
    > ===================================================================
    > Author:
    > Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    tshad, Aug 8, 2007
    #6
  7. tshad

    John Hosking Guest

    tshad wrote:
    > Unfortunately, I don't have a public site to use - just an intranet.


    Please don't top-post.

    Please get access to a public site and post your code there and a URL
    here. Nobody wants to see all this code out of context. There are free
    servers where you can put up a page for free, if your ISP doesn't
    provide one.

    >
    > In the following, can I put the selectors together (the following works - I
    > just want to see if I can combine them)?


    Yes, did you not read my post up-thread? You responded to it.
    In message <46b22034$> I said

    > Also BTW: since these three rule sets are identical, you can combine them to
    >
    > a.bodybold:link, a.bodybold:visited, a.bodybold:active


    Note the commas delimiting three selectors.

    Back to your last post:
    >
    > I tried
    >
    > .nav-menu-side li a:link a:visited a:hover a:active


    The delimiter is a comma. Between each comma you need the exact (full)
    selector you want added to the list for the shared ruleset. So:

    ..nav-menu-side li a:link,
    ..nav-menu-side li a:visited,
    ..nav-menu-side li a:hover,
    ..nav-menu-side li a:active { color: #666666; }

    > And
    >
    > .nav-menu-side li a:link a:visited a:hover a:active


    How is this second attempt different from the first? I don't see it.

    > neither of these worked.


    Two (identical) stabs in the dark. Get a reference and use it.

    BTW, if you have identical rules for :link, :hover, and :active, you can
    probably just specify a:link, a:visited and leave out the others, as
    they are affected by the a:link selector.

    --
    John
    Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
     
    John Hosking, Aug 8, 2007
    #7
  8. tshad

    tshad Guest

    "John Hosking" <> wrote in message
    news:46b923d6$...
    > tshad wrote:
    >> Unfortunately, I don't have a public site to use - just an intranet.

    >
    > Please don't top-post.
    >
    > Please get access to a public site and post your code there and a URL
    > here. Nobody wants to see all this code out of context. There are free
    > servers where you can put up a page for free, if your ISP doesn't provide
    > one.
    >


    Where would I find one of those?

    That would make it easier.

    >>
    >> In the following, can I put the selectors together (the following works -
    >> I just want to see if I can combine them)?

    >
    > Yes, did you not read my post up-thread? You responded to it.
    > In message <46b22034$> I said
    >
    >> Also BTW: since these three rule sets are identical, you can combine them
    >> to
    >>
    >> a.bodybold:link, a.bodybold:visited, a.bodybold:active

    >
    > Note the commas delimiting three selectors.
    >
    > Back to your last post:
    >>
    >> I tried
    >>
    >> .nav-menu-side li a:link a:visited a:hover a:active

    >
    > The delimiter is a comma. Between each comma you need the exact (full)
    > selector you want added to the list for the shared ruleset. So:
    >
    > .nav-menu-side li a:link,
    > .nav-menu-side li a:visited,
    > .nav-menu-side li a:hover,
    > .nav-menu-side li a:active { color: #666666; }
    >
    >> And
    >>
    >> .nav-menu-side li a:link a:visited a:hover a:active

    >
    > How is this second attempt different from the first? I don't see it.


    My mistake. I actually meant to have commas between them but left it out.
    And, as you pointed out, that wouldn't work as I needed the whole selector.

    >
    >> neither of these worked.

    >
    > Two (identical) stabs in the dark. Get a reference and use it.


    I actually have a couple of references, but from them references I couldn't
    figure out the differences between:

    ..bodybold a:link

    and

    a.bodybold:link

    At least not directly. For example, I didn't see in my references (may have
    missed it) that a:Link affects the other classes.
    >
    > BTW, if you have identical rules for :link, :hover, and :active, you can
    > probably just specify a:link, a:visited and leave out the others, as they
    > are affected by the a:link selector.


    Are you saying that a:hover and a:active is affected by a:link or a:hover is
    affected by a:link and a:active is affected by visited? Just wanted to make
    sure.

    Also, since we are using the pseudo selectors, is

    a{
    }

    not really useful? I can't figure out why I would use the "a" tag by
    itself.

    >


    So I assume that the following:

    ..bodybold a:link
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    ..bodybold a:visited
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    ..bodybold a:hover
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    ..bodybold a:active
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    Can be changed to:

    ..bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
    a:active
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    or

    ..bodybold a:active, .bodybold a:visited
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    The same with this:

    a.bodybold:link
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    a.bodybold:visited
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    a.bodybold:hover
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }
    a.bodybold:active
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    can be changed to:

    a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    or

    a.bodybold:link, a.bodybold:visited
    {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-size:11px;
    font-weight:Bold;
    text-decoration:none;
    color:#666666
    }

    Thanks,

    Tom
    > --
    > John
    > Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
     
    tshad, Aug 8, 2007
    #8
  9. ..oO(tshad)

    >"John Hosking" <> wrote
    >
    >> BTW, if you have identical rules for :link, :hover, and :active, you can
    >> probably just specify a:link, a:visited and leave out the others, as they
    >> are affected by the a:link selector.

    >
    >Are you saying that a:hover and a:active is affected by a:link or a:hover is
    >affected by a:link and a:active is affected by visited? Just wanted to make
    >sure.


    One of the pseudo-classes :link and :visited always applies. The other
    three pseudo-classes :)hover, :active, :focus) might apply additionally
    and even at the same time.

    >Also, since we are using the pseudo selectors, is
    >
    >a{
    >}
    >
    >not really useful? I can't figure out why I would use the "a" tag by
    >itself.


    For example to declare some general properties for all links, regardless
    of their current state.

    >So I assume that the following:
    >[...]
    >
    >Can be changed to:
    >
    >.bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
    >a:active
    >[...]


    ..bodybold a {
    font-weight: bold;
    text-decoration: none;
    color: #666
    }

    You don't have to declare the font family, size etc. over and over
    again.

    >The same with this:
    >[...]
    >
    >can be changed to:
    >
    >a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
    >[...]


    a.bodybold {
    font-weight: bold;
    text-decoration: none;
    color: #666
    }

    Same thing.

    Micha
     
    Michael Fesser, Aug 8, 2007
    #9
  10. tshad wrote:
    > "John Hosking" <> wrote in message
    > news:46b923d6$...
    >> tshad wrote:
    >>> Unfortunately, I don't have a public site to use - just an intranet.

    >> Please don't top-post.
    >>
    >> Please get access to a public site and post your code there and a URL
    >> here. Nobody wants to see all this code out of context. There are free
    >> servers where you can put up a page for free, if your ISP doesn't provide
    >> one.
    >>

    >
    > Where would I find one of those?
    >


    http://www.justfuckinggoogleit.com/search.pl?query=free web hosting

    <snip code>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 8, 2007
    #10
  11. tshad

    John Hosking Guest

    tshad wrote:
    > "John Hosking" wrote in message news:46b923d6$...
    >>
    >> Please get access to a public site and post your code there and a URL
    >> here. Nobody wants to see all this code out of context. There are free
    >> servers where you can put up a page for free, if your ISP doesn't provide
    >> one.

    >
    > Where would I find one of those?


    GIYF: search for "free hosting" or "free web server" or something. I
    really hate Yahoo's GeoCities, but if all else fails (getting _good_
    hosting), you could go there as a last resort.

    >
    > I actually have a couple of references, but from them references I couldn't
    > figure out the differences between:
    >
    > .bodybold a:link
    >
    > and
    >
    > a.bodybold:link


    Just CSS notation. The thing following the leading dot is a class name.
    The thing peceding the dot, if present, is the element with that class.
    A sequence of "things" separated by spaces show descendents, where each
    thing is a descendent of the things to its left. A colon starts a
    pseudo-selector. (And commas separate selectors in a list which use the
    same rules, but you know that now.)

    Selectutorial has some fine tutorials on CSS. Here's their page on
    grouping selectors:
    http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm

    >
    > At least not directly. For example, I didn't see in my references (may have
    > missed it) that a:Link affects the other classes.
    >> BTW, if you have identical rules for :link, :hover, and :active, you can
    >> probably just specify a:link, a:visited and leave out the others, as they
    >> are affected by the a:link selector.

    >
    > Are you saying that a:hover and a:active is affected by a:link or a:hover is
    > affected by a:link and a:active is affected by visited? Just wanted to make
    > sure.


    Here's some more to read (and refer back to later). If you read this
    (and understand it) you ought to have no more problems in this area.
    http://www.satzansatz.de/cssd/pseudocss.html is a page which talks
    primarily about bugs in IE regarding pseudo-selectors (so it's both more
    than we're discussing here and also restricted to just a couple of
    browser versions), but it contains a good explanation about the :link,
    :visited, et. al. mechanics. I suggest that you just skip to
    http://www.satzansatz.de/cssd/pseudocss.html#link-pseudo-classes and
    read from there.

    And from the horse's mouth (also linked to from above):
    http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
    http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

    And for dessert, here are a couple of fun facts from
    http://www.quirksmode.org/css/hover.html ;-)

    ..test:hover doesn't work in Mozilla/Firefox in CSS Quirks Mode.

    :hover on elements other than links doesn't work in Explorer 7 in CSS
    Quirks Mode.

    >
    > Also, since we are using the pseudo selectors, is a { }
    > not really useful? I can't figure out why I would use the "a" tag by
    > itself.


    Not all <a> elements are links. You don't see the non-link kind very
    often anymore, but they exist.

    >
    > So I assume that the following:
    >
    > .bodybold a:link
    > {

    [snippage of repeated identical rules]
    > }
    > .bodybold a:visited
    > {

    [snippage]
    > }
    > .bodybold a:hover
    > {

    [snippage]
    > }
    > .bodybold a:active
    > {

    [snippage]
    > }
    >
    > Can be changed to:
    >
    > .bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
    > a:active


    If you correct the first a:active in what I presume is a typo here to

    .bodybold a:link, .bodybold a:visited, .bodybold a:hover, .bodybold
    a:active

    > {

    [snippage]
    > }


    ....then yes, but

    >
    > or
    >
    > .bodybold a:active, .bodybold a:visited
    > {

    [snippage]
    > }


    No. Don't know how you jumped here. Ah! unless you have the same typo.
    If you mean .bodybold a:link, .bodybold a:visited, then yes.


    > The same with this:
    >
    > a.bodybold:link
    > {
    > }
    > a.bodybold:visited
    > {
    > }
    > a.bodybold:hover
    > {
    > }
    > a.bodybold:active
    > {
    > }
    >
    > can be changed to:
    >
    > a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
    > {
    > }
    >
    > or
    >
    > a.bodybold:link, a.bodybold:visited
    > {
    > }

    Well, yes, but do note that these are two entirely different examples
    you've given. "a.bodybold:link" is different from ".bodybold a:link".


    --
    John
    Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
     
    John Hosking, Aug 9, 2007
    #11
  12. tshad

    Andy Dingley Guest

    On 8 Aug, 00:24, "tshad" <> wrote:
    > Unfortunately, I don't have a public site to use - just an intranet.


    Then either find help from just those people who can see your
    intranet, or else find some simple public hosting where you can post
    static HTML/CSS (i.e. the _results_ of you ASP code) so that a much
    larger group of people can see it.

    One of these groups is likely to be more helpful than the other. One
    of these hosting choices is accessible to that group. The rest is your
    choice.
     
    Andy Dingley, Aug 9, 2007
    #12
  13. tshad

    tshad Guest

    "John Hosking" <> wrote in message
    news:46ba532a$...
    > tshad wrote:
    >> "John Hosking" wrote in message news:46b923d6$...
    >>>
    >>> Please get access to a public site and post your code there and a URL
    >>> here. Nobody wants to see all this code out of context. There are free
    >>> servers where you can put up a page for free, if your ISP doesn't
    >>> provide one.

    >>
    >> Where would I find one of those?

    >
    > GIYF: search for "free hosting" or "free web server" or something. I
    > really hate Yahoo's GeoCities, but if all else fails (getting _good_
    > hosting), you could go there as a last resort.
    >
    >>
    >> I actually have a couple of references, but from them references I
    >> couldn't figure out the differences between:
    >>
    >> .bodybold a:link
    >>
    >> and
    >>
    >> a.bodybold:link

    >
    > Just CSS notation. The thing following the leading dot is a class name.
    > The thing peceding the dot, if present, is the element with that class. A
    > sequence of "things" separated by spaces show descendents, where each
    > thing is a descendent of the things to its left. A colon starts a
    > pseudo-selector. (And commas separate selectors in a list which use the
    > same rules, but you know that now.)
    >
    > Selectutorial has some fine tutorials on CSS. Here's their page on
    > grouping selectors:
    > http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm
    >
    >>
    >> At least not directly. For example, I didn't see in my references (may
    >> have missed it) that a:Link affects the other classes.
    >>> BTW, if you have identical rules for :link, :hover, and :active, you can
    >>> probably just specify a:link, a:visited and leave out the others, as
    >>> they are affected by the a:link selector.

    >>
    >> Are you saying that a:hover and a:active is affected by a:link or a:hover
    >> is affected by a:link and a:active is affected by visited? Just wanted
    >> to make sure.

    >
    > Here's some more to read (and refer back to later). If you read this (and
    > understand it) you ought to have no more problems in this area.
    > http://www.satzansatz.de/cssd/pseudocss.html is a page which talks
    > primarily about bugs in IE regarding pseudo-selectors (so it's both more
    > than we're discussing here and also restricted to just a couple of browser
    > versions), but it contains a good explanation about the :link, :visited,
    > et. al. mechanics. I suggest that you just skip to
    > http://www.satzansatz.de/cssd/pseudocss.html#link-pseudo-classes and read
    > from there.
    >
    > And from the horse's mouth (also linked to from above):
    > http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
    > http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes
    >
    > And for dessert, here are a couple of fun facts from
    > http://www.quirksmode.org/css/hover.html ;-)
    >


    I will be looking at these pretty closely.

    I have been looking at: http://www.w3schools.com/css/css_pseudo_classes.asp
    with is pretty basic but helps as a tickler to remember the format.

    > .test:hover doesn't work in Mozilla/Firefox in CSS Quirks Mode.
    >
    > :hover on elements other than links doesn't work in Explorer 7 in CSS
    > Quirks Mode.
    >
    >>
    >> Also, since we are using the pseudo selectors, is a { }
    >> not really useful? I can't figure out why I would use the "a" tag by
    >> itself.

    >
    > Not all <a> elements are links. You don't see the non-link kind very often
    > anymore, but they exist.
    >
    >>
    >> So I assume that the following:
    >>
    >> .bodybold a:link
    >> {

    > [snippage of repeated identical rules]
    >> }
    >> .bodybold a:visited
    >> {

    > [snippage]
    >> }
    >> .bodybold a:hover
    >> {

    > [snippage]
    >> }
    >> .bodybold a:active
    >> {

    > [snippage]
    >> }
    >>
    >> Can be changed to:
    >>
    >> .bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
    >> a:active

    >
    > If you correct the first a:active in what I presume is a typo here to


    Yes, it was.

    I meant it as you typed it.
    >
    > .bodybold a:link, .bodybold a:visited, .bodybold a:hover, .bodybold
    > a:active
    >
    >> {

    > [snippage]
    >> }

    >
    > ...then yes, but
    >
    >>
    >> or
    >>
    >> .bodybold a:active, .bodybold a:visited
    >> {

    > [snippage]
    >> }

    >
    > No. Don't know how you jumped here. Ah! unless you have the same typo. If
    > you mean .bodybold a:link, .bodybold a:visited, then yes.
    >
    >
    >> The same with this:
    >>
    >> a.bodybold:link
    >> {
    >> }
    >> a.bodybold:visited
    >> {
    >> }
    >> a.bodybold:hover
    >> {
    >> }
    >> a.bodybold:active
    >> {
    >> }
    >>
    >> can be changed to:
    >>
    >> a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
    >> {
    >> }
    >>
    >> or
    >>
    >> a.bodybold:link, a.bodybold:visited
    >> {
    >> }

    > Well, yes, but do note that these are two entirely different examples
    > you've given. "a.bodybold:link" is different from ".bodybold a:link".


    They are different examples - but just wanted to make sure there wasn't some
    gotcha between the different types.

    Thanks - this helps a lot,

    Tom
    >
    >
    > --
    > John
    > Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
     
    tshad, Aug 9, 2007
    #13
  14. tshad

    tshad Guest

    I tried some of the suggestions from here and the articles mentioned and
    still am confused. I tried applying this to a datagrid in asp.net which
    renders to something like (with the CSS):

    <style type="text/css">
    a:link, a:visited {
    color:#CCFF33;
    }
    ..gridHeaderStyle {
    color:#33FFCC;
    background-color:#000000;
    font-weight:bold
    }
    ..gridHeaderStyle a:link, .gridHeaderStyle a:visited {
    color:#red;
    }
    a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
    color:#red;
    }
    ..gridPagerStyle {
    background-color:red
    }
    </style>
    <table cellspacing="0" cellpadding="0" rules="all" border="0"
    id="_ctl0__ctl1_DataGrid1"
    style="border-width:0px;width:635px;border-collapse:collapse;">
    <tr class="gridHeaderStyle" align="Center">
    <td style="width:100px;"><a href="#">Location</a></td>
    </tr>
    </table>

    No matter what I do - the links in the header are
    showing as lime green. I am trying to get them to change to red.

    The links in my site should be Lime Green (a:link and a:visited). I have
    the headerstyles' CssClass set to gridHeaderStyle - but it doesn't seem to
    be working for the links in the header.

    I though the ".gridHeaderStyle a:link" or a.gridHeaderStyle:link would
    override the a:link but it doesn't seem to be doing this.

    Am I missing something here?

    Thanks,

    Tom
    "tshad" <> wrote in message
    news:_eLui.56800$...
    >
    > "John Hosking" <> wrote in message
    > news:46ba532a$...
    >> tshad wrote:
    >>> "John Hosking" wrote in message news:46b923d6$...
    >>>>
    >>>> Please get access to a public site and post your code there and a URL
    >>>> here. Nobody wants to see all this code out of context. There are free
    >>>> servers where you can put up a page for free, if your ISP doesn't
    >>>> provide one.
    >>>
    >>> Where would I find one of those?

    >>
    >> GIYF: search for "free hosting" or "free web server" or something. I
    >> really hate Yahoo's GeoCities, but if all else fails (getting _good_
    >> hosting), you could go there as a last resort.
    >>
    >>>
    >>> I actually have a couple of references, but from them references I
    >>> couldn't figure out the differences between:
    >>>
    >>> .bodybold a:link
    >>>
    >>> and
    >>>
    >>> a.bodybold:link

    >>
    >> Just CSS notation. The thing following the leading dot is a class name.
    >> The thing peceding the dot, if present, is the element with that class. A
    >> sequence of "things" separated by spaces show descendents, where each
    >> thing is a descendent of the things to its left. A colon starts a
    >> pseudo-selector. (And commas separate selectors in a list which use the
    >> same rules, but you know that now.)
    >>
    >> Selectutorial has some fine tutorials on CSS. Here's their page on
    >> grouping selectors:
    >> http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm
    >>
    >>>
    >>> At least not directly. For example, I didn't see in my references (may
    >>> have missed it) that a:Link affects the other classes.
    >>>> BTW, if you have identical rules for :link, :hover, and :active, you
    >>>> can probably just specify a:link, a:visited and leave out the others,
    >>>> as they are affected by the a:link selector.
    >>>
    >>> Are you saying that a:hover and a:active is affected by a:link or
    >>> a:hover is affected by a:link and a:active is affected by visited? Just
    >>> wanted to make sure.

    >>
    >> Here's some more to read (and refer back to later). If you read this (and
    >> understand it) you ought to have no more problems in this area.
    >> http://www.satzansatz.de/cssd/pseudocss.html is a page which talks
    >> primarily about bugs in IE regarding pseudo-selectors (so it's both more
    >> than we're discussing here and also restricted to just a couple of
    >> browser versions), but it contains a good explanation about the :link,
    >> :visited, et. al. mechanics. I suggest that you just skip to
    >> http://www.satzansatz.de/cssd/pseudocss.html#link-pseudo-classes and read
    >> from there.
    >>
    >> And from the horse's mouth (also linked to from above):
    >> http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
    >> http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes
    >>
    >> And for dessert, here are a couple of fun facts from
    >> http://www.quirksmode.org/css/hover.html ;-)
    >>

    >
    > I will be looking at these pretty closely.
    >
    > I have been looking at:
    > http://www.w3schools.com/css/css_pseudo_classes.asp with is pretty basic
    > but helps as a tickler to remember the format.
    >
    >> .test:hover doesn't work in Mozilla/Firefox in CSS Quirks Mode.
    >>
    >> :hover on elements other than links doesn't work in Explorer 7 in CSS
    >> Quirks Mode.
    >>
    >>>
    >>> Also, since we are using the pseudo selectors, is a { }
    >>> not really useful? I can't figure out why I would use the "a" tag by
    >>> itself.

    >>
    >> Not all <a> elements are links. You don't see the non-link kind very
    >> often anymore, but they exist.
    >>
    >>>
    >>> So I assume that the following:
    >>>
    >>> .bodybold a:link
    >>> {

    >> [snippage of repeated identical rules]
    >>> }
    >>> .bodybold a:visited
    >>> {

    >> [snippage]
    >>> }
    >>> .bodybold a:hover
    >>> {

    >> [snippage]
    >>> }
    >>> .bodybold a:active
    >>> {

    >> [snippage]
    >>> }
    >>>
    >>> Can be changed to:
    >>>
    >>> .bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
    >>> a:active

    >>
    >> If you correct the first a:active in what I presume is a typo here to

    >
    > Yes, it was.
    >
    > I meant it as you typed it.
    >>
    >> .bodybold a:link, .bodybold a:visited, .bodybold a:hover, .bodybold
    >> a:active
    >>
    >>> {

    >> [snippage]
    >>> }

    >>
    >> ...then yes, but
    >>
    >>>
    >>> or
    >>>
    >>> .bodybold a:active, .bodybold a:visited
    >>> {

    >> [snippage]
    >>> }

    >>
    >> No. Don't know how you jumped here. Ah! unless you have the same typo. If
    >> you mean .bodybold a:link, .bodybold a:visited, then yes.
    >>
    >>
    >>> The same with this:
    >>>
    >>> a.bodybold:link
    >>> {
    >>> }
    >>> a.bodybold:visited
    >>> {
    >>> }
    >>> a.bodybold:hover
    >>> {
    >>> }
    >>> a.bodybold:active
    >>> {
    >>> }
    >>>
    >>> can be changed to:
    >>>
    >>> a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
    >>> {
    >>> }
    >>>
    >>> or
    >>>
    >>> a.bodybold:link, a.bodybold:visited
    >>> {
    >>> }

    >> Well, yes, but do note that these are two entirely different examples
    >> you've given. "a.bodybold:link" is different from ".bodybold a:link".

    >
    > They are different examples - but just wanted to make sure there wasn't
    > some gotcha between the different types.
    >
    > Thanks - this helps a lot,
    >
    > Tom
    >>
    >>
    >> --
    >> John
    >> Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

    >
    >
     
    tshad, Aug 17, 2007
    #14
  15. tshad

    tshad Guest

    "tshad" <> wrote in message
    news:2Hoxi.6247$...
    >I tried some of the suggestions from here and the articles mentioned and
    >still am confused. I tried applying this to a datagrid in asp.net which
    >renders to something like (with the CSS):
    >
    > <style type="text/css">
    > a:link, a:visited {
    > color:#CCFF33;
    > }
    > .gridHeaderStyle {
    > color:#33FFCC;
    > background-color:#000000;
    > font-weight:bold
    > }
    > .gridHeaderStyle a:link, .gridHeaderStyle a:visited {
    > color:#red;
    > }
    > a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
    > color:#red;
    > }
    > .gridPagerStyle {
    > background-color:red
    > }
    > </style>
    > <table cellspacing="0" cellpadding="0" rules="all" border="0"
    > id="_ctl0__ctl1_DataGrid1"
    > style="border-width:0px;width:635px;border-collapse:collapse;">
    > <tr class="gridHeaderStyle" align="Center">
    > <td style="width:100px;"><a href="#">Location</a></td>
    > </tr>
    > </table>
    >


    I also tried to change the Link to:

    <a style="color:#red;" href="#">

    But that didn't work either.

    Tom
    > No matter what I do - the links in the header are
    > showing as lime green. I am trying to get them to change to red.
    >
    > The links in my site should be Lime Green (a:link and a:visited). I have
    > the headerstyles' CssClass set to gridHeaderStyle - but it doesn't seem to
    > be working for the links in the header.
    >
    > I though the ".gridHeaderStyle a:link" or a.gridHeaderStyle:link would
    > override the a:link but it doesn't seem to be doing this.
    >
    > Am I missing something here?
    >
    > Thanks,
    >
    > Tom
    > "tshad" <> wrote in message
    > news:_eLui.56800$...
    >>
    >> "John Hosking" <> wrote in message
    >> news:46ba532a$...
    >>> tshad wrote:
    >>>> "John Hosking" wrote in message news:46b923d6$...
    >>>>>
    >>>>> Please get access to a public site and post your code there and a URL
    >>>>> here. Nobody wants to see all this code out of context. There are free
    >>>>> servers where you can put up a page for free, if your ISP doesn't
    >>>>> provide one.
    >>>>
    >>>> Where would I find one of those?
    >>>
    >>> GIYF: search for "free hosting" or "free web server" or something. I
    >>> really hate Yahoo's GeoCities, but if all else fails (getting _good_
    >>> hosting), you could go there as a last resort.
    >>>
    >>>>
    >>>> I actually have a couple of references, but from them references I
    >>>> couldn't figure out the differences between:
    >>>>
    >>>> .bodybold a:link
    >>>>
    >>>> and
    >>>>
    >>>> a.bodybold:link
    >>>
    >>> Just CSS notation. The thing following the leading dot is a class name.
    >>> The thing peceding the dot, if present, is the element with that class.
    >>> A sequence of "things" separated by spaces show descendents, where each
    >>> thing is a descendent of the things to its left. A colon starts a
    >>> pseudo-selector. (And commas separate selectors in a list which use the
    >>> same rules, but you know that now.)
    >>>
    >>> Selectutorial has some fine tutorials on CSS. Here's their page on
    >>> grouping selectors:
    >>> http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm
    >>>
    >>>>
    >>>> At least not directly. For example, I didn't see in my references (may
    >>>> have missed it) that a:Link affects the other classes.
    >>>>> BTW, if you have identical rules for :link, :hover, and :active, you
    >>>>> can probably just specify a:link, a:visited and leave out the others,
    >>>>> as they are affected by the a:link selector.
    >>>>
    >>>> Are you saying that a:hover and a:active is affected by a:link or
    >>>> a:hover is affected by a:link and a:active is affected by visited?
    >>>> Just wanted to make sure.
    >>>
    >>> Here's some more to read (and refer back to later). If you read this
    >>> (and understand it) you ought to have no more problems in this area.
    >>> http://www.satzansatz.de/cssd/pseudocss.html is a page which talks
    >>> primarily about bugs in IE regarding pseudo-selectors (so it's both more
    >>> than we're discussing here and also restricted to just a couple of
    >>> browser versions), but it contains a good explanation about the :link,
    >>> :visited, et. al. mechanics. I suggest that you just skip to
    >>> http://www.satzansatz.de/cssd/pseudocss.html#link-pseudo-classes and
    >>> read from there.
    >>>
    >>> And from the horse's mouth (also linked to from above):
    >>> http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
    >>> http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes
    >>>
    >>> And for dessert, here are a couple of fun facts from
    >>> http://www.quirksmode.org/css/hover.html ;-)
    >>>

    >>
    >> I will be looking at these pretty closely.
    >>
    >> I have been looking at:
    >> http://www.w3schools.com/css/css_pseudo_classes.asp with is pretty basic
    >> but helps as a tickler to remember the format.
    >>
    >>> .test:hover doesn't work in Mozilla/Firefox in CSS Quirks Mode.
    >>>
    >>> :hover on elements other than links doesn't work in Explorer 7 in CSS
    >>> Quirks Mode.
    >>>
    >>>>
    >>>> Also, since we are using the pseudo selectors, is a { }
    >>>> not really useful? I can't figure out why I would use the "a" tag by
    >>>> itself.
    >>>
    >>> Not all <a> elements are links. You don't see the non-link kind very
    >>> often anymore, but they exist.
    >>>
    >>>>
    >>>> So I assume that the following:
    >>>>
    >>>> .bodybold a:link
    >>>> {
    >>> [snippage of repeated identical rules]
    >>>> }
    >>>> .bodybold a:visited
    >>>> {
    >>> [snippage]
    >>>> }
    >>>> .bodybold a:hover
    >>>> {
    >>> [snippage]
    >>>> }
    >>>> .bodybold a:active
    >>>> {
    >>> [snippage]
    >>>> }
    >>>>
    >>>> Can be changed to:
    >>>>
    >>>> .bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
    >>>> a:active
    >>>
    >>> If you correct the first a:active in what I presume is a typo here to

    >>
    >> Yes, it was.
    >>
    >> I meant it as you typed it.
    >>>
    >>> .bodybold a:link, .bodybold a:visited, .bodybold a:hover, .bodybold
    >>> a:active
    >>>
    >>>> {
    >>> [snippage]
    >>>> }
    >>>
    >>> ...then yes, but
    >>>
    >>>>
    >>>> or
    >>>>
    >>>> .bodybold a:active, .bodybold a:visited
    >>>> {
    >>> [snippage]
    >>>> }
    >>>
    >>> No. Don't know how you jumped here. Ah! unless you have the same typo.
    >>> If you mean .bodybold a:link, .bodybold a:visited, then yes.
    >>>
    >>>
    >>>> The same with this:
    >>>>
    >>>> a.bodybold:link
    >>>> {
    >>>> }
    >>>> a.bodybold:visited
    >>>> {
    >>>> }
    >>>> a.bodybold:hover
    >>>> {
    >>>> }
    >>>> a.bodybold:active
    >>>> {
    >>>> }
    >>>>
    >>>> can be changed to:
    >>>>
    >>>> a.bodybold:link, a.bodybold:visited, a.bodybold:hover,
    >>>> a.bodybold:active
    >>>> {
    >>>> }
    >>>>
    >>>> or
    >>>>
    >>>> a.bodybold:link, a.bodybold:visited
    >>>> {
    >>>> }
    >>> Well, yes, but do note that these are two entirely different examples
    >>> you've given. "a.bodybold:link" is different from ".bodybold a:link".

    >>
    >> They are different examples - but just wanted to make sure there wasn't
    >> some gotcha between the different types.
    >>
    >> Thanks - this helps a lot,
    >>
    >> Tom
    >>>
    >>>
    >>> --
    >>> John
    >>> Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

    >>
    >>

    >
    >
     
    tshad, Aug 17, 2007
    #15
  16. tshad

    John Hosking Guest

    tshad wrote:

    Please don't top-post. Again.

    > I tried some of the suggestions from here and the articles mentioned and
    > still am confused. I tried applying this to a datagrid in asp.net which
    > renders to something like (with the CSS):


    If you had a URL as we've discussed you wouldn't need to post this code,
    and we could all see the results, in all the browsers we have available,
    with all the debugging tools we have.


    > .gridHeaderStyle a:link, .gridHeaderStyle a:visited {
    > color:#red;
    > }


    It's either color:red; or color:#FF0000; or color:#F00;

    > a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
    > color:#red;
    > }


    You don't have any elements which match this selector, as previously
    discussed.


    > <tr class="gridHeaderStyle" align="Center">
    > <td style="width:100px;"><a href="#">Location</a></td>
    > </tr>


    >
    > No matter what I do - the links in the header are
    > showing as lime green. I am trying to get them to change to red.
    >
    > The links in my site should be Lime Green (a:link and a:visited).


    No, not exactly. Lime green is #00FF00.

    > I have
    > the headerstyles' CssClass set to gridHeaderStyle - but it doesn't seem to
    > be working for the links in the header.


    This comment is inexact enough to make me think you're doing something
    (else) bizarre; when you say, "I have the headerstyles' CssClass set to
    gridHeaderStyle," it makes me think you're using a class name as a
    property for another class, which won't work. Of course without the URL
    we can't see the entire code, and without the entire code we don't know
    what's supposed to be a header.
    >
    > I though the ".gridHeaderStyle a:link" or a.gridHeaderStyle:link would
    > override the a:link but it doesn't seem to be doing this.
    >
    > Am I missing something here?


    It could be that you need to add the td to the selector, as in
    ..gridHeaderStyle td a:link, .gridHeaderStyle td a:visited { color:red; }
    but I think you probably just need to get the value right. If you had
    provided a URL I could have tested it and told you for sure.

    Tom, you really, really need to get into a position (and train yourself
    to be in the habit) to validate your code. If you keep bashing your head
    against invalid code, you're only going to end up with a bloody
    forehead. Study the tutorials provided earlier to get your selectors
    right, but don't even bother hoping for good results (or asking here)
    before you know you have valid code.

    And then if you still need to ask here, bring a URL. We'll be glad to
    help you then.

    HTH. GL.

    --
    John
     
    John Hosking, Aug 17, 2007
    #16
  17. tshad

    John Hosking Guest

    tshad wrote:
    [Previous text from tschad himself, including semi-relevant info, snipped]

    >
    > I also tried to change the Link to:
    >
    > <a style="color:#red;" href="#">


    Please stop just guessing. Please validate your code.

    >
    > But that didn't work either.
    >
    > Tom


    [rest of text from week-old and irrelevant posts snipped]
    Please trim your posts.

    --
    John
    Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
     
    John Hosking, Aug 17, 2007
    #17
  18. tshad

    tshad Guest

    "John Hosking" <> wrote in message
    news:46c61e0b$...
    > tshad wrote:
    >
    > Please don't top-post. Again.
    >
    >> I tried some of the suggestions from here and the articles mentioned and
    >> still am confused. I tried applying this to a datagrid in asp.net which
    >> renders to something like (with the CSS):

    >
    > If you had a URL as we've discussed you wouldn't need to post this code,
    > and we could all see the results, in all the browsers we have available,
    > with all the debugging tools we have.
    >
    >
    >> .gridHeaderStyle a:link, .gridHeaderStyle a:visited {
    >> color:#red;
    >> }

    >
    > It's either color:red; or color:#FF0000; or color:#F00;


    You're right. I just figured it out before I saw the post. The color was
    originally something like #E6E6E6 but I just double clicked it and changed
    it to red. Didn't notice it hadn't grabbed the #.

    >
    >> a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
    >> color:#red;
    >> }

    >
    > You don't have any elements which match this selector, as previously
    > discussed.
    >
    >
    >> <tr class="gridHeaderStyle" align="Center">
    >> <td style="width:100px;"><a href="#">Location</a></td>
    >> </tr>

    >
    >>
    >> No matter what I do - the links in the header are
    >> showing as lime green. I am trying to get them to change to red.
    >>
    >> The links in my site should be Lime Green (a:link and a:visited).

    >
    > No, not exactly. Lime green is #00FF00.


    Probably right.
    >
    >> I have
    >> the headerstyles' CssClass set to gridHeaderStyle - but it doesn't seem
    >> to
    >> be working for the links in the header.

    >
    > This comment is inexact enough to make me think you're doing something
    > (else) bizarre; when you say, "I have the headerstyles' CssClass set to
    > gridHeaderStyle," it makes me think you're using a class name as a
    > property for another class, which won't work. Of course without the URL we
    > can't see the entire code, and without the entire code we don't know
    > what's supposed to be a header.
    >>
    >> I though the ".gridHeaderStyle a:link" or a.gridHeaderStyle:link would
    >> override the a:link but it doesn't seem to be doing this.
    >>
    >> Am I missing something here?

    >
    > It could be that you need to add the td to the selector, as in
    > .gridHeaderStyle td a:link, .gridHeaderStyle td a:visited { color:red; }
    > but I think you probably just need to get the value right. If you had
    > provided a URL I could have tested it and told you for sure.
    >
    > Tom, you really, really need to get into a position (and train yourself to
    > be in the habit) to validate your code. If you keep bashing your head
    > against invalid code, you're only going to end up with a bloody forehead.
    > Study the tutorials provided earlier to get your selectors right, but
    > don't even bother hoping for good results (or asking here) before you know
    > you have valid code.
    >

    Actually, have been looking at the tutorials but I still get confused as to
    when to use:

    ..gridHeaderStyle a:link, .gridHeaderStyle a:visited {
    color:#red;
    }

    or

    a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
    color:#red;
    }

    It seems that the 1st is the correct one, in this case. This was what I was
    testing and of course couldn't get past the error.

    Thanks,

    Tom

    > And then if you still need to ask here, bring a URL. We'll be glad to help
    > you then.
    >
    > HTH. GL.
    >
    > --
    > John
     
    tshad, Aug 17, 2007
    #18
  19. Jonathan N. Little, Aug 18, 2007
    #19
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul Smith

    Colors

    Paul Smith, Aug 20, 2005, in forum: ASP .Net
    Replies:
    11
    Views:
    1,300
    Scott M.
    Aug 29, 2005
  2. Jerry Camel

    Conditional Colors in a DataList Control

    Jerry Camel, Feb 12, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    324
    =?Utf-8?B?U3VyZXNo?=
    Feb 12, 2004
  3. Mark

    display all colors

    Mark, Apr 15, 2004, in forum: ASP .Net
    Replies:
    6
    Views:
    538
    Ken Cox [Microsoft MVP]
    Apr 15, 2004
  4. AAaron123

    TreeNode colors come from anchor colors

    AAaron123, Aug 7, 2008, in forum: ASP .Net
    Replies:
    1
    Views:
    562
    darrel
    Aug 7, 2008
  5. ZelluX
    Replies:
    3
    Views:
    1,960
    Peter Otten
    Dec 1, 2008
Loading...

Share This Page