color mismatch in dropdown list

Forums Forums Menus color mismatch in dropdown list

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1437
    kfer
    Member

    I’m using Arras theme 1.4.2 (http://www.arrastheme.com/) with PixoPoint Menu Plugin for my web/blog: http://bit.ly/8ZAGPO

    Below is the CSS that was generated at https://geek.hellyer.kiwi/products/suckerfish_css/
    It works fine on your page but there are issues with color of the text/background ong the dropdown lists – text is white on white background and #2E2A29 while in focus.

    #suckerfishnav {
        background:#2E2A29 repeat-x;
        font-size:14px;
        font-family:verdana,sans-serif;
        font-weight:bold;
        width:100%;
        }
    #suckerfishnav, #suckerfishnav ul {
        float:left;
        list-style:none;
        line-height:40px;
        padding:0;
        border:0px solid #aaa;
        margin:0;
        width:100%;
        }
    #suckerfishnav a {
        display:block;
        color:#ffffff;
        text-decoration:none;
        padding:0px 10px;
        }
    #suckerfishnav li {
        float:left;
        padding:0;
        }
    #suckerfishnav ul {
        position:absolute;
        left:-999em;
        height:auto;
        width:101px;
        font-weight:normal;
        margin:0;
        line-height:1;
        border:0;
        border-top:1px solid #666666;
        }
    #suckerfishnav li li {
        width:99px;
        border-bottom:1px solid #666666;
        border-left:1px solid #666666;
        border-right:1px solid #666666;
        font-weight:bold;
        font-family:helvetica,sans-serif;
        }
    #suckerfishnav li li a {
        padding:4px 10px;
        width:80px;
        font-size:12px;
        color:#fff;
        }
    #suckerfishnav li ul ul {
        margin:-21px 0 0 100px;
        }
    #suckerfishnav li li:hover {
        background:#fff;
        }
    #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
        color:#333;
        }
    #suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
        color:#2E2A29;
        }
    #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
        color:#fff;
        }
    #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
        left:-999em;
        }
    #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
        left:auto;
        background:#333;
        }
    #suckerfishnav li:hover, #suckerfishnav li.sfhover {
        background:#fff;
        }

    #8534
    Anonymous
    Member

    it’s an issue with your css:
    #suckerfishnav li li:hover {
        background:#fff;
        }
    change to any other color than white. Or change all of the li li declarations to color:#333 instead of #fff

    #8535
    Anonymous
    Member

    Actually, I’m having the exact same problem with Arras. Editing the colors in the Pixopoint CSS does nothing; I’ve changed the colors every way I know. It has to be something with the theme. I’ve tried looking in the header.php and the default.css and I can’t determine what the offending code is or what’s clashing. I don’t want to just start deleting code left and right.

    My site: http://www.audiosuede.com[/url:16iqv1z1%5D

    #8536

    I’m guessing there may be an !important declaration in the Arras theme CSS somewhere that is causing this glitch. !important will always over-ride the plugins CSS.

    #8537
    Anonymous
    Member

    But is it safe to delete the !Important! code? It seems like it’s marked "Important" for a reason.

    #8538

    No idea. That would take too long for me to figure out for you sorry. Perhaps try asking the Arras theme developer or sign up for our Premium Support service for more assistance (https://geek.hellyer.kiwi/services/premium-support/).

    In general there is no reason to be using !important declarations. They’re certainly not something you would commonly find in a theme as they generally just cause problems later on for end users (since they’re hard to override).

    #8539
    Anonymous
    Member

    Finally had to break down and experiment with it on my own found out that this code:

    "#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
        color:#FFFFFF;
        }"

    Was messing the whole thing up. Changed the color on THAT and it fixed the problem. If it’s not that one, it’s one of the code sequences around that one. The point is, that’s what the problem is.

    #8540

    Glad to hear you found a solution to your problem <img decoding=” title=”Smiley” />

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.