SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Location
    Canada
    Posts
    16
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question CSS menu has unexpected border

    I've been using PureCSSMenus on a series of article pages on zodiac signs. I'm also using them on the index page for these and other articles. The menus are simple, one item and several sub-items.

    On the index page, they function beautifully. However, on the zodiac article pages, for some reason I'm getting a red(ish) dashed border around each sub-item. I cannot for the life of me figure out where it's getting them from.

    I have a global link style that turns red with a dashed red line when the link is hovered over, and I thought that's where it must be coming from. But when I tested it by changing the colour and border-bottom style of the hovered links, the CSS menu problem remains unchanged (still has the red dashed outline around each sub-item). It happens in Firefox, Chrome and IE, and only on the zodiac article pages (not on the index page). So it has to be coming from something in those pages somehow.

    Since this only shows up when I hover over the top item or the sub-items, Firebug is of limited help. Firebug does show the styles when I mouseover an item, but I can't see where it's coming from in the styles that are listed in the window.

    I even went back to PureCSSMenu and got some fresh code, but the problem is still there. (Here's a sample page that uses the new code.)

    I'm hoping that someone here can help me figure out where it's getting this dashed red border from, so that I can get it out of there. (Yes, I know the rest of the coding is a mess. Some day I'll do a spring cleaning of the site, but for now I must deal with only the problems.)

    I would post the code or CSS but since it could be coming from a few different style sheets, I didn't think it would make sense to dump a manuscript worth of code here. If posting any of the code or if further explanation will help, let me know and I'll do what I can.

    Many thanks in advance for any help with this!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Could you clarify where the issue is? I don't see any sub-items anywhere, so am not sure what you are referring to. Have you checked what browser this is happening in?

  3. #3
    SitePoint Member
    Join Date
    Aug 2009
    Location
    Canada
    Posts
    16
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph.m,

    Just mouseover where it says "Item #1" (on the sample page). The sub-items will drop down.

    Oh sorry! It's in the right column, about the second screenful down.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    OK, in your mainstyles.css folder at line 424 or thereabouts, remove this line in red:

    Code:
    ul ul {
    background: url("../images/edarrowred.gif") no-repeat left top;
    padding-left: 20px;
    margin-bottom: 2px;
    list-style-type: none;
    }

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The object causing the funny red marks is a misapplied background image.

    mainstyles.css (line 424)
    Code:
    ul ul {
        background: url("../images/edarrowred.gif") no-repeat left top;    /* this is the image */
        padding-left: 20px;
        margin-bottom: 2px;
        list-style-type: none;
    /*  font-family: tahoma,arial,helvetica,sans-serif; */
    /*  font-size: 10pt; */
    }
    It is being applied to the background of every unordered list. (It is probably supposed to be a list item marker.)

    Hope this helps.

    Off Topic:


    Checked just before posting and STILL got pipped!

  6. #6
    SitePoint Member
    Join Date
    Aug 2009
    Location
    Canada
    Posts
    16
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your help and suggestions, ralph.m and ronpat. However, it doesn't change the border around the dropdown menu list on those pages. :-(

    Yes, the use of a background image was deliberate because I found that just using the image as a list-style-image was shifting it up; the background-image makes it line up better. I might have gotten this idea through A List Apart or some other great site.

    In any case, it wouldn't make sense that this was the source of the problem, since the image is specified as no-repeat. It also wouldn't explain why the dropdown lists are fine on that one index page, but not on the zodiac sign article pages, even when I use exactly the same include-file for the article pages as is included on the index page. (I've done this now on the sample page.)

    Other ideas?

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by starhugger
    However, it doesn't change the border around the dropdown menu list on those pages. :-(
    The offending code is still there. Does your server do some kind of caching or something? Mainstyles.css line 424, still calling that red arrow image.

    In any case, it wouldn't make sense that this was the source of the problem, since the image is specified as no-repeat.
    Ah, but you override that no-repeat with
    ul.pureCssMenu ul {background-repeat: repeat;} on line 39.

    The image certainly goes away when, in my browser debugger, I uncheck the line 242 statement.

  8. #8
    SitePoint Member
    Join Date
    Aug 2009
    Location
    Canada
    Posts
    16
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh thank you!! And thank you also to Stomme poes for your reply. I didn't think about it picking up the image from the second tier of lists. I seem to be stuck using a different mainstyles just for those article pages, since I can't find a way to override the background image without messing up the dropdown list styles. However, IT WORKS! Thank you very much!

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    cake

  10. #10
    SitePoint Member
    Join Date
    Aug 2009
    Location
    Canada
    Posts
    16
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ...as in "piece of?"

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    as in "i want some" :P


Tags for this Thread

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
  •