Active 'New Index' Link Styling Issue

danp / 2013-10-04 10:30:36   

Hi,

I've been unable to style my index links (index links in the menu that redirect to an exhibit) so when active they become light grey in color. On hover they correctly change to grey, but when active they return to black. My exhibit links do not have this problem and hold grey when active and on hover. After much trail and error I've been unable so resolve this seemingly easy styling. Would someone mind taking a look at my code and point out where and what I've overlooked in the css? Any help is appreciated!

My site is: danielpritchett.com

Vaska A / 2013-10-04 12:17:00   

indexhibit.org/forum/thread/19302/

Does this help? ;)

danp / 2013-10-09 17:50:01   

Hi Vaska, I've taken a look at that link before and have done some coding with it. I'll try again and let you know what I work out. Thanks for the quick reply. I'll reply hopefully early next week. Best!

Skaatar / 2013-10-09 19:46:02   

I had this problem too.
Then, I solved by looking at the order of things.

( please correct me Vaska & co )

1) in my case, I believe the general colour coding was overriding the active-link style because it was positioned BEFORE in the style.css

2) I also changed the order of link styles according to the LoVe-HAte rule.
That is, LoVe-HAte means link, visited, hover, active
Written in that order (from top to bottom in the style.css) will take care of hierarchy problems and thus make everytjhing work.

Hope that helps. It worked for me.

danp / 2013-11-09 19:10:34   

Skaatar,

Thanks for the lead. I made changes to my codes hierarchy, but no change. Still looking at how or where I'm fouling up here. Sent a reply to your original post on the issue.

danp / 2013-11-09 19:22:29   

Vaska,

I took a look at your help link and did some trial and error, but still no change. I can't seem to pinpoint where my code needs to be edited or if it is overriding itself. I was able to control my text logo with a:active using #logo. I've also validated my css code to 0 errors via W3C if the problem laid there.

Is there a # for class 'exhibit_title exhibit_link' that should be added to my code? Can you sense what I'm overlooking?

arsondpi / 2013-11-10 13:44:41   

Hello - what is your url so we can take a look?

danp / 2013-11-10 23:22:09   

danielpritchett.com

arsondpi / 2013-11-11 08:11:19   

there's many ways to do this - vaska posted a good link above.

  1. #index ul li.active a {text-decoration: underline; }

or

  1. #index ul li.active {text-decoration: underline; }

will underline the text of the link or the list item.
Hope this gives you a headstart

danp / 2013-11-12 11:40:52   

Yes, that is the correct code for active exhibit links. I'm wanting the same effect for index links (the links that forward to an exhibit). In my sections I have both exhibit and index links. The Goorin Bros. link under Retail Design is an example of an index link on my site.

Is there another code I could try for editing only index links? Why wouldn't the /* link scheme */ code take care of this? Every :active in my code is set to color #999 so I'm not sure when I'm going wrong. Is it clear the issue I'm describing? Thanks again for your help.

arsondpi / 2013-11-12 14:51:12   

:active is a pseudo-class and is a different active state as to the one you're looking for.
I don't think there's an active class added to an exhibit link though. Odd.

* you might also want to check the html in your prenav area: validator.w3.org/…
Also try using lower capitals for your folders and webfonts - your font may not load properly because of that

danp / 2013-11-13 09:54:52   

Arsondpi,

Thanks for the help. I deleted my Pre- and Post-Nav code with no effect on correcting the issue with active index links. I may end up duplicating those pages for the menu and main page. I have a feeling the issue lays within how my exhibits are organized.

Were my web fonts not loading properly? I've had trouble with that due to Firefox and other browsers do not allowing full access to off-site font servers, something like that. There's a lot of discussion about it. My fonts were loading very slowly, took several clicks into the site it would start working. Yesterday I found a code to add to the .htaccess and it seems to have corrected issue.

Was thinking of starting a thread about the grey and black lines found due to div gaps and scaling when Indexhibit sites are viewed on the iPad, specifically around the menu areas. Not sure if I'm the only one who has had that problem or not. Apparently they are called "line artifacts".

arsondpi / 2013-11-13 12:09:29   

The html errors are irrelevant to the active class of your exhibit links.
Indeed in Firefox when I first load the site the fonts won't load properly - I need to click on another exhibit to make it work. As I suggested try renaming your font folders and css style files with lower case letters and see if it works better.

As for the new issue concerning the line next to the index, it has already been spotted.
Vaska suggested a solution already but I don't know if it corrects this: indexhibit.org/forum/thread/20003/

danp / 2013-11-18 18:56:37   

Arsondpi. Thanks again for your help. I uploaded a revised font webkit that is suppose to take care of the FireFox issue. I've resolved the active link hold issue by creating separate exhibits for the main page. The only issue left that I'd like to resolve is the vertical line when the site is viewed on the iPad. I cannot seem to solve it and am going to start a new thread. Thanks again for all your help and tips.

This thread has been closed, thank you.