SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Menu styles only apply to SOME of the menu items

    I'm trying to update a rather old web site (first created in 2004, so there are some bits left over from another age - like tables...)

    The menu has a problem that unless the mouse is moved very accurately, the flyout submenus disappear quickly. So I tried to make a superfish menu, where I can delay the flyouts disappearing a little bit.

    Then I started to style things and change the text color and background color, and weirdness started happening.

    When a flyout submenu appears, only SOME of the links are the designated color!
    When I changed the background color, only SOME parts of the flyout had the new color

    http://www.thehamblintrust.org.uk/index-preview.html - only this page has the new weird menu, others have the old one.

    The bit that I added, under demo skin section, that is causing the problems is this. Looks harmless doesn't it?

    .sf-menu li li a{
    color:#fff;
    background-image:url(); /* removes image used for top level of menu */
    border-radius:0;
    background-color:red;
    }

    The red background is just there as a quick demo of the problem.

    You see the error by mousing over the main menu items and working your way down the main menu, watching the submenus. (Magazine has a sub-sub menu, same problem there too)

    Any geniuses know how to sort this???
    This is a charity group, and it's lucky I'm not charging for this !

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I'm looking at it in Firefox and do not see any problems with the rendering of the flyouts. What browser are you using, please?

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OOH I am soooo stupid - It's the visited link color - I didn't get round to changing that as well, so you see it correctly as a new visitor. I changed browser and got a different "wrong" set of colors as I accidentally clicked a link in the flyout. Thanks for making me try another browser.

    I was trying to avoid changing too much at a time to avoid having to undo too many bits if I didn't like the result. Time to get rid of that garish red and find a nicer color.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Is the problem resolved or is it still active? If still visible, please describe it again. I see that the red color is gone and do not see a difference between new and visited links in the submenus. If the colors should be different, please identify the colors. I notice that suckerfish.css has two background colors in this selector. Only the second one is applied, of course, and maybe this has nothing to do with the issue, but I thought it worth mentioning. This is the only :visited color in this file.
    Code:
    .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    	color:			#333;
    	background-color: #3586AE;
    	background-color:#E6E6FA;
    	padding: 0em 0em 0.1em 0.5em;
    	background-image: url(images/grad.gif);
    	background-repeat:repeat-x;
    	border-bottom:3px solid #3586AE;
    	-webkit-border-radius: 10px;
    	   -moz-border-radius: 10px;
    	        border-radius: 10px;
    /* margin-bottom:15px; a margin here means li picks up link background colour  - sometimes good, sometimes not. either this or the one below, not both, have this padding  */
    Note, because the menu is created entirely with JavaScript, persons who browse without JavaScript enabled cannot use the site. There is no fallback.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Oops. Yes, there IS a fallback. A sitemap is available.

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, resolved when I spotted the visited color had not been edited.

    two background-colors - when I'm not sure if one color is better than the current one, I often put the alternative immediately below the existing one rather than comment it out, then delete either the new line or old line when I've decided which I prefer. Just forgot to delete the old line as I had to rush off for the weekend to do some flying. I'll get rid of the unneeded line now. I used the red because it was more obviously wrong than the two shades of blue.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Dr John View Post
    Yes, resolved when I spotted the visited color had not been edited.

    two background-colors - when I'm not sure if one color is better than the current one, I often put the alternative immediately below the existing one rather than comment it out, then delete either the new line or old line when I've decided which I prefer.
    Yes, I often do the same thing, too.

    Thanks very much for the feedback. Glad you spotted the problem.

    Safe landings!


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
  •