It looks like another ul or li padding or margin difference between IE and Firefox. There was a post involving this only yesterday or the day before and it crops up regularly. The two browsers set the defaults differently.
In these situations get it right for Firefox first as it is the most standards compliant browser and likely to be OK with other browsers except IE.
This will involve putting a style for the ul or li tag in your stylesheet or in style tags in your html page head section:-
ul { padding-top: 5px; }
You will have to use trial and error. It could be the ul or li tag that needs editing, it could be a different size or even a minus size and it could be padding-bottom or margin-top or margin-bottom.
If it then looks different but acceptable in IE, leave it.
If you find IE is displaying unacceptably, you either have to fiddle with the padding until it looks OK on both (but this is often difficult), or add a conditional comment that revises the padding only in IE (probably to reverse the style edit for Firefox).
Add this as the last item in your html page head section:-
<!--[if IE]>
<style type="text/css">
ul { padding-top: ?px; }
</style>
<![endif]-->
You will probably have to use trial and error to find out what works best and the size (it might even be a minus size). It might be padding-bottom or margin-top or margin-bottom.
If you have many pages with the same problem you can create a separate stylesheet with only the revised code and link to the stylesheet in the conditional comment:-
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css"/>
<![endif]-->
Last edited by Wickham; 12 Jan 2007 at 07:47 AM.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.