Bullet Points

Hi Koz,

It seems that the last release was missing some new code which makes styling things easier. I’m putting a new release together and it should be available shortly. Once it’s rolled out you’ll be able to do something like:

.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav {
    list-style-type: none;
}

Hi Koz,

I need some more information.

I’ve had a look at the page you’ve linked to and can’t see any tabs on there. I tried pasting some tabs HTML onto the page in Chrome to see what happens with your styles and the tabs seemed to render without any bullet points, they looked fine.

In your CSS you have

.squelch-taas-tab {
    list-style-type: none !important;
}

This is not an ideal way to apply this style as it’s impossible to override an !important declaration if you find you need an exception at some point in the future. It is better to use specificity to create rules, which is why the .squelch-taas-override class exists:

.squelch-taas-override .squelch-taas-tab {
    list-style-type: none;
}

Also while that style gets applied it’s not necessary as you’re using the jQuery base styles which already remove bullet points from tabs, so removing it does not break the rendering of your tabs.

In your custom CSS you also have this:

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    /* plus some other styles */
}

Again, if this is just for styling your Squelch tabs then this would be better written as:

.squelch-taas-override.ui-tabs .ui-tabs-nav li {
    list-style: none;
    /* plus some other styles */
}

But, again, you shouldn’t need to do list-style: none as the jQuery UI base styles already do this in .ui-helper-reset, and you’ve already applied this rule with the styles shown above.

Could you perhaps send me a link to a page that exhibits the problem?

OK, so you’re using custom bullet points, not normal bullet points, and so the offending style is:

.cpd-postcontent ul>li:before, .cpd-post ul>li:before, .cpd-textblock ul>li:before {
   content:url('images/postbullets.png');
   margin-right:6px;
   bottom: 2px;
   position:relative;
   display:inline-block;
   vertical-align:middle;
   font-size:0;
   line-height:0;
}

You’re adding additional content to the page before all li items. Using specificity we can turn this off again, change this:

.squelch-taas-override .squelch-taas-tab {
    list-style-type: none;
}

to this:

.squelch-taas-override .squelch-taas-tab:before {
    content: none;
}