Spacing differences between IE7 and Firefox/Opera/Chrome

Question

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.

Answer 1

The problem you are having right now is due to the fact that each user-agent (Browser) has their own default styles, which may differ from one and the other.

Reset stylesheets exists in order to neutralize those styles and achieve a more constant rendering between user-agents. This will basically remove the issue with all elements.

In that particular case, playing with margin, padding and line-height of #sidebox_bod ul li will fix your problem:

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

I would recommend using a Reset CSS though, as that will solve most of those problems for all elements.

Answer 2

Using break tags in between your list items is not a good idea. You should be setting specific margin, padding and/or line-height styles for your list item spacing - otherwise it will be unpredictable.

I'd recommend against using 'ems' for measurement if you want exact symmetry, as they are rendered very differently in different browsers and operating systems.

There are also some white space issues in IE, but usually that would result in more space, rather than less...

Regarding the above poster's comment about reset stylesheets - I think it would be better in this instance to set a specific style for your own site. Reset stylesheets can become largely unnecessary/redundant if you are styling your site at all (ref: http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/)

A link to your site would be great, as its very difficult to debug without seeing the entire CSS file and html context.