tab outline issues

I’ve seen this before with some of the older Genesis child themes.

The stylesheet of your theme is overriding the rules in the tabby stylesheet so the padding values do not take effect. The #content ID seem to be the culprit eg

#content .post ul, #content .page ul {
	list-style-type: square;
	margin: 0;
	padding: 0 0 15px 0;
	}

#content .post ul li, #content .page ul li {
	list-style-type: square;
	margin: 0 0 0 20px;
	padding: 0;
	}

To remedy this you can replace the tabby stylesheet as described in the plugin’s documentation and edit the rules to increase the specificity.

Adding #content to the rules that are not taking effect should do it.

eg:

#content .responsive-tabs .responsive-tabs__list {
	font-size: 18px;
	line-height: 18px;
	margin: 20px 0 10px 0;
	padding-bottom:0;
}

#content .responsive-tabs .responsive-tabs__list__item {
	border: 1px solid transparent;
	border-bottom: none;
	line-height: 1;
	margin: 0 14px 0 0;
	padding: 10px 20px;
}

Some other rules will probably also need similar tweakage.

Thanks for the quick response. I am following along pretty well with what you are saying. Just need to know exactly where I should add this code – where are the copy of the rules?

Thanks.

you’ll find the original tabby rules in the tabby.css file in the plugin. Your edited version can be added to your child theme’s stylesheet or plugin that allows custom css rules to be added.

if you are using customised styles like this, the original styles in the plugin are no longer needed and you should prevent this stylesheet from loading by adding to your child theme’s functions.php

<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>