display:inline causing Height x Width issues

[Sol]

Hi guys,

I've downloaded the dotnetblog from www.dotnetblogengine.net and i'm trying to apply an image to the background of each li element in the ul within the top menu.

So this is my CSS for it:


#menu
{
background: white;
border: 1px solid silver;
padding: 5px;
margin-bottom: 20px;
}

#menu ul
{
list-style: none;
margin: 0;
padding: 0;
height: 36px;
}

#menu ul li
{
display:inline;
margin: 0;
padding: 0px 0px 18px 0px;
background-image: url(../../pics/headerMenuTile1.gif);
background-repeat: no-repeat;
width: 90px;
height: 36px;
}

#menu ul li a
{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-weight: bold;
}


But for some strange reason the li's are wrapping around the links inside even though i have explicitly declared the height and width?

i removed the display:inline call and although it now stacks the list the background image is fully displayed.

Any ideas mates?

cheers,
Sol

[Sol]

Found a solution,

I needed to set each 'il' to display:block and float left.
That way it obeys the height and width i have set, and the float keeps it inline.

Sorry if anyone was spending their time looking for an answer.