Small gap at the end of Navigation Menu won't go away

[fearmydesign]

I have tried several times to try and eliminate a small gap at the end of my navigation menu without any success.

I am using the Navigation: CSSMenu - Horizontal Stylesheet and below is where I am trying to make the menu fit exactly within its container, but I can never get it perfect
on each link I have a 1px border (left + right), and I know if I eliminate right, I can make it look better, but I would loose the effect between menu items. Is there a way to just tell the menu to use 100% of the space and to adjust accordingly automatically? Hope you can help, thanks

Using latest version 1.10.3
site: http://www.marylandgranite.com

Code: Select all

ul#primary-nav li {
	float: left;
	margin: 0px;
	padding: 0px;
        border-left: 1px solid #696969;    /* LEFT BORDER LINE */
        border-right: 1px solid #343434;    /* RIGHT BORDER LINE */
}

#primary-nav li li {
	width: 220px;
	margin-left: 0px;
	margin-top: -1px;
	float: none;
	position: relative;
}

/* set the "a" link look here */
ul#primary-nav li a {
	font-size: 12px;
	font-weight: normal;
	color: #fff;
	padding: 15px 27px 15px;   /* SIZE OF THE MENU */
	display: block;
	text-decoration: none;
}

[Wishbone]

I tried doing that with a fixed-width table.. The cells will always add up to the full width.. However, the space between the edge of the text and the boundary weren't even. Wider menu items got more spacing, so it looked a bit off.

http://teamwishbone.com/fearmydesign.html

[uniqu3]

There are css pseudo elements like :first-child and :last-child (http://www.w3schools.com/cssref/sel_firstchild.asp) so you can specify a different width, background whatever to "home" which is first-child) and "contact" (which is last-child).

Then in your MenuManager template you could add {$node->alias} as class to <a href=... and define that in your stylesheet like ul#primary-nav li a.home {something: something;}

Also you can use smarty .last and .first http://www.smarty.net/docsv2/en/languag ... erty.first to add class to first and last element in foreach.

As you see there is a way, well three ways

[Wishbone]

That would work to get rid of the line on the right, but the widths wouldn't be correct.. I think he's trying to find a way to auto space the top-level menu items so that they are full-width.

:last-child doesn't work in IE8, though you can cover for it using jQuery.

Smarty .last won't work, because {menu} isn't recursive, though I think it should be.. It iterates through the entire list, and it's not guaranteed that the last main menu item is the last item on the list, as it might have sub-menu items.

[uniqu3]

Wishbone true, but thats why i suggested above as you can cheat on it and simply make first and last item wider, or even adjust a bit padding on all elements to have them fit it.

Correct about :last-child but when someone is selling webdesign services i expect that he should be familiar with different Browser behavior and well there are still 2 other options left.

Contact has no submenu so smarty last would work as well as first on home. But even this can be covered with jQuery, which would make sense if jQuery is loaded for something else to, using jQuery "just" for menu would be a bit over the top

And as last there is still the option with {$node->alias} or myclass_{$node->id} as class, and adjust it accordingly.

[Wishbone]

Padding would work, as long as the font is rendered the same on all browsers and platforms, and as long as the menu items stay the same...

Another jquery solution would work.. Add some small default padding... then check the width.. See if adding a single pixel to each menu item would put it over the max width... Add a pixel. Repeat until you are near the max. If there are any pixels left over, add it to some of the elements to make the difference.

[Dr.CSS]

Or give the menu items a width in %...

[fearmydesign]

Thank you everyone for your help and responses.

uniqu3
Correct about :last-child but when someone is selling webdesign services i expect that he should be familiar with different Browser behavior and well there are still 2 other options left.

I am sorry if my question was "too basic" of a question, or that you feel I should "know" this "because I sell website design services", but the truth is that I don't know everything, and I am slowly trying to learn other things like php/smarty/jquery so to compliment what I do. Business - just like website design & development - is all about "constant improvement". I "ALWAYS" do quite a bit of research, trial/error, reading etc before asking questions...

Thank you for your help and response, I appreciate it.