There are gaps between
in a vertical menu when using IE7

Question

<ul id="main">
  <li class="the-dropdown-link"><a href="#">Main Link</a>
    <ul id="dropdown">
      <li>sdfsdf</li>
      <li>sdfsdf</li>
    </ul>
 </li>
</ul>

ul#main{ margin:0; padding:0; list-style:none; float:right; width:100%;}
ul#main li.the-dropdown-link{float:left; width:140px; }
ul#main ul {position:absolute; display:none; padding:0;list-style:none;}
ul#main a{display:block;height:24px; width:140px;font-size: 14px; font-weight: 500; text-align: center; color: #ffffff; text-transform: uppercase; line-height: 26px;}

With this vertical dropdown menu I get gaps between the <li> in ie7. Doing my research I see that IE7 creates whitespace between </li> and <li>, however i'm generating my list using php and therefore cannot put all the <li> on the same line like everyone recommends.

I tried adding all the list elements into a variable and using:

$first_list = preg_replace('~>\s+<~', '><', $first_list);

to get rid of spaces, then echoing it.

I don't know what to do.

PHP won't output line breaks unless you tell it to. There's some places where they're implied (like in a multi-line HEREDOC), but PHP doesn't just slap in a linebreak because you output an end-tag like ``. — Marc B, Jun 10 '11 at 19:14
can you clarify "i'm generating my list using php and therefore cannot put all the
whitespace *may* be the issue, but not always. Are you using a CSS reset? There may be some default margin or padding on your ul, li, or a elements. — daybreaker, Jun 10 '11 at 19:15
How do you generate is using php and why can't you put them on the same line? Do you echo LIs while fetching or add them to an array and then print? Can you give the code that generates/echoes LIs? — AR., Jun 10 '11 at 19:15
The `line-height` is 2px bigger than the `height`, is it intentional? — joakimdahlstrom, Jun 10 '11 at 19:17

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

You should be able to stop PHP outputting the whitespace, and that's the easiest solution.

Otherwise, you can simply use:

ul#main ul {
    font-size: 0
}

That will remove the gaps.

You'll have to set the font-size back, with something like ul#main ul li { font-size: 14px}.

I successfully answered a similar question yesterday, check it out for more information and a demo:

Negative margin causes border to disappear in IE7 (be sure to check the comments)

edited May 23 '17 at 10:34

Community

1
1

answered Jun 10 '11 at 19:16

thirtydot

224,678
48
389
349

for one of my menus someone pointed out that the problem may be because of the line-height being larger than my font, which was the case. However, this solution fixes the gaps in my other menus. Thanks! – Adam Jun 11 '11 at 16:04

score 0 · Answer 2 · answered Dec 07 '12 at 18:48

This is on old thread, but in case anybody comes across this answer, the correct answer is this:

li a {display:inline-block;}
li a {display:block;}

Note that the rules have to be in separate blocks. This fixes any issues in IE6 as well (but nobody uses that any more).

I came across this answer one day when I was having the same problem - I found it posted here: http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

There are gaps between in a vertical menu when using IE7

2 Answers2

There are gaps between
in a vertical menu when using IE7