Question

http://xanlz.com/test/

why under IE7,6 , the box which including the text "code" "book" are above on the border? not joining together. the red part in the image

but ok under firefox.and how to remove the bottom line.when the mouser hover on the text(code or book) and under the default state with text code.

the html code:

<div class="week-down rounded-corner">
 <h2>week test</h2>
   <div class="ranktitle">
     <ul>
        <li class="tab1 rankactive">code</li>
        <li class="tab2">book</li>
        <div class="clear"></div> 
     </ul>
  </div>
  <div class="weekrank">
 <div class="code-down tab1" style="display: block;">
 <ul class="item-list itemlist">
 <li><a href="#" >asp</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
 <li><a href="#" >asp</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>

</ul>
 </div>

 <div class="book-down tab2" style="display: none;">
  <ul class="item-list itemlist">
 <li><a href="#" >test</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >test</a></li>
 <li><a href="#" >asp</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>

</ul>
 </div>
 </div>

 </div>

the main style:

     .ranktitle {
        margin-top: 5px;
    }

    .code-down ul.item-list, .book-down ul.item-list {
        border-top: 1px solid #D5D5D5;
        padding-top: 8px;
    }

    #tabs-content ul, ul.item-list {
        padding: 3px 0 0 7px;
    }
.ranktitlewhole ul li.rankactive, .ranktitle ul li.rankactive {
    background-color: #FFFFFF;
}

i use jquery to add a class rankactive to the li text. when the mouse on.

Answer 1

You have a <div class="clear"></div> inside the <ul>. This is not valid. Remove it and add to <ul> overflow: hidden; property.

For IE6 zoom: 1; property has to be added. Without this overflow: hidden; doesn’t work.

And for the second part of the question, try this:

li:hover {
   position: relative;
   top: 1px;
   padding-bottom: 1px;
}

UPDATE

Let’s make it simple.
Remove overflow: hidden; and zoom: 1; and set to <ul> fixed height, for example 15px.
And for li:hover

li:hover {
   position: relative;
   top: 1px;
}