Horizontal Menu Spacing Issues

[beyre]

I used the following horizontal menu script:

Dynamic Drive CSS Library- Solid Block Menu

on this template: www.littlemissnc.com/index-build3.php
I have Firefox 3.6.17 and IE8 ... it looks just fine in both.

Hubby's Chrome 10 renders it fine also.

However, Safari on a Mac and some of the other major browsers are spacing out the tabs and pushing the last 1-2 tabs onto a second line.

I ran the page through browsershots.org and saw this problem.

What can I do to fix this or is it truly an issue?

[PicnicTutorials]

Hi, some browsers showing the text larger is the problem. There is now way around that. Your options are one of three (maybe more). 1) make the links images. 2) Give the menu more breathing room. 3) id each link and give it a specific px width.

[Paul O'B]

Your link wasn't working but what Eric says above is true.

You can see up to 50px difference on a line of text depending on browser, system and settings and therefore you should always expect that text may wrap earlier in some browsers and cater for it in some way. The best option is to allow for a little more breathing space and not try to make everything fit in a tight space.

[beyre]

Paul,

You tried to reach the page after I've already moved the template to the main site (Little Miss and Teen Miss North Carolina, LLC Beauty Pageant).

I've already increased the page's width to try and accommodate the menu, but it's just potluck on what words one uses in the menu. I've played with the padding as best I could. It's at 1.125em now. 1.126em throws Contact to the next line.

I have this problem with no matter what horizontal menu script I use. geesh.

[PicnicTutorials]

Potluck? Meaning you dont control the words that go in there? There for you don't control the width. So there is not much you can do except give it more breathing room and hope for the best. But first off I would change any left/right padding to pixels and not ems. Actually you still could give each li a exact width. Then if the words go to long they would wrap in the li. Pick your poison. The whole menu wraps a just the words in the li.

[beyre]

Sorry, I didn't phrase that right. Brain is going dead - long day.

Here's the CSS for the menu. I haven't changed it much from the original, just colors:

.solidblockmenu{
margin: 0;
padding: 0px 0px;
float: left;
font: 12px Arial;
width: 100%;
overflow: hidden;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url('images/blockdefault.gif') center center repeat-x;}

.solidblockmenu li{display: inline;}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 1.125em;
text-decoration: none;
border-right: 1px solid white;}

.solidblockmenu li a:visited{color: white;}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: #000000;
background: transparent url('images/blockactive.gif') center center repeat-x;}

I changed the one padding number from pixel to em because I was able to micro move things so that Contact went to the edge without going over.

Sorry if this is a basic question, but how do you give each li it's own width and how in the heck would I determine what each width would be?

Maybe after I get back from dinner I will be able to think more clearly on this.

Thanks again for your help - greatly appreciated!

[PicnicTutorials]

No silly questions. Still the easiest way would be to just make the whole menu a little wider. Or make the words less wide. But if you wanted to give each a width then you could get the Firefox addon called Measureit (I think?). Measure the width of each. Give the li's text-align:center and remove any padding on the li or anchor. Then give each it's own unique id like so...

li#one {width:;}

[Paul O'B]

HI,

You could do this which will keep ie8 and modern browsers happy.

#header-menu {
    width: 100%;
    display:table;
    white-space:nowrap;
    text-align:center;
}
.solidblockmenu {
    margin: 0;
    padding: 0px 0px;
    /*float: left;*/
    font: 12px Arial;
    overflow: hidden;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(http://www.littlemissnc.com/images/blockdefault.gif) center center repeat-x;
    display:table-row;
}
* html .solidblockmenu{width:auto;zoom:1.0}
*+html .solidblockmenu{width:auto;zoom:1.0}
.solidblockmenu li {display:table-cell;    text-align:center;}
* html .solidblockmenu li{display:inline}
*+html .solidblockmenu li{display:inline}
.solidblockmenu li a {
    /*float: left;*/
    color: white;
    text-align:center;
    display:block;
    padding: 9px 0;
    text-decoration: none;
    border-right: 1px solid white;
}
* html .solidblockmenu li a {float: left;    padding: 9px 1.125em;}
*+html .solidblockmenu li a {float: left;    padding: 9px 1.125em;}
.solidblockmenu li a:visited {
    color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li .current {
    color: #000000;
    background: transparent url(http://www.littlemissnc.com/images/blockactive.gif) center center repeat-x;
}

It uses display:table-cell to spread the menu out evenly and needs no side padding and therefore can have quite varying amounts of text without breaking. Ie6 and 7 just get the original floated menu so you can tweak them a little to fit better if needed.