Home/ Questions/Q 6669543
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:09:45+00:00

I’ve inherited an ASP website with some JQuery-UI on the front end, which does

  • 0

I’ve inherited an ASP website with some JQuery-UI on the front end, which does the tabs and menus. It works fine; the only glitch is the tabs are appearing strangely on Firefox.

The tabs are added when the user clicks on a Superfish menu. The tabs appear fine, but there’s a bit of markup added to add a “X” (close) icon to the right of the tab. On IE and Webkit (Chrome, Safari etc), the tabs appear like:

|---------|
|        x|
|Tabname  |
|---------|

However, on Firefox, it looks like:

|---------|
|         |
|Tabname  |
|x        |
|---------|

I don’t know that much about JQuery, but I’ve tried playing around with the markup but can’t get the “Close” icon to appear in the top right on Firefox as it does for every other browser.

The relevant part of the code (ie if I take this out the “close” icons disappear 🙂 ) looks like:

  var $tabs = $('#tabs').tabs({
            tabTemplate: '<li class="close" align=left><a  href="#{href}">#{label}</a><span  class="ui-icon ui-icon-close" ></span></li>',
          });

Can anyone help me figure out what’s going on here? If it’s relevant, it’s JQuery-1.4.2.min.js and JQuery-ui-1.8.4.min.js that’s being used.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You may be interested in http://bugs.jqueryui.com/ticket/5603
    It seems to be same issue reported as a jquery ui bug. It’s planned to be fixed in 1.9 version of jquery ui and you may find some possible workarounds by this link.

    For instance, on page http://jqueryui.com/demos/tabs/#manipulation you may find the following workaround (which working well in FF):

    #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
    • 0