[resolved] CSS conflict with tabs plugin (4 posts)

  1. arsenaljairs
    Posted 2 years ago #

    Hi guys,
    I'm having problems with a plugin on my page because there is a conflict with CSS in the theme. What's happening is that there are bullet points appearing in the tab headers and the headers overlap the first line of text in the body. I have posted to the plugin forum and was directed here.

    I'm using a child theme and the plugin is called WordPress Post Tabs. The page in question can be found here: http://www.theartillery.us/packages

    Any help would be greatly appreciated.

  2. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    The bullet point isn't really a conflict as it's different CSS. The Spun theme uses the :before selector to apply bullet points and to remove them add this CSS:

    ul li:before {
     content: "";
  3. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    The overlap issue is actually to do with the tabs plugin; it's not using the best CSS. It's setting a height on your tab header of 32px, meaning regardless of how large the text size is, or how many words there are, it will not change from being 32px tall.

    Change it:

    .wordpress-post-tabs-skin-default .ui-tabs .ui-tabs-nav li.ui-corner-top,
    .wordpress-post-tabs-skin-default .ui-tabs-horizontal-top .wpts_ext {
     height: auto;
  4. arsenaljairs
    Posted 2 years ago #

    Andrew, you nailed it!!
    Thank you for your quick and accurate response. You have made my day!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic