CODEWITHSUNDEEP
phphtmlcss
Adam
Adam

Reputation: 9049

There are gaps between <li> in a vertical menu when using IE7

<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.

Upvotes: 1

Views: 626

Answers (2)

Adam Jenkins
Adam Jenkins

Reputation: 55613

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/

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

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:

Upvotes: 2

Related Questions