...

View Full Version : the tab's li content shows abnormal under IE7



runeveryday
08-03-2011, 04:23 AM
the link: http://xanlz.com/test/one.html

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

http://www.codingforums.com/attachment.php?attachmentid=10141&stc=1&d=1312341778

but under firefox. it works ok. how to correct it. thank you.

Sammy12
08-03-2011, 04:34 AM
ul.item-list li a{
display: block;
float: left;
margin-left: 5px;
overflow: hidden;
width: 310px;
}


taking away overflow: hidden; seems to do the trick. maybe setting it to overflow: visible; in an ie7 stylesheet or even using



ul.item-list li a {
_overflow: visible;
}


would be your best option

runeveryday
08-03-2011, 04:52 AM
i am sorry. it's can't work. although i took away overflow: hidden;

Sammy12
08-03-2011, 04:59 AM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-58.png

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-59.png

runeveryday
08-03-2011, 06:27 AM
got it, many thanks.


ul.item-list li a {
_overflow: visible;
}

it is used for hacking IE6. i changed to +overflow: visible; it's ok now.

runeveryday
08-03-2011, 06:34 AM
could you tell me why the overflow: hidden makes it abnormal under IE7?

Sammy12
08-03-2011, 06:41 AM
you know I honestly have no clue at this point since ie's inspect element is terrible. I think the code you used to layout this portion of your website is not a 100% correct, therefore differences between browsers will appear in the future. i took a look at ie7 as well as ie8 and its definetly not a 100% the same.

Ill you could upload the fixed versions, i or someone else could take a look and try to find some things. you may have used some css that isn't ie7 supported. that's my only guess at this point

just a word of caution:



_overflow: hidden;


will only be implemented in ie versions. however i believe your site was fine in ie9. so you may want to consider an ie7 stylesheet



<!--[if IE 7]>
<style type="text/css">
<!-- overflow: visible code -->
</style>
<![endif]-->

Sammy12
08-03-2011, 06:58 AM
okay so I looked at your code. I think if you defined a width to the li's it would fix the problem.

right now your floating one li to the left and the other to the right, while content underneath those will seep through the crack between the two. once the li's have a height, there will be no space left

try adding this code to your original code:



ul.item-list li {
clear: both;
width: 347px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum