Post UI Tabs
[resolved] How to remove the giant blank space between a text and tabs ? (8 posts)

  1. Aphrodite
    Posted 4 years ago #

    Hi !

    Great one indeed !

    Just a problem. There is a very big blank space between text and tabs on resulting site. That is not good and cannot suppress it. There is no p or br in the post code and the tabs a really too far from header text. How to solve this (using redmond style)


  2. Mark / t31os

    Plugin Author

    Posted 4 years ago #

    Can you link me to a problem page?

    If not, my guess would be the theme styling(CSS rules) conflicting with the tab elements. If i could see a page i could probably narrow it down specifically to a rule or two and offer some suggestions on tweaking the CSS so it doesn't mess with the tabs.

    And thanks the feedback. :)

  3. Aphrodite
    Posted 4 years ago #

    Hi !

    yep :

    http://ibc-maroc.com/offre-de-service/pilotage and all post where are tabs EXEPT this one :


    No idea on why, the code is exactly the same (I copy/paste from this one to do the others...)

    Thanks :)

  4. Mark / t31os

    Plugin Author

    Posted 4 years ago #

    What space are you referring to? Can you screenshot the tabs and use paint or similar to indicate specifically which area of spacing you're having a problem with, please.


  5. Aphrodite
    Posted 4 years ago #

  6. Mark / t31os

    Plugin Author

    Posted 4 years ago #


    The amount space looks the same on my screen for both the first two links.

    The second however isn't anything to do with the plugin as far as i can tell, i don't output any spans or breaks for the tabs, and only paragraphs inside the tabs.

    Screenshot of mysterious paragraphs with span and breaks

    My plugin's code, specifically the two functions that produce HTML output for the tabs.

    I'd have to guess/assume this is something to do with what you're putting into the editor, and/or something another plugin you have installed is adding.

    Could you create a test post and put the following in the editor please.

    Line of text 1
    [tab name="Tab name 1"]Tab 1[/tab]
    [tab name="Tab name 2"]Tab 2[/tab]
    Line of text 2

    Save it, and provide a link to the test post please.

  7. fawkesblog2
    Posted 4 years ago #

    I changed the spacing as you can see here http://www.chrisfawkes.net

    I went to the postabs/style.php and scrolling down to ul.postTabs li i changed display inline to float left.

    I then wend down to ul.postTabs li a and changed my padding to padding: 0.2em 0.7em

    The first of those being the vertical padding and the second being the horizontal padding. I originally had the horizontal padding at 0.9 which looked great in chrome but in firefox put my tabs onto a second line (i have nine tabs) so adjusted to 0.7em so it looked right in ff too.

    Remember to make a copy of your original code before saving any changes.

  8. fawkesblog2
    Posted 4 years ago #

    When you change display inline in the ul.postTabs li you will also notice font size. If you only have a few tabs you can make the font size larger too.

    Under that same block of code you will note you can now manually change your padding between tabs too. I have mine set to 0.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Post UI Tabs
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic