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

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

the css:

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;


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

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

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

08-03-2011, 04:59 AM


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.

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

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 -->

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;