SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can not change a:link a:hover for certian item...

    I had made a post about 7 months ago, on an exact same problem. I have gone over that thread and can not seem to replicate the solution.

    Here is the old thread:
    http://www.sitepoint.com/forums/showthread.php?t=457536

    If you go to www.defstatic.com , and scroll to the bottom, you will see my issue. The page nav buttons do not at all work right. Besides the fact that I screwed up the border, the active buttons have the default site a:link and a:hover settings.

    Here is my code, I will try to spare anything unnecessary.

    Code:
    .back_button {
    	float: left;
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      color: #000;
      border: 3px double #80C9FF;
      width: auto;
      background: url(../images/button_bg.png) repeat-x;
      padding: 0px 10px;
      line-height: 20px;
      margin: 1px;
    }
    
    .back_button a:link, .back_button a:visited {
    color: #000;
    text-decoration: none;
    }
    
    .back_button a:hover {
    color: #000;
    text-decoration: underline;
    }
    
    
    .pagenav {
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      color: #000;
      border: 3px double #80C9FF;
      width: auto;
      background: url(../images/button_bg.png) repeat-x;
      padding: 0px 10px;
      line-height: 20px;
      margin: 1px;
    }
    
    .pagenav a, .pagenav a:link {
    color: #000;
    text-decoration: none;
    }
    
    .pagenav a:hover {
    color: #000;
    text-decoration: underline;
    }
    
    .pagenavbar {
    	margin-right: 10px;
    	float: right;
    }
    
    #footer {
    	text-align: center;
    	padding: 3px;
    }
    
    ul
    {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
    li
    {
    line-height: 15px;
    padding-left: 15px;
    padding-top: 0px;
    background-image: url(../images/arrow.png);
    background-repeat: no-repeat;
    background-position: 0px 2px;
    }
    
    
    td {
    	text-align: left;
    	font-size: 11px;
    }
    
    
    
    body {
    	margin: 15px;
    	height: 100%;
    	padding: 0px;
    	font-family: Arial, Helvetica, Sans Serif;
    	line-height: 120%;
    	font-size: 11px;
    	color: #fff;
    	background: #0066b3;
    }
    
    /* Joomla core stuff */
    a:link, a:visited {
    	color: #BFE4FF; text-decoration: none;
    	font-weight: bold;
    }
    
    a:hover {
    	color: #80C9FF;	text-decoration: underline;
    	font-weight: bold;
    }
    i thought this would show up correctly, but nothing changes.

  2. #2
    Non-Member
    Join Date
    Aug 2006
    Location
    Kansas City
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My assumption is, you have a ";" on the a:link/a:visited/ a:hover in the middle of the declaration for the color property.

  3. #3
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you don't like about the other buttons, but the "<< Start", "< Prev" and "1" buttons aren't links, so they won't be affected by your hover styling.

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KCChiefs View Post
    My assumption is, you have a ";" on the a:link/a:visited/ a:hover in the middle of the declaration for the color property.
    ???

    Quote Originally Posted by CaryD View Post
    I'm not sure what you don't like about the other buttons, but the "<< Start", "< Prev" and "1" buttons aren't links, so they won't be affected by your hover styling.
    Right, I want all the buttons to have #000 color text, like the ones that are currently not links.

  5. #5
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have an anchor with the class, "pagenav", you'll need to refer to it as "a.pagenav" rather than ".pagenav a".

  6. #6
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since your core link code is at the bottom of your stylesheet, that's what gets applied to all your links. The contents of stylesheets are applied from top to bottom.

    Remove your entire Joomla Core Stuff from the bottom and place it at the head of your stylesheet. Then that code will get applied to all links except for your Nav links - since the nav link code is further down the page, which causes it to be applied after the core code.

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ValerieM View Post
    Since your core link code is at the bottom of your stylesheet, that's what gets applied to all your links. The contents of stylesheets are applied from top to bottom.

    Remove your entire Joomla Core Stuff from the bottom and place it at the head of your stylesheet. Then that code will get applied to all links except for your Nav links - since the nav link code is further down the page, which causes it to be applied after the core code.
    I thought about that. But when I moved the .pagenav code below the core stuff, it still didn't work. I will give it a try though, moving the core stuff the top and see what happens.

  8. #8
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DefStatic View Post
    I thought about that. But when I moved the .pagenav code below the core stuff, it still didn't work.
    There's no reason why it should work. Those .pagenav styles aren't referencing anything on your page as pointed out above.

  9. #9
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In other words the code lower down cancels out or overwrites any code higher up in the file.

  10. #10
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still suggest keeping the core code at least above the nav code. It's one of those rules that I've been taught is universal/standard to css.

    Sometimes the changes don't show right away, I often have to refresh twice to see them.

    Also, have you tried surrounding each link with a < span class="pagenav" > like you've done with the not-yet-links that you included with them - instead of "class"-ing each "a" with "pagenav"?

  11. #11
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree w/ CaryD that the pagenav a styles are not referencing anything as your code currently stands (clearly the pagenav styles work for your not-yet-linked "links"). But if you wrap the links in spans as I suggest above, I believe it should work.

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    /* CSS Document */
    
    html {
    	height: 100%;
    }
    
    body {
    	height: 100%;
    	margin-bottom: 1px;
    }
    
    .clr {
    	clear: both;
    }
    
    .outline {
      border: 1px solid #80C9FF;
      background: #00487D;
    	padding: 2px;
    }
    
    #buttons_outer {
    	width: 635px;
      	margin-bottom: 2px;
    	margin-right: 2px;
    	float: left;
    
    }
    
    #buttons_inner {
    	border: 1px solid #80C9FF;
    	height: 21px !important;
    	height: 23px;
    }
    
    #pathway_text {
      overflow: hidden;
    	display: block;
    	height: 25px;
    	line-height: 25px !important;
    	line-height: 22px;
    	padding-left: 4px;
    	border: 1px solid #80C9FF;
    	margin-bottom: 2px;
    }
    
    #pathway_text img {
    	margin-left: 5px;
    	margin-right: 5px;
    	margin-top: 6px;
    }
    
    #buttons {
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	width: auto;
    }
    
    
    ul#mainlevel-nav
    {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	font-size: 0.8em;
    }
    
    ul#mainlevel-nav li
    {
    	background-image: none;
    	padding-left: 0px;
    	padding-right: 0px;
    	float: left;
    	margin: 0;
    	font-size: 11px;
    	line-height: 21px;
    	white-space: nowrap;
    	border-right: 1px solid #80C9FF;
    }
    
    ul#mainlevel-nav li a
    {
    	display: block;
    	padding-left: 15px;
    	padding-right: 15px;
    	text-decoration: none;
    	color: #fff;
    	background: transparent;
    }
    
    #buttons>ul#mainlevel-nav li a { width: auto; }
    
    	ul#mainlevel-nav li a:hover
    {
    	color: #fff;
    	background: #0f86de;
            text-decoration: underline;
    }
    
    
    #search_outer {
    	float: left;
    	width: 165px;
    }
    
    #search_inner {
      border: 1px solid #80C9FF;
    	padding: 0px;
      height: 21px !important;
      height: 23px;
      overflow: hidden;
    }
    
    #search_inner form {
      padding: 0;
      margin: 0;
    }
    
    #search_inner .inputbox {
    	border: 0px;
    	padding: 3px 3px 3px 5px;
    	font-family: arial, helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    }
    
    #header_outer {
    	text-align: left;
    	border: 0px;
    	margin: 0px;
    }
    
    #header {
    	float: left;
    	padding: 0px;
    	margin-right: 2px;
    	width: 635px;
    	height: 150px;
    	background: url(../images/header_short.png) no-repeat;
    }
    
    #top_outer{
    	float: left;
    	width: 165px;
    }
    
    #top_inner {
      border: 1px solid #80C9FF;
    	padding: 2px;
      height: 144px !important;
      height: 150px;
      overflow: auto;
      float: none !important;
      float: left;
    }
    
    #left_outer {
      float: left;
    	margin-top: 2px;
    	width: 165px;
    }
    
    #left_inner {
      border: 1px solid #80C9FF;
    	padding: 2px;
      float: none !important;
      float: left;
    }
    
    #content_outer {
    	padding: 0px;
    	margin-top: 0px;
    	margin-left: 2px;
    	/** border: 1px solid #80C9FF; **/
    	float: left;
    	width: 635px;
    }
    
    #content_inner{
      float: none !important;
      float: left;
      padding: 0;
      padding-top: 2px;
      margin: 0;
    }
    
    table.content_table {
      width: 100%;
    	padding: 0px;
    	margin: 0px;
    }
    
    table.content_table td {
    	padding: 0px;
    	margin: 0px;
    }
    
    
    #banner_inner {
    	float: left;
    	padding: 0px;
    	height: 70px;
    }
    
    #poweredby_inner {
    	float: right;
    	padding: 0px;
    	margin-left: 0px;
    	height: 70px;
    }
    
    #right_outer {
    	margin-left: 2px;
    	width: 165px;
    }
    
    #right_inner {
      float: none !important;
      float: left;
      border: 1px solid #80C9FF;
      padding: 2px;
    }
    
    
    .user1_inner {
    	border: 1px solid #80C9FF;
      float: none !important;
      float: left;
    	margin: 0px;
    	padding: 2px;
    }
    
    .user2_inner {
    	border: 1px solid #80C9FF;
      float: none !important;
      float: left;
    	margin: 0px;
    	padding: 2px;
    }
    
    table td.body_outer {
    	padding: 2px;
    	border: 1px solid #80C9FF;
    }
    
    .maintitle {
    	color: #ffffff;
    	font-size: 40px;
    	padding-left: 15px;
    	padding-top: 20px;
    }
    
    .error {
      font-style: italic;
      text-transform: uppercase;
      padding: 5px;
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
    }
    
    /** old stuff **/
    
    .back_button {
    	float: left;
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      color: #000;
      border: 3px double #80C9FF;
      width: auto;
      background: url(../images/button_bg.png) repeat-x;
      padding: 0px 10px;
      line-height: 20px;
      margin: 1px;
    }
    
    .back_button a:link, .back_button a:visited {
    color: #000;
    text-decoration: none;
    }
    
    .back_button a:hover {
    color: #000;
    text-decoration: underline;
    }
    
    .pagenav {
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      color: #000;
      border: 3px double #80C9FF;
      width: auto;
      background: url(../images/button_bg.png) repeat-x;
      padding: 0px 10px;
      line-height: 20px;
      margin: 1px;
    }
    
    .pagenav a.visited, .pagenav a:link {
    color: #000;
    text-decoration: none;
    }
    
    .pagenav a:hover {
    color: #000;
    text-decoration: underline;
    }
    
    .pagenavbar {
    	margin-right: 10px;
    	float: right;
    }
    
    #footer {
    	text-align: center;
    	padding: 3px;
    }
    
    ul
    {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
    li
    {
    line-height: 15px;
    padding-left: 15px;
    padding-top: 0px;
    background-image: url(../images/arrow.png);
    background-repeat: no-repeat;
    background-position: 0px 2px;
    }
    
    
    td {
    	text-align: left;
    	font-size: 11px;
    }
    
    
    
    body {
    	margin: 15px;
    	height: 100%;
    	padding: 0px;
    	font-family: Arial, Helvetica, Sans Serif;
    	line-height: 120%;
    	font-size: 11px;
    	color: #fff;
    	background: #0066b3;
    }
    
    /* Joomla core stuff */
    a:link, a:visited {
    	color: #BFE4FF; text-decoration: none;
    	font-weight: bold;
    }
    
    a:hover {
    	color: #80C9FF;	text-decoration: underline;
    	font-weight: bold;
    }
    
    table.contentpaneopen {
      width: 100%;
    	padding: 0px;
    	border-collapse: collapse;
    	border-spacing: 0px;
    	margin: 0px;
    }
    
    table.contentpaneopen td {
       padding-right: 5px;
    }
    
    table.contentpaneopen td.componentheading {
    	padding-left: 4px;
    }
    
    
    
    table.contentpane {
      width: 100%;
    	padding: 0px;
    	border-collapse: collapse;
    	border-spacing: 0px;
    	margin: 0px;
    }
    
    table.contentpane td {
    	margin: 0px;
    	padding: 0px;
    }
    
    table.contentpane td.componentheading {
    	padding-left: 4px;
    }
    
    table.contentpaneopen fieldset {
    	border: 0px;
    	border-bottom: 1px solid #eee;
    }
    
    .button {
      color: #000;
      font-family: Arial, Hevlvetica, sans-serif;
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      border: 3px double #80C9FF;
      width: auto;
      background: url(../images/button_bg.png) repeat-x;
      padding: 0px 5px;
      line-height: 18px !important;
      line-height: 16px;
      height: 26px !important;
      height: 24px;
      margin: 1px;
    }
    
    .inputbox {
    	padding: 2px;
    	border:solid 1px #80C9FF;
    	background-color: #ffffff;
    }
    
    .componentheading {
    	background: url(../images/subhead_bg.png) repeat-x;
    	color: #000000;
    	text-align: left;
    	padding-top: 4px;
    	padding-left: 4px;
    	height: 21px;
    	font-weight: bold;
    	font-size: 10px;
    	text-transform: uppercase;
    
    }
    
    .contentcolumn {
    	padding-right: 5px;
    }
    
    .contentheading {
    	height: 30px;
    
    	color: #BFE4FF;
    	font-weight: bold;
    	font-size: 14px;
    	
    }
    
    
    
    .contentpagetitle {
    	font-size: 13px;
    	font-weight: bold;
    	color: #ffffff;
    	text-align:left;
    }
    
    table.searchinto {
    	width: 100%;
    }
    
    table.searchintro td {
    	font-weight: bold;
    }
    
    table.moduletable {
    	width: 100%;
    	margin-bottom: 5px;
    	padding: 0px;
    	border-spacing: 0px;
    	border-collapse: collapse;
    }
    
    div.moduletable {
    	padding: 0;
    	margin-bottom: 2px;
    }
    
    table.moduletable th, div.moduletable h3 {
    	background: url(../images/subhead_bg.png) repeat-x;
    	color: #000;
    	text-align: left;
    	padding-left: 4px;
    	height: 21px;
    	line-height: 21px;
    	font-weight: bold;
    	font-size: 10px;
    	text-transform: uppercase;
    	margin: 0 0 2px 0;
    }
    
    table.moduletable td {
    	font-size: 11px;
    	padding: 0px;
    	margin: 0px;
    	font-weight: normal;
    }
    
    table.pollstableborder td {
      padding: 2px;
    }
    
    .sectiontableheader {
      font-weight: bold;
      color: #000;
      background: #f0f0f0;
      padding: 4px;
    }
    
    .sectiontablefooter {
    
    }
    
    .sectiontableentry1 {
            color: #000;
            background-color : #BFE4FF;
    }
    
    .sectiontableentry1 a, .sectiontableentry2 a:visited {
    color: #000;
    text-decoration: none;
    }
    
    .sectiontableentry1 a:hover {
    color: #000;
    text-decoration: underline;
    }
    
    .sectiontableentry2 {
            color: #000;
            background-color : #80C9FF;       
    }
    
    .sectiontableentry2 a, .sectiontableentry2 a:visited {
    color: #000;
    text-decoration: none;
    }
    
    .sectiontableentry2 a:hover {
    color: #000;
    text-decoration: underline;
    }
    
    .small {
    	color: #999999;
    	font-size: 11px;
    }
    
    .createdate {
    	height: 15px;
    	padding-bottom: 10px;
    	color: #999999;
    	font-size: 11px;
    }
    
    .modifydate {
    	height: 15px;
    	padding-top: 10px;
    	color: #999999;
    	font-size: 11px;
    }
    
    table.contenttoc {
      border: 1px solid #80C9FF;
      padding: 2px;
      margin-left: 2px;
      margin-bottom: 2px;
    }
    
    table.contenttoc td {
      padding: 2px;
    }
    
    table.contenttoc th {
      background: url(../images/subhead_bg.png) repeat-x;
      color: #666666;
    	text-align: left;
    	padding-top: 2px;
    	padding-left: 4px;
    	height: 21px;
    	font-weight: bold;
    	font-size: 10px;
    	text-transform: uppercase;
    }
    
    a.mainlevel:link, a.mainlevel:visited {
    	display: block;
    	background: url(../images/menu_bg.png) no-repeat;
    	vertical-align: middle;
    	font-size: 11px;
    	font-weight: bold;
    	color: #ccc;
    	text-align: left;
    	padding-top: 5px;
    	padding-left: 18px;
    	height: 20px !important;
    	height: 25px;
    	width: 100%;
    	text-decoration: none;
    }
    
    a.mainlevel:hover {
    	background-position: 0px -25px;
    	text-decoration: none;
    	color: #fff;
    }
    
    a.mainlevel#active_menu {
    	color:#fff;
    	font-weight: bold;
    }
    
    a.mainlevel#active_menu:hover {
    	color: #fff;
    }
    
    a.sublevel:link, a.sublevel:visited {
    	padding-left: 1px;
    	vertical-align: middle;
    	font-size: 11px;
    	font-weight: bold;
    	color: #c64934;
    	text-align: left;
    }
    
    a.sublevel:hover {
    	color: #900;
    	text-decoration: none;
    }
    
    a.sublevel#active_menu {
    	color: #333;
    }
    
    .highlight {
    	background-color: Yellow;
    	color: Blue;
    	padding: 0;
    }
    .code {
    	background-color: #ddd;
    	border: 1px solid #bbb;
    }
    
    form {
    /* removes space below form elements */
    	margin: 0;
     	padding: 0;
    }
    
    div.mosimage {
      border: 1px solid #ccc;
    }
    
    .mosimage {
      border: 1px solid #80C9FF;
      margin: 5px
    }
    
    .mosimage_caption {
      margin-top: 2px;
      background: #efefef;
      padding: 1px 2px;
      color: #666;
      font-size: 10px;
      border-top: 1px solid #80C9FF;
    }
    
    span.article_seperator {
    	display: block;
    	height: 1.5em;
    }
    Ok, let me ask you this... why does my .back_button work as it is? Before it would use the default a.link properties as well, until I made the changes.

    And then my next question... why the heck did simply changing it to a.pagenav:link / a.pagenav:hover make the changes I wanted and now shows black? Was it because my .pagenav a:link / .pagenav a:hover was actually calling the a:link / a:hover later in the CSS and the correct way was to make an anchor specific to the .pagenav?

  13. #13
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. You've proven that I still have some brushing up to do. :P Let's clarify that in General the code is read from top to bottom. There's still things about Parent Elements and Inheriting that I haven't fully grasped. (There's lots more about CSS I could learn.) My general rule of thumb is to try put my code with overall site rules at the top and more specific (such as what you were dealing with) element rules below - so's as not to take any chances of running into Parent inheriting issues that would only frustrate and confuse me if I failed to catch on.

    It's apparent that your issue was not an inheritance issue. Right? So I've learned something myself tonite. I've also been humbled and it's why I don't usually risk trying to help with such things, my knowledge is very rudimentary compared to some of the folks in these forums, and I make mistakes.

    So, given that caveat, I think your first question, about the .back_button code is answered. Yes?

    As for the second question, let me try to answer it this way:

    At first you had

    Code:
    .pagenav a.visited, .pagenav a:link {
    color: #000;
    text-decoration: none;
    }
    (By the way, that should have been "a(colon)visited", not "a(dot)visited".)


    In this format, the CSS is looking for any link within an element with the .pagenav class, not a link with the class name of .pagenav. I just dealt with this in the past week coding a site for a friend.

    Your links were written:
    Code:
    <a class="pagenav" href="etc">2</a>

    If instead you wrote your links as:
    Code:
    <span class="pagenav"><a href="etc">2</a></span>
    . . .in the same way you had written your "Start" and "Prev" fake buttons, you wouldn't have had to change the CSS.

    The way you ended up changing it, with "a.pagenav:link" etc, you were telling the CSS to look for links with the class name of .pagenav - which, of course, you have.

    So, yes, I think this is what you meant by "the correct way was to make an anchor specific to the .pagenav." As for calling the a:link / a:hover that was later in the CSS, it would have used that whether it was at the top of the CSS or at the bottom. If it hadn't been defined in the file, it would have used the browser's default definitions.

    I hope this makes sense, and is helpful to you. I really am just trying to help. (I'm up late and I probably shouldn't be. I'm not feeling well and sleep has been difficult.)

  14. #14
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wasn't trying to be a jerk or anything. I do appreciate the help. I know far less about CSS and HTML than you do. I just know a little bit here and there. And I am the kind of person who doesn't just want a quick solution, I also want to know the "why?"s as well so I learn something too.

    See, I had a similar problem a few months back, like I pointed out by posting a link to the other thread. If you scroll through my code, there is a sectionableentry1 and 2 that I was having a problem with. My site default anchors were the same colors as the backgrounds for those two objects. The solution, give them anchors for the formating. Although mine is messy, it worked.

    This was also the same for the .back_button. So I figured the solution would be the same for the .pagenav issue. I also picked up on the a, too, and slapped myself on the forehead.

    So essentially... my code originally for the .pagenav was working right? It's just the code read by the browser said "Ok.... .pagenav... let's see... oh, it uses the a:link and a:hover that's mentioned later on down here, so lets use that formating instead of the one listed in .pagenav" right?

    An .object a:whatever will achieve the desired results as long as there is no standalone anchor declaration later on. But an a.object:whatever will remain specific to that object. Would this be correct?

  15. #15
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DefStatic View Post
    So essentially... my code originally for the .pagenav was working right?
    Not really. The .pagenav styling itself was being applied to the anchors with the .pagenav class and then being overriden by the later styling.

    However, ".pagenav a:link" and ".pagenav a:visited" and such were not working at all. The browser was looking for anchors contained within a parent element with the .pagenav class. No such anchors existed, so those style rules were ignored.

    What you needed to use was "a.pagenav:link", "a.pagenav:visited", etc.

    Then the browser would search for and successfully find the links which have the class, .pagenav.


    Quote Originally Posted by DefStatic View Post
    An .object a:whatever will achieve the desired results as long as there is no standalone anchor declaration later on. But an a.object:whatever will remain specific to that object. Would this be correct?
    Well, no as ValerieM explained.

    Let's say you have the following html...

    HTML Code:
    <div class="object"><a href="#">link</a></div>
    <a class="object" href="#">link</a>
    .object a:whatever would apply to the first link, but not the second.
    a.object:whatever would apply to the second link, but not the first.

  16. #16
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ValerieM View Post
    OK. You've proven that I still have some brushing up to do. :P Let's clarify that in General the code is read from top to bottom. There's still things about Parent Elements and Inheriting that I haven't fully grasped.
    As you may have already guessed, it sounds like specificity is involved here.


Bookmarks

Posting Permissions

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