Why is using a Spry menu killing my <p> tags?

In reference to my testing site's page:

http://thepfjstudios.com.au/testing/content/NewAbout.php

I have a Spry menu on the left side, that when is being used, seems to kill the <p> tags in the content section on the right side.

The .css file used is:

http://thepfjstudios.com.au/testing/SpryAssets/SpryMenuBarVertical.css

and the .js file is in the same folder but is SpryMenuBar.js

I've been playing with this for 2 days now and can't figure out why there is no longer a space between paragraphs in the content section on the right side. If I don't use the Spry menu, the content section shows just fine.

I would post code here but all 3 pages are relevant to this question and would take up a very large space.

Solution

SpryMenuBarVertical.css on 12 line defines:

* { margin:0; padding:0}

margin:0 is affecting your paragraphs. I suggest that you delete that line and adjust the menu's styles to suit your needs.

Edit: I think I should tell you how I figured it out in case you encounter a similar problem in the future. Here are steps for Google Chrome, and it should be similar in other browsers.

Right click on the affected element (in this case, any of the paragraphs).
Select Inspect Element.
Under the Styles tab, you can see all styles that do or would apply to the element. Try unchecking some of them to see what they do.
Under the Computed tab, you can see what styles the element is using.