CODEWITHSUNDEEP
htmlcss
zhuanzhou
zhuanzhou

Reputation: 2453

the tab's content shows abnormal under IE7

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

enter image description here

the li shows abnormal under IE7

Upvotes: 0

Views: 101

Answers (1)

g_thom
g_thom

Reputation: 2810

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

Upvotes: 1

Related Questions