Jquery/CSS IE6 issue

Question

This is a very interesting problem. Basically I'm adding a few li tags dynamcially:

var fileList =  $("#openWin ul");

for (var i = 0; i<20; i++){
  fileList.append("<li>"+i+"<\/li>");
}

I have some css for my li tags:

li{
  list-style : none;
  font-size : 12px;
  margin: 0;
  padding : 5px 10px 5px 10px;
  border-bottom : 1px solid #cccccc;
  font-family : Georgia, serif;
  background-color : white;
  cursor : pointer;
}

This doesn't seem to work in IE6. The first few li tags don't appear to have the css fully applied to them:

alt text

Here is a link to the live file. I tried setting up a jsFiddle and jsBin for this but neither of those sites seem to function properly in ie6.

Strangely if I add some events to the li tags, the same issue arises. Adding this code:

 $("#openWin li").live('mouseover', function(){
    $(this).css({"background-color": "#ededed"});
 }).live("mouseout", function(){
    $(this).css({"background-color": "white"});
 });

Works but the first few li tags act strangely. I'm going to keep working on this, any input would be greatly appreciated.

I recommend this in the mouseout handler: $(this).removeAttr("style") — Šime Vidas
– Šime Vidas, Commented Dec 19, 2010 at 20:16
I'll give that a try... thinking of just replacing these with divs and see if that fixes the problem. — Zevan
– Zevan, Commented Dec 19, 2010 at 20:19

Stuart Burrows · Accepted Answer · 2010-12-19 21:25:11Z

1

Looks like a hasLayout issue - try adding zoom:1 to your li styles. Another option is adding a space to the text you are appending as below:

fileList.append(" <li>"+i+"<\/li>");

answered Dec 19, 2010 at 21:25

Stuart Burrows

10.8k2 gold badges36 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zevan Over a year ago

very cool. adding zoom fixed it :) Could you explain why you think that is?

Zevan Over a year ago

adding zoom created a 1px space between all li tags so I decided to go with using divs... very strange stuff. Thanks for your help.

stealthyninja Over a year ago

@Zevan: Updating your li CSS from margin: 0; to margin: 0 0 -1px 0; should take care of that, but which other events were you using that didn't work with position: relative commented out?

Stuart Burrows Over a year ago

@Zevan: difficult to explain in brief; effectively IE can't identify the boundaries of these elements. Here is a good resource: haslayout.net/haslayout

Zevan Over a year ago

cool. I'll try that with the li css. Will also look at that link

Will · Accepted Answer · 2010-12-19 20:13:52Z

1

From the image it looks like the CSS works except for the border-bottom. Try:

for (var i = 0; i<20; i++){
  fileList.append("<li style=\"border-bottom:1px solid #cccccc;\">"+i+"<\/li>");
}

answered Dec 19, 2010 at 20:13

Will

20.3k7 gold badges49 silver badges48 bronze badges

1 Comment

Zevan Over a year ago

thanks, that will work. Doesn't solve the event problem though.

stealthyninja · Accepted Answer · 2010-12-19 21:09:03Z

1

@Zevan: Comment out position: relative; in your #files CSS. This should fix the issue.

#files {
    background-color: white;
    height: 450px;
    margin: 10px;
    overflow: auto;
    /*position: relative;*/
    width: 230px;
}

answered Dec 19, 2010 at 21:09

stealthyninja

10.4k11 gold badges57 silver badges61 bronze badges

2 Comments

stealthyninja Over a year ago

As for the "why", chalk it up to yet another IE6 bug; it looks very similar to the IE6 "Peekaboo" bug -- positioniseverything.net/explorer/peekaboo.html, though it's not because you're not using float anywhere.

Zevan Over a year ago

interesting that fixes the css. For some reason none of the events work after that. I replaced the ul/li stuff with divs and it fixes everything.

Šime Vidas · Accepted Answer · 2010-12-19 20:20:55Z

0

Try this in the loop:

$("<li>").text(i).appendTo(fileList);

answered Dec 19, 2010 at 20:20

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Collectives™ on Stack Overflow

Jquery/CSS IE6 issue

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related