Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I have style rules defined to set my navigation links to uppercase (text-transform: uppercase. On a certain page where there are links in the body after I click on a link which I have not visited yet, it then becomes uppercase too.

    Here is the HTML of the links which are being applied the rule which I do not think they should be.

    HTML Code:
    <div id="calendarEvents">
      <h2>Calendar</h2>
      <p>February 13, 2008</p><br />
      <ul>
        <li>lorem...</li>
        <li>ipsum</li>
        <li><a href="file.html">link text</a></li>
      </ul>
    </div>
    The HTML for the navigation links
    HTML Code:
    <div id="navi">
      <ul>
       <li><a href="../link1">link1-text</a></li>
       <li><a href="../link2">link2-text</a></li>
       <li><a href="../link3">link3-text</a></li>
       <li><a href="../link4">link4-text</a></li>
      </ul>
    </div>
    The CSS:

    Code:
    #calendarEvents a:link, a:visited
    {
       color: #BEC9D5;
       text-decoration: none;
       text-transform: none;
    }
    
    #navi a:link, a:visited
    {
       color: #BEC9D5;
       font-weight: bold;
       text-transform: uppercase;
    }
    I added the text-transform: none; to the #calendarEvents once I noticed this problem but to no avail.

    Am I missing something?

    Edit: using firebug and Web Developer in Firefox shows that for whatever reason the rules for #navi are being applied to the body links - even though I first open the navi div (<div id="navi">) after the link that is causing this problem...?

    Edit: Okay so I solved it. Basically I realised that my #avi rules were being applied to all links (well the visited part was) so I changed the #navi CSS to

    Code:
    #navi a:link, #navi a:visited
    {
       color: #BEC9D5;
       font-weight: bold;
       text-transform: uppercase;
    }
    And that worked.

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Exactly. Keep in mind that the comma separates two completely distinct selectors, not two sub-selectors. So [minicode]#navi a:link, a:visited[/minicode] is actually read as [minicode](#navi a:link), (a:visited)[/minicode]. Thus the visited applies to anything, while the a:link applied just to descendants of #navi.

  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Yeah thanks for clarifying that, I must have known that before - must have been sleepy this morning when I posted that!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:59 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com