Accordion Menu Squirley Display in Chrome & FF

[ETpro]

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

[ddadmin]

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?

[ETpro]

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

[ddadmin]

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

[ETpro]

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.

[ETpro]

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.

.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:

.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.

[ddadmin]

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