1

Why is there a giant white space in the middle of my accordion content?

This is how I have my .css, and it works completely with the exception of the white space in the middle.

#accordion .ui-accordion-content {
    background-color: #dcaf4d;
    color: #42dc86;
    font-size: 12pt;
}

Here is an example of the white space:

http://jsfiddle.net/bQ5Gd/5/

And before you ask, What is causing this white box inside my Jquery Accordion? does not solve the problem.

2 Answers 2

6

It's caused by this:

.ui-widget-content {
  border: 1px solid #AAA/*{borderColorContent}*/;
  background: #FFF/*{bgColorContent} url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
}

It's in the jquery-ui.css file around line 246.

An alternative is to change your own CSS. Try changing this:

#accordion .ui-accordion-content {
    background-color: #777;
}

to this:

#accordion .ui-accordion-content {
    background: #777;
}
9
  • ? I do not have that in my code, nor is it in the fiddle posted above.
    – Evorlor
    Commented Feb 4, 2014 at 2:23
  • I am using my jquery like this: <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> How would i go about fixing that?
    – Evorlor
    Commented Feb 4, 2014 at 2:24
  • It's in the jquery-us.css file, and it does appear in your fiddle. Open your web inspector on that accordion box and you'll see it. :-)
    – ralph.m
    Commented Feb 4, 2014 at 2:24
  • Thank you for finding the problem. Any ideas on a fix?
    – Evorlor
    Commented Feb 4, 2014 at 2:24
  • You could either dig into the jquery-ui.css file and make a change, or override it in your own style sheet.
    – ralph.m
    Commented Feb 4, 2014 at 2:25
2

It is because the default background is assigned by an background image so setting it to none should solve it

#accordion .ui-accordion-content {
    background-image: none;
    width: 100%;
    background-color: #777;
    color: #000;
    border: none;
    font-size: 10pt;
    line-height: 15pt;
}

Demo: Fiddle

2
  • BAM! IOU one Arun! Too easy! Just added background-image: none; and everything is perfect! Thanks!
    – Evorlor
    Commented Feb 4, 2014 at 2:30
  • actually decided to use ralph's fix of removing -color. Thanks tho!!
    – Evorlor
    Commented Feb 4, 2014 at 2:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.