too long

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.

Answer 1

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)