The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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.

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.

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.

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.

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?

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?

(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.)

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?

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.

Originally Posted by DefStatic

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?

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.