Trying to integrate the JQuery UI accordion into my JQuery UI modal dialog has been causing some alignment issues. Despite following code examples found online, such as http://jsfiddle.net/eKb8J/, I suspect that the problem lies in CSS styling.
My setup includes JQuery UI 1.8.7 and JQuery 1.7.2.
The Issue: The arrow and header vertical bar within the accordion are not properly aligned with the header, resulting in a messy appearance. Ideally, I would like them all to be on the same line. A screenshot of the problem can be viewed here: https://i.sstatic.net/rpn1H.png
Any assistance in resolving this issue would be greatly appreciated!
Upon inspecting the elements using FireFox's Ctrl-Shift-I, I noticed: The CSS styles affecting the accordion element: https://i.sstatic.net/DCpSe.png The CSS properties applied to the header element within the accordion: https://i.sstatic.net/iD2tM.png