Text padding issues between FF and IE7

[Megalith]

I've got a simple little div going with some text inside:

HTML:

<div class="slot">
<p class="stext">
<u>3/10/07</u>: This is filler.<br />
<u>3/21/07</u>: This is filler.<br />
<u>3/25/07</u>: This is filler.<br />
<u>3/27/07</u>: This is filler.<br />
<u>3/29/07</u>: This is filler.<br />
</p>
</div>

CSS:

.slot {width:236px;
background:#CCCCCC;
height:100px;
border-top:6px double gray;
border-bottom:6px double gray;}

p.stext {font-size:.8em;
line-height:15px;
padding-left:10px;}

In FF, there seems to be a good amount of padding at the top of the div, but not in IE7.

I assume that the <p> tag is what is applying artificial padding in FF, but it seems to be ignored in IE7? Is there a solution for this? Apparently html>body doesn't work with IE7, as a means of creating seperate padding styles for each browser.

[Setek]

Sounds like you're using the initial margin and padding values of the browser.

By default, IE vs. Firefox et al. all have differing default margins on elements. The best way to fix this is by resetting every element you've got:

* { margin: 0;
padding: 0; }

... before any other rules, and then setting them yourself:

p { margin: 10px 0; }
h1, h2, h3, h4, h5, h6 { margin: 15px 0; }
table { margin: 10px 0; }
ul, ol { margin: 10px 0 10px 40px; }

... etcetera :)

[Megalith]

Thanks...got it working just fine now.