Support » Theme: Spun » CSS conflict with tabs plugin

  • Resolved arsenaljairs

    (@arsenaljairs)


    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.
    Thanks!

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

    (@anevins)

    Forum moderator

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    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.