CMS Made Simple Forums

see http://tof.frankma.nl/cmsms/index.php

I want the top menu to occupy the full width of the navigation bar. and In Firefox it works like a charm, in Chrome, Safari, Opera and IE10 the menu is displayed, but not justified to full width.
When I also activate display: -webkit-box; Opera works fine too, but in Chrome and Safari the menu completely disappears.

How can I solve this?
And is there a way not only for IE10 but preferrably also for IE9 and IE8?

Frank

At first I couldn't figure out what you meant as I have never used those calls before...

I would use padding on left/right to do that instead...

Problem with padding is that if a menu item is added or left out, or changed, the css would have to be adjusted every time.

Yes it would have to be changed but it's not like they can more the one more link in the space you have and you are trying to use unstable CSS that isn't truly set for all browsers as you are finding out...

OK Doctor, I found this code here: http://www.w3schools.com/cssref/css3_pr_box-pack.asp (and some other places) - I now see that W3schools indeed says it's not universally supported ...
So, there would be no other way than padding to fill the whole width of the navbar?

What about http://stackoverflow.com/questions/4953 ... in-htmlcss?

Thanks for your suggestions.
The solution Velden pointed at did not work out either.
I solved it (sub optimally) by padding the menu items, as Dr. CSS said.
The menu is not competely justified, at the right end there is a small space left over.

Frank

If you use the menu template below you can target the the last item with li.last a in css to increase it just enough to cover that last bit...

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{* begin calguy *}
{foreach from=$nodelist item=node name='menu'}
{assign var='last' value=''}
{if $smarty.foreach.menu.last}
{assign var='last' value='last '}
{/if}
{* end calguy *}
{if $node->depth > $node->prevdepth}

{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="{$last}menuactive menuparent"><a class="menuactive menuparent"
{elseif $node->current == true}
<li class="{$last}menuactive"><a class="menuactive"
{elseif $node->haschildren == true}
<li class="{$last}menuparent"><a class="menuparent"
{elseif $node->type == 'sectionheader'}
<li class="{$last}sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{elseif empty($last)}
{* not the last menu item, but not a separator, header, parent, or active either *}
<li><a
{else}
{* last menu item *}
<li class="{$last}"><a
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1} </li>
</ul>
<div class="clearb"></div>
</div>
{/if}

Use display:inline-block; on the list elements and text-align:justify on the container.

Thanks, Dr. CSS, this looks promising. It works when the last menu item has no children. As soon as there are children, the class last is added to the last child.
But I'll have a further look at it.

@Applejack: doesn't work for me ...

Did you remove the float as well?

With Jquery its easy to select the last element of the main menu bar:

$('ul#primary-nav> li:last').addClass('last-item')

@applejack
When removing the float the menu is wrecked: last item does not fit in anymore and is displayed under the home button.
Adding display:inline-block; distorts the display of children.
Have a look at http://tof.frankma.nl/cmsms/index.php
(I'll leave that there for 24 hours.)

Thanks for all your replies. I will also try velden's jQuery suggestion some day, but as far as I'm concerned this topic is closed: the site is accepted by the client and I will not worry about this one anymore.
Justifying the horizontal menu seems to be a hard job, for which there's no real (css) solution yet ...

Frank

You only remove the float for the top menu not the drop down.

OK, I added float:left; to the li tag and now I'm back to having a couple of pixels left to the far right end of the menu - just as when I started ...