Software utilities

I was wondering why if I add a background to a li elemente inside an unordered list (ul) with an inline display style, the image shows up shrunk, it is only visible behind the text present inside the element. I finally discovered that it’s due to the inline stuff. Both Firefox and IE7 behave the same (previous verisons of IE don’t have this problem, but they misinterpreter the HTML and CSS rules, as usual). Here is the original code:

ul.mymenuclass {

height: 20px;

width: 520px;

}

ul.mymenuclass li {

background-image: url(tab.gif);

display:inline;

width: 82px;

height: 20px;

}

And here’s the modified code:

ul.mymenuclass li {

float: left;  

background-image: url(tab.gif);

display:inline;

width: 82px;

height: 20px;

}

Hope it helps!