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 Matt,

Sorry to bother you again. But I still have the issue. Any ideas? I’m thinking that maybe I will just get rid of the bullet points completely, but it will make the rest of the site harder to do. Any help you could give would be great. Even changing the colour maybe?

Thanks

Koz

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?

Hi Matt,

Sorry to bother you yet again… It looks like IE isn’t rendering anything the way I would like it too. I think I have a conflict of a couple of plugins, so it’s not calling your plugin at all.
BUT if you use Mozilla or Chrome the site is: eMoney Dev

Thanks again

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;
}

YOU SIR — ARE AMAZING!!! THANK YOU THANK YOU THANK YOU!!!

I can not thank you enough!!!

Koz