Spacing differences between IE7 and Firefox/Opera/Chrome

Posted by user306940 on Stack Overflow See other posts from Stack Overflow or by user306940
Published on 2010-04-01T14:18:32Z Indexed on 2010/04/01 14:23 UTC
Read the original article Hit count: 373

Filed under:
|
|
|
|

I have an ongoing issue with the amount of vertical space of unordered lists in IE7 vs. Firefox/Chrome/Opera and I can't seem to find a solution out there.

In IE7, the space is less and what I would like to see.

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

I can't account for any of the spacing issues in my code or page. On my page, the code looks like this:

<!--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 looks like this:

#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 try to have the vertical spacing the same across all browsers? I would prefer to have the IE7 look to try to fix this. Thanks.

© Stack Overflow or respective owner

Related posts about ul

Related posts about li