How do I increase the top and bottom padding and change the background?

Posted on 2012-08-13
Last Modified: 2012-08-13
I have a site here:

and I need to make the answers to the faq have more space above and below the answer and to change the background to a light yellow similar to the attached image.

Any help would be most appreciated.
Question by:Donnie Walker
    LVL 13

    Expert Comment

    you can modify your CSS so the padding at the top is set to what you need it to be:

    Without being able to see your code, I'm not sure where to put the padding info (there could be multiple CSS files).

    Here's the CSS for background colors:
    LVL 50

    Expert Comment

    by:Julian Hansen
    1. On your containing div remove the overflow: hidden and the height: 32px;
    2. Createa style for your <td> elements that contain the answer add the following style

       background: #ffffaa;
       padding: 15px 10px;

    The height of the expanded panel seems to be set by the jpan-slider - so you might not have to remove the height / overflow: hidden;
    LVL 42

    Accepted Solution

    Add this to your stylesheet.

    .contentpaneopen td {
        background-color: #FFF38C;
        padding: 30px;

    Open in new window


    Author Comment

    by:Donnie Walker
    That is very close Chris. There is still some sort of padding or margin on the outside of the contentpaneopen element.

    Author Closing Comment

    by:Donnie Walker
    LVL 42

    Expert Comment

    by:Chris Stanyon
    The padding (10px) is added from your panel.css file (line 6):

    .pane-sliders .moofaq-content { padding:10px; }

    Change it or remove it to alter the left and right padding.

    Author Comment

    by:Donnie Walker
    thanks again!

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now