Item7548: The CSS margin definition of tab(JQTAB) headers need to take precedence.

ul.jqTabGroup li {margin: 0px 7px 0px 0px !important}

But the highlighted "!important" was removed since its revision 27914. As “ul.jqTabGroup li” definition is specifically for %JQTAB%, it needs to take precedence to avoid being overwritten by other CSS definition.

-- TWiki:Main/YaojunFei - 2014-09-02

Was there an issue with this change? I did that at Item7544 so that it is possible to have custom margin between tabs. Does that break anything? Custom margin is no longer possible since you reverted the change. Just trying to understand the impact.

-- TWiki:Main.PeterThoeny - 2014-09-02

"ul.jqTabGroup li" can be easily overwritten by other irrelevant definitions like "ul > li" or "ul li" etc. So adding "!<nop>important" can make sure margin definition specific to JQTAB's tab header takes precedence. But still other user can custom margin with the "!<nop>important" decoration like this "ul.jqTabGroup li {margin: ... !<nop>important}".

-- TWiki:Main.YaojunFei - 2014-09-03

I was not aware that the !important can be overloaded by another !important. Let me try this.

-- TWiki:Main.PeterThoeny - 2014-09-03

I checked, with static CSS it is possible to redefine a margin with !important. However, the JQTAB uses dynamic Javascript, and with Javascript it is not possible to redefine an !important.

Example at Item7544 that worked with previous code, e.g. before this Item7548 fix:

$(document).ready(function () {
  $("#demo .jqTabGroup li").eq(2).css("margin-left", "100px");
});

I tried this and it did not work:

$(document).ready(function () {
  $("#demo .jqTabGroup li").eq(2).css("margin-left", "100px !important");
});

I think it is better to avoid using !important where possible. See article http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/ describing the disadvantages of using it.

Instead of a very generic ul > li or ul li I recommend more specific like .someClass ul > li or #someID ul li. This negates the need of !important in the JQTAB. What do you think?

-- TWiki:Main.PeterThoeny - 2014-09-03

Yes, I agree. I'll roll back the changes.

-- TWiki:Main.YaojunFei - 2014-09-03

Changes to trunk and TWikiRelease06x00 branch were reverted.

-- TWiki:Main.YaojunFei - 2014-09-03

OK, thank you!

-- TWiki:Main.PeterThoeny - 2014-09-03

Shall we change margin's selector "ul.jqTabGroup li {margin: xxxx}" to "div.jqTabPane ul.jqTabGroup li"? Thus it has more specificity to JQTAB's tab header.

-- TWiki:Main.YaojunFei - 2014-09-03

In our customized skin, we're using an selector like ".someClass ui > li", which has same precedence as a selector "ul.jqTabGroup li". So the margin definition in "ul.jqTabGroup li" still can be overridden by ".someClass ui > li". To make sure ".someClass ui > li" is overridden, jquery-all.css has to have something more specific than "ul.jqTabGroup li". Hence "div.jqTabPane ul.jqTabGroup li" is necessary.

-- TWiki:Main.YaojunFei - 2014-09-03

OK, sounds good. Make sure to fix also jquery.tabpane.css, which is the master used to build jquery-all.css.

-- TWiki:Main.PeterThoeny - 2014-09-05

Thanks for your reminder, Peter. Now I made the same change to jquery.tabpane.css in both trunk and branch TWikiRelease06x00.

-- TWiki:Main.YaojunFei - 2014-09-09

Thanks Yaojun!

-- TWiki:Main.PeterThoeny - 2014-09-10