[JamesW]

This is probably really basic but I've never worked out a way around it myself and I'm sure there is one..

ul#nav {background:url(img/nav-bg.jpg) repeat-x top #C18E00;}

ul#nav li {display:block;float:left;}

Because I have floated the list items they are taken out of the flow of the page so I then lose my background image from the UL.

I know I can set a height on my ul#nav but I will be using text in the menu so It needs to be able to expand..

I worked out you can use display:inline-block; instead of using floats but that doesn't work in IE ( )

Is there a way around this, or a better technique ?

[gaz545]

If you specify a width for both the ul and the li then you can remove float left and fix your issue.

[JamesW]

gaz545, on 08 January 2010 - 11:58 PM, said:

If you specify a width for both the ul and the li then you can remove float left and fix your issue.

I'm floating it left so the items are aligned horizontaly though ?

[Wickham]

Try adding overflow: hidden; and a width to the ul style:-

ul#nav {background:url(img/nav-bg.jpg) repeat-x top #C18E00; overflow: hidden; width: ???px; }

NOTE

the ul tag must also have a width; either % or fixed width as item 2d here:-
http://www.wickham43...xbackground.php

[JamesW]

Perfect thanks

Code I used if anyone else was interested:

ul#nav {background:url(img/nav-bg.jpg) repeat-x top #C18E00;width:890px;padding:5px;overflow:hidden;}

ul#nav li {display:block;float:left;padding:5px 4px;margin:0 5px;}