jQuery Forum

in view source I  see all navbar items have same data-icon

Poonkave, when you mention the classes hardcoded to ID's, you're talking about this?

#programas .ui-icon-estrellanav {
    background-image: url(images/nav.png);
    background-position: 0 0;
    background-repeat: no-repeat;
}

Because that idea came from examples like this one and this one straight from JQuery itself. That's why it's so unusual that this bug is transpiring. How do you suggest I write the CSS for each button? Or should I change the HTML a bit?

That fiddle is wrong, and the doc page you reference does not use IDs.

Use classes instead of IDs.

Let me see if I have this correct. Instead of:

<li><a href="#programas" id="programas" data-icon="estrellanav">Programas</a></li>

do

<li><a href="#programas" class="programas" data-icon="estrellanav">Programas</a></li>

BTW, I just checked and the Glypish example, does in fact, use ID's. Unless we're looking at two different places on that page. There's a ton of example there.

BTW, I just checked and the Glypish example, does in fact, use ID's

Indeed, it does. It's still wrong.

It isn't documented as the proper way to do things, though. It will only work reliably with IDs if those IDs are used on one and only one element on one and only one page of the site.

As long as those same IDs are not used anywhere else on the JQM demo site (and I suspect that's the case) then technically it's correct. But it's poor practice.

In your case, since you do duplicate that navbar on multiple pages, it will not work in certain browsers. There is no guarantee as to how a given browser will handle the case of multiple elements with the same ID, because that is not valid HTML and the specification does not say how to handle this situation. So, there is no consistency between browsers.

Interesting. Now it does make sense. You're right, I'm using the code on multiple places on the site. Which might explain things a lot better. Pity they don't really explain that we should only use it once. That's very misleading.

I did do a version where I simply embedded a PNG in a img src tag for each of the five LI elements. Probably not the best practice, but it does work. Are there any examples of how to really properly do this?