So in my CSS I have line spacing set at 170% for <p> to increase the gaps between lines. (it looks nicer).

I have made my own <HR> using this code:

div.hr { height: 1px; background: #fff url(hr.gif) repeat scroll center; }
div.hr hr { display: none; }

And it all looks fine in both Firefox and IE.

But IE shows a much bigger gap between parapgraphs and between the HR and the next paragraph. Firefox displays it how I want it to look, but IE the gaps are too big.

See the attached screenshot.

Any ideas?

Use a pixel value instead of "170%". The percentage is being applied to the browser's default value.

If it still doesn't look right, you may need to set top and bottom margins on the HR or replace it with a 1 pixel <div>.

Removing the line spacing all together still makes IE show a much bigger gap between paragraphs compared with Firefox. Wierd?

All I have between the two paragraphs of text is:

</p><p>

And IE shows it nearly twice as far apart? :-/

Ok I figured it out... dont know if this is the correct fix but it works consistantly between both browsers.

I specified the margin as 0 and just added some top-padding instead.

margin: 0; padding-top: 9;

That's the correct method. You've given both browsers pixel values which will replace their defaults, making both appear the same.