WordPress.org

1. rawarrior
   Member
   Posted 1 year ago #
   

   Hover effects (background highlights or color changes) have quit working for Category titles and Category post links in the sidebar, although CSS was not changed.

   We've tried everything we can think of. The links work fine and the "titles" appear (which are in the HTML). But no visual effects from the CSS work.

   Oddly, if I re-name the ID as a class, it causes the links to underline like the rest of the sidebar, but still will not call up any CSS.

   Could our recent WP upgrade be the reason?
   I'd appreciate any advice about this.
   Thank you.
   http://rawarrior.com

2. WPyogi
   Volunteer Moderator
   Posted 1 year ago #
   

   Hey Kelly,
   I'm not clear on what isn't working. The nav bar links DO change on hover in Firefox 11.0 on a Mac OS 10.7.3. On the home page, there is not a sidebar with links, is there? On other pages, the links there DO change as well on hover.

   What browser are they not working in?

   Have you tried validating the pages? If there are CSS or markup errors, that may affect some browsers and not others. I checked a couple of your pages and there are a lot of errors -- some may be important and others not so much (due to various technical things having to do with changing code standards, etc.). Sorry to add to your workload with this, but it's actually fairly important when you are working on websites.

   Nice site, BTW...content too. You are obviously one tough and lovely person.

3. rawarrior
   Member
   Posted 1 year ago #
   

   Thank you for your reply & nice words. Yes, we have validated previously, but not since recent updates.

   I'm sorry I was unclear. The top nav menus are working fine. The 5 sidebar categories which bring up random posts begin with Don't Miss This. The are currently hovering red with underline as I described since I left the .categorybox in the div for now so readers can at least see that they are links. It is supposed to be ID=categorybox so that the CSS will show. My CSS for that is here:

   #categorybox ul li {
            padding-left: 8px;
            padding-right: 4px;
            padding-bottom: 4px;
            padding-top: 2px;
            line-height: 14px;
   	text-align: left;
   }
   #categorybox ul li a:hover {
            background: #f7ea93;
            	color: #302301;
            display: block;
   }
   #categorybox ul li h3 a:hover {
            background: none;
            color: #aa4817;
   }

   It shows nothing at all now, but it worked great before, showing a background highlight hover on the posts, and a color change on the category links themselves.

   Also I do have the same sidebar on every page except for my new archives page. We are getting the same responses with our 3 machines (one is a Mac) over 4 browsers.

4. rawarrior
   Member
   Posted 1 year ago #
   

   <div style="clear:both"></div>
   <div id="categorybox"><ul>
   <li><h3><a href="http://rawarrior.com/category/best-posts-on-rheumatoid-arthritis-warrior/" title="Click to see entire category!" alt="Click to see entire category!">Don't miss this!</a></h3></li>
   <?php    query_posts('category_name=best posts on rheumatoid arthritis warrior&showposts=4&orderby=rand');    while (have_posts()) :       the_post(); ?>    <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?> <!-- <?php comments_number('0', '1', '%'); ?> --> </a></li> <?php    endwhile; ?>

   I've put it back as this while my question is open for now. Readers will be ok. Thanks to anyone who takes a look.

5. SNSD Photo
   Member
   Posted 1 year ago #
   

   in your old post, you are styling for ID not class #categorybox

   in your post above, in the code, it is using ID <div id="categorybox">

   but in your site, using class not ID <div class="categorybox">

6. WPyogi
   Volunteer Moderator
   Posted 1 year ago #
   

   Okay, I do see the hover -> underline red.

   On the home page, you have 64 mark-up errors -- a bunch of which are because of improperly coded lists -- i.e. you are missing ul tags or li tags or something else like that. So fixing those errors will probably fix the CSS problem -- as the CSS is defined using certain tags -- so when the tags are missing, the CSS does not apply correctly.

   Also, categorybox is a CLASS in the page code -- so it has to be a class in the CSS -- meaning use .categorybox not #categorybox.

   ID's can only be used ONCE on a page -- classes can be used multiple times. So class is what you want in this case.

   Hope that helps -- if you need more help on the errors, post back.

7. rawarrior
   Member
   Posted 1 year ago #
   

   Thank you. I had saved it as id just as I posted here, but it did not save. I re-saved and then removed a few spaces from code being pasted back in from a text editor. It's now working properly in IE. I'll see if I can find the errors you mention.

Topic Closed

This topic has been closed to new replies.