Question

Issue in IE7 for extra space at bottom for list items where as in FF it works fine.

Code:

    <ul class="sub_menu">
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
      <li><a href="#">Link4</a></li>
    </ul>

CSS:
ul{
   margin:0 0 20px 0;
   padding:0;
}
ul.sub_menu li {
    background:#E8E8E8;
    border-bottom: 1px solid #E5E4E4;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 0 10px;
}

Can anybody help me out on this?

Thanks in advance.

Answer 1

Adding “overflow:hidden” to li solves my issue.

CSS:
overflow:hidden

I am not sure but sometime adding overflow:visible also works for IE7.

Can anybody clarify the exact cause?

Thanks