Problem with CSS Drop Shadow in IE

I'm having trouble with a CSS style I found on A List Apart tutorial. It's a basic div style that puts a drop-shadow image behind a div. I copied
the script exactly and I think I've implemented it right. It works perfectly on Firefox but not so well on Internet Explorer. The top part of the div is being cutoff. I'm usually rather proficient with these sorts of problems but this
time...

The basic style is...

.p-shadow div {
background: none !important;
background: url(http://coffeeandcassettes.fatcow.com/layout/
shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0px 6px 6px 0px;
}

.p-shadow p {
color: #777;
background-color: #fff;
font: 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -0.38em 0.38em 0.38em -0.38em !important;
margin: 0;
}

The HTML is just the simple:

<div class="p-shadow"><p>Some Text Here</p></div>

You can see it used at my page: http://www.coffeeandcassettes.com

My page is run with Blogger, I don't know if that's a factor. Any
ideas?

From what I can tell all you need to do is change your top margin on .p-shadow p and make the margin-top:0px;

That seemed to solve the issue on my end in FF and IE7

Perfect, thank you! I don't know why I couldn't have figured that out. I was confused by there being two different margin properties. the margin: 0; and the margin: -0.38em 0.38em 0.38em -0.38em !important;. I changed it to margin: 0 0.38em 0.38em -0.38em !important; and it worked just like you said.

Thank you very much.

For future, having the two margins was really doing nothing. You just need to remember precedence:

div {margin:0px; margin:1px;}

Since the 1px margin is second, the div will have a 1px margin. But if we make the first one margin:0px !important, then the 0px margin is more 'important' than the 1px one so you end up with a 0px margin.

So for your code you don't need the duplicate margins (or paddings)