I have a large menu built from lists.
It is displaying correctly in all the modern browsers I have tried and IE8, however in IE7 the list items appear to be given large amounts of margin of varying size depending on the size of the list item (see image comparison below) :
Unfortunately the debugging tools in IE7 are less than optimal and I am having a real hard time working out where the issue is coming from. The source code is a bit lengthy to post here so I have made a JSfiddle for your viewing pleasure.
View source code and working demo
Can anyone see where this mystery spacing is coming from, and how can I put it straight?
In IE7 the <ul>
tags are inheriting a line-height : 1.5em
, disabling it in ie7 removes the annoying spacing. Updated fiddle
This condition is the culprit
ul {
/* line-height: 1.5em; */
list-style-position: outside;
}
Additional
Ok I see what you mean about the white gap. This looks like its (surprise surprise) one of those annoying ie7 'features'. I just got round it by using a hack
ul li, ul li a {
/* Needed in ie7 to stop list items expanding vertically
*line-height:1.2em;
}
with
* html ul li a {
height:15px;
}
or
ul#map > li > a.map-item {
height:auto;
*height:15px;
}
A better way would be to create an IE7 only stylesheet and declare this as standard rather than relying on a hack.
Have you tried adding CSS to reset all the styles to the same for all browsers?
By including a reset CSS file such as: http://meyerweb.com/eric/tools/css/reset/ may help with your issue.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.