Does anyone else have trouble with IE? (Or is it just me?)
I'm creating a list with a background. The first and last LI elements are 5px high, while the others are 16px high.
However, in IE there's a strange blank space between the first and second LI elements. Firefox and Safari display it correctly though.
I've tried several solutions but nothing seems to work. I'm stumped...
Below is my CSS:
ul {
list-style:none;
margin:40px;
}
li {
padding:0px;
margin:0px;
width:137px;
height:0px;
padding-left:10px;
}
.li_norm {
height:16px;
background:url(images/modele/li_norm.gif) no-repeat;
}
.li_over {
color:#ffffff;
font-weight:bold;
height:16px;
background:url(images/modele/li_over.gif) no-repeat;
}
.li_haut {
height:5px;
background:url(images/modele/li_haut.gif) no-repeat;
}
.li_bas {
height:5px;
background:url(images/modele/li_bas.gif) no-repeat;
}
And here's my jQuery code:
$("#conteneur").append('<ul />');
$("#conteneur ul").append('<li class="li_haut"></li>');
var a= ["Essai 1", "Essai 2", "Essai 3"];
for (var i = 0, j = a.length; i < j; i++) {
$("#conteneur ul").append('<li id="new_'+i+'" class="li_norm">'+a[i]+'</li>');
}
$("#conteneur ul").append('<li class="li_bas"></li>');
The issue can be seen in this picture:
Strange spacing in IE with LI
Any help would be greatly appreciated.
Asterix93