CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer-6
Zevan
Zevan

Reputation: 10235

Jquery/CSS IE6 issue

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.

Upvotes: 0

Views: 386

Answers (4)

Stuart Burrows
Stuart Burrows

Reputation: 10814

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>");

Upvotes: 1

stealthyninja
stealthyninja

Reputation: 10371

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

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185873

Try this in the loop: 

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

Upvotes: 0

Will
Will

Reputation: 20235

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>");
}

Upvotes: 1

Related Questions