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

Question

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.

Answer 1

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.