This seems to happen to me every single time I code navigation. I really hate coding navigation. I can’t figure out what I am doing wrong. The last link in the nav always behaves like it ran out of room and gets cut off even though I have not specified a width on the navigation div or the UL. What is it that is happening?
I don’t understand what you are getting at. The two spans are there because I have a rounded background that the nav will have. I have had this trouble without those. I usually get this issue on all navs and I am not sure what I did that fixed it in the past.
I am floating the spans because the background of the span is a rounded corner image that has gradients. I want them to move when new menu items are added. I can’t think of another way to put them in there. The main problem I am having is that I don’t understand why the UL consistently does not expand to allow for whatever nav item is added. It’s almost like there is an invisible width that gets added to the ul which only lets it expand so much and it always cuts off the contact. This is the third time I have had this issue and I just can’t figure out what causes it. Maybe it’s floating the list items instead of using display: inline. Thanks for all the help guys. I appreciate it.
There doesn’t appear to be any fixed width so I cannot determine why your menu is not expanding as it should. The example I made seems to work just fine. I have also removed the SPANS that were flanking your menu and replaced them with :before and :after pseudo thingies (technical term).
There is an image behind the navigation that has some pretty hard to replicate gradients and borders using css. I am not even sure it is possible. So for that reason, I am sticking with the image. I wish I could do it your way though
Well Adam, I went with the before and after and it works just fine. A little cleaner method. For some reason that I just have not been able to explain, my nav just won’t sit right. I ended up having to add a margin-top: -33px to get the right side end cap to sit where it is suppose to. It just wants to sit 33px below the nav even though there is plenty of room for it to sit where I think it should without the margin. I am sure I will figure it out one of these days.
well Senff, it seems that floating the UL left has done the trick. My end cap now sits where it is suppose to without any – margin. I have removed the spans and gone with css before and after. Now my nav looks how I think it should. Thanks guys for all the help. Those were some really good tips.
the more floats you have to keep track of, the harder it is to make it work. I use to have the same problem so instead what i did was got rid of the div that was wrapping my navigation and just added a class or id to the ul itself. Saves a lot of time. Here is your fiddle, http://jsfiddle.net/r4Twt/13/