Question

the link: http://xanlz.com/test/one.html

the html:

<div class="codepg-tabtp rounded-corner">

  <div class="cdpgtabtp">
     <ul>
        <li class="tab1 cdpgactive"><a href="javascript:void(0);" style="background: none repeat scroll 0% 0% transparent;"><span>PHP</span></a></li>
        <li class="tab2"><a href="javascript:void(0);"><span>PHP</span></a></li> 
        <li class="tab3"><a href="javascript:void(0);"><span>PHP</span></a></li> 
         <li class="tab4"><a href="javascript:void(0);"><span>PHP</span></a></li> 
        <li class="tab5"><a href="javascript:void(0);"><span>jasp</span></a></li> 
        <li class="tab6"><a href="javascript:void(0);"><span>javascript</span></a></li> 
     </ul>
  </div>

   <div class="codepg-tabtpct">
   <div class="tab1" style="display: block;">
 <ul class="item-list itemlist">
 <li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>

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

 </div>

</div>

the css:

.codepg-tabtp{
    border: 1px solid #94D5ED;
    height: 256px;
    margin-top: 10px;
    padding: 1px;
    width: 766px;
}
#tabs-content ul, ul.item-list, .hot-version .list-content {
    padding: 3px 0 0 7px;
}

the tab’s content shows abnormal under IE7.but ok under firefox. how to make it show normal under IE7. thank you

the li shows abnormal under IE7

Answer 1

It looks the same to me in Chrome, Firefox and IE7, except that there is a slight shift in the tabs as I mouseover.

This is probably from extra padding on the .cdpgactive class. Zeroing it out fixed that shift. Not sure if that’s the issue you mention.

.cdpgtabtp li.cdpgactive a, .codepg-tabdw li.cdpgactive a {
    background: url("images/cdpgtab_l.gif") no-repeat scroll 0 0 transparent;
    height: 29px;
    padding: 0px;
}

EDIT: I don’t think that’s the main issue – there’s also an overlap on the items in the tabs in IE7. So, that’s not a good solution yet.

UPDATE:
Setting a height on the containing ul and adding more margin on the li.even fixes it for me:

ul.item-list {
  height:400px;
  padding-bottom:0;
  padding-left:7px;
  padding-right:0;
  padding-top:3px;
}

.codepg-tabtpct ul.item-list li.even {
  float:right;
  margin-right:44px;
}

UPDATE:

Good catch. Setting the width of the li.odd should fix the alignment issue:

.codepg-tabtpct ul.item-list li.odd {
  float:left;
  width:200px;
}

Screenshot:
http://img94.imageshack.us/img94/6999/cssie72.png