Differences between IE7 and Firefox / Opera / Chrome

Question

I have a persistent problem with the amount of vertical space of unordered lists in IE7 against Firefox / Chrome / Opera, and I can not find a solution there.

IE7 has less space and what I would like to see.

In Firefox, Chrome, and Opera, the space between them is about twice as large.

I cannot explain any spacing issues in my code or page. On my page, the code is as follows:

<!--BEGIN SIDEBOX-->
<div id="sidebox_new">
<div id="sidebox_top"><div id="sup">SUPPORT LINKS</div></div>
<div id="sidebox_bod">
<br />
<ul>
<li><a href="training.aspx">User Training</a></li><br /><br />
<li><a href="faqs.aspx">FAQ</a></li><br /><br />
<li><a href="logonasst.aspx">Logon Assist. Center</a></li><br /><br />
<li><a href="faxus.aspx">Fax Us</a></li><br /><br />
<li><a href="callus.aspx">Call Us</a></li><br /><br />
<li><a href="feedback.aspx">General Feedback</a></li>
</ul>
</div>
<div id="sidebox_btm"></div>
</div>
<!--END SIDEBOX-->

My CSS for this section is as follows:

#sidebox_bod
{
width: 200px;
margin: 0 30px 0 0;
padding: 0;
background: url('../img/supbxbod.gif');
background-repeat:repeat-y;
background-position:bottom;
}

#sidebox_bod ul
{
list-style-image:url('../triangle.gif'); 
text-align:left;
padding: 0 0 0 30px;
margin: 0;
}

#sidebox_bod ul li a
{
font-size: 13px;
}

Any idea what I can do to have vertical spacing the same in all browsers? I would prefer IE7 to look to try to fix it. Thank.

Answer 1

, , , () , .

Reset stylesheets , . .

margin, padding line-height of #sidebox_bod ul li :

#sidebox_bod ul { margin: 0; padding: 0 16px; line-height: 1em; }

CSS Reset, .

Answer 2

. , / - .

"ems" , , - .

IE , , ...

reset stylesheets - , . reset /, (ref: http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/)

, CSS html-.