CODEWITHSUNDEEP
jquerycssinternet-explorerhtml-lists
Asterix93
Asterix93

Reputation: 11

IE adding a vertical space after first LI in a very simple menu

I have a problem with IE (am I alone ? he, he).

I produce a list with a background. The first LI and last LI are 5px high, and others LI are 16px high.

IE makes a blank space between the first LI and the second one. Naturally, FF & Safari work fine.

I tried many things without result. But I don't know how to manage it...

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

Here is 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>');

Here is a picture of my problem :

Bad IE comportment with LI

Thanks for your help.

Asterix93

Upvotes: 1

Views: 753

Answers (3)

Jon Hadley
Jon Hadley

Reputation: 5296

You might also find it useful to use a CSS reset stylesheet in each new project.

Upvotes: 0

user113716
user113716

Reputation: 322492

Not sure if this will work, but try giving the .li_haut class overflow:hidden.

.li_haut {
    height:5px;
    overflow:hidden;
    background:url(images/modele/li_haut.gif) no-repeat;
}

Upvotes: 1

Sean
Sean

Reputation: 786

You're adding an empty li (li_haut) with no content and a height of 5px. Try setting it's line-height to 5px or adding a spacer gif (shudder) to get IE to respect that height. I bet if you used the IE Developer tools, you'd see that that first LI is what's making that gap.

A better/different way to apply that top style would be to have the background on the UL, not adding a packing/empty first LI. Or put the top container image as a background on the container containing the UL and make the ULs background be the bottom so you don't have extra LIs.

Aside from that, rather than $("#conteneur ul") all over the place, I recommend putting it into a variable to reduce the number of lookups.

Upvotes: 1

Related Questions