CSS conflict with tabs plugin

  • Resolved arsenaljairs

    (@arsenaljairs)


    11 years, 2 months 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: https://www.theartillery.us/packages

    Any help would be greatly appreciated.
    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter arsenaljairs

    (@arsenaljairs)

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS conflict with tabs plugin’ is closed to new replies.