menu with background images

[ShadStar]

Hi I'm new to the forums and reasonably new to css so please forgive any newbie stupidity on my part That having been said, I need a little guidance on something please. I am trying to create a little vertical css styled menu, using a horizontally-graded background gif image instead of a solid color. The menu will use a "rounded" style header and footer image to enclose the top and bottom of the menu section. The menu itself will be variable in length so I am not happy about using a fixed-height div element and background image to contain the menu items. I can create the main sub-menu sections using a single div element and displaying inline-block with no margin and padding no problem, looks great, but unfortunately when I add the header and footer "rounded" images to create a nice-looking top and bottom to the menu, I am getting line-break issues between the header/footer images and the main menu element, which looks nasty. If I may show some css coding here:

#menu {	  margin: 0;	  padding: 0;	  border:none;	  width: 136px;	  font-size:8pt;}#menu ul {		 list-style: none;		 margin: 0;		 padding: 0;}#menu li {		 width:136px;		 display:inline-block;		 background-image:url('./images/suback.gif');		}#menu a {		width:136px;		display: inline-block;		text-decoration: none;}

And the associated xhtml strict code:

<div id="menu">   <img src="./images/subhead.gif" alt="Sub Menu Header Image" />	  <ul>		 <li>Menu Title</li>		 <li><a href="#" title="First Menu Item">Item 1</a></li>		 <li><a href="#" title="Second Menu Item">Item 2</a></li>		 <li><a href="#" title="Third Menu Item">Item 3</a></li>	  </ul>   <img src="./images/subfoot.gif" alt="Sub Menu Footer Image" /></div>

I am using ul and li elements for speed, I understand that there are better css methods, at the moment I am just trying to make the menu work I would also like to keep to xhtml 1 strict if possible, just a personal preference. I suppose my initial question is am I using the correct method to create a header/footer image by trying to use seperate images for header and footer? I could use a single image for the menu background but I need to change the length of the menu from time to time, and adding a header/footer image separately would allow me the flexibility to change the length of the main menu element as needed, without re-creating the background image separately every time. All I need to do is to remove the line-breaks between the header/footer images and the main menu element, is this possible or am I completely on the wrong line of thought here? All suggestions and guidance very welcome, and thanks for reading...

[eTianbun]

any screenSHOT for this?

[dsonesuk]

#menu img {float:left;}

[ShadStar]

My apologies, I have uploaded the index page to a dump area on my personal website at: http://www.boredwith...names.co.uk/w3c You will see what I mean with the yellow menu on the left. I have just put a rough shell of a page together for a moment to allow me to try out different coding teqniques and stuff... Many thanks for the replies so far, I will get around to trying some coding either later tonight (uk time) or tomorrow

Edited June 9, 2012 by ShadStar

[ShadStar]

#menu img {float:left;}

Thank you dsonesuk Float left on both header / footer images and in the li definition works beautifully. Happy bunny I have updated the test site with a before and after, new after link is: http://www.boredwith...w3c/index2.html Now I understand how that works I can start tidying up the coding... thanks again. Edited June 9, 2012 by ShadStar