Results 1 to 7 of 7

Thread: Accordion Menu Squirley Display in Chrome & FF

  1. #1
    Join Date
    Jun 2009
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Accordion Menu Squirley Display in Chrome & FF

    Glossy Accordion Menu
    http://www.dynamicdrive.com/dynamici...enu-glossy.htm

    Regarding http://www.borderstogo.com/
    Everything looks fine in IE8, but both FF 3.6 and Chrome are showing some of the left navigation as if it has no CSS styles attached. And which ones look this way varies by browser and occasionally in the same browser on reload. Looking at the soruce code, it looks like all the tags and classes required are the same as for the menu items that display properly. What on earth is going on.

    I hope a new set of eyes can see something there that I must be staring right at and missing.

    the controling styles are at the bottom of http://www.borderstogo.com/css-edits.css


  2. #2
    Join Date
    Aug 2004
    Posts
    9,902
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Hmm I tried viewing your page in FF 3.6.8 and Chrome, reloaded the page a few times etc, and the menu looks consistent each time. Are you still experiencing the problem?
    DD Admin

  3. #3
    Join Date
    Jun 2009
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    Hmm I tried viewing your page in FF 3.6.8 and Chrome, reloaded the page a few times etc, and the menu looks consistent each time. Are you still experiencing the problem?
    Thanks for the feedback. I just tried both FF & Chrome. Both are showing exactly what the screen capture shows. I tried forced reloads 10 time in each. No change whatsoever. FF sees the problem with 3 links. Chrome shows it on 4, 2 of which FF also has trouble with. This is so weird.

    Jim

  4. #4
    Join Date
    Aug 2004
    Posts
    9,902
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Your .css file validates 100%, and I see no apparent errors in it. What OS are you using?
    DD Admin

  5. #5
    Join Date
    Jun 2009
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    Your .css file validates 100%, and I see no apparent errors in it. What OS are you using?
    Win XP.

    I best take a look at the XHTML. It's a Yahoo! Store and their back end is notorious for relatively benign XHTML errors. Maybe there is something in the HTML tags that's fooling the browser about where a tag ends.

  6. #6
    Join Date
    Jun 2009
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Just in case anyone else ever runs into this strangeness, I found the cause today and it is now displaying perfectly in FF and Chrome even for my finicky display. It was actually down inside a comment in the CSS.
    Code:
    .glossymenu a.lonely:link {
        background-color: #ffc;
        font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
        color: #d00;
        display: block;
        position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
        width: auto;
        padding: 4px 0;
        padding-left: 6px;
        text-decoration: none;
        border-bottom: 1px solid #cc9;
    }
    I noticed in viewing the CSS in Firebug that its parsing engine was seeing the quoted style class in the comment on the "position: relative;" line of code as a start of a new class statement.
    I changed it to:
    Code:
    .glossymenu a.lonely:link {
        background-color: #ffc;
        font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
        color: #d00;
        display: block;
        position: relative; /*To help in the anchoring of the statusicon class icon image*/
        width: auto;
        padding: 4px 0;
        padding-left: 6px;
        text-decoration: none;
        border-bottom: 1px solid #cc9;
    }
    And now it behaves just fine. Just thought after all the eyeball hours others spent checking this for me, I'd pass on the ultimate triumph. The devil's always in the details.
    Last edited by ETpro; 09-19-2010 at 12:59 AM.

  7. #7
    Join Date
    Aug 2004
    Posts
    9,902
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Congrats on finding the culprit, and thanks for sharing your findings.
    DD Admin

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
  •