Problem with IE8: p elements have a padding/margin that wont go away!

I am trying to fix an issue only to do with IE8, not any other version of IE or Firefox etc.

Edit An example of my problem can be seen here http://kazcare.com/kamaleiexample/learningEnvironment.html

A paragraph element has a margin or padding on top that wont go away. Please dont 开发者_运维技巧say use inline css because I have tried that & it doesn't change it.

You see if I do this

<p class="subHeading" style="margin: 0; padding: 0;">Our Philosophy</p>

The top margin/padding shows only on IE8 when there shd be none. Note: the p element is nested inside a element with the class pageBoxContent that does set the margin-top.

My css:

.pageBoxContent p { font-family:Calibri, "Myriad Pro", Serif; margin: 0; margin-top: 10px; }
.subHeading { color: #6D4F9B; font-weight: bold; padding-bottom: 0px; margin-bottom: 10px;  margin-top: 0; }

On the website in the code you have written <b class="subheading"> not <p class="subheading">. Try replacing the b with a p.

The extra margin problem is actually the image you used as the container's top. Located inside .mainPageBox and above .pageBoxContent. The white space above the subheading is actually part of the image.

<img alt="" src="images/pageBoxTop.png" style="margin: 0; padding: 0;" class="pageBoxTop">