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.
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.
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.
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.
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…
You could do this which will keep ie8 and modern browsers happy.
#header-menu {
width: 100%;
[B] display:table;
white-space:nowrap;
text-align:center;[/B]
}
.solidblockmenu {
margin: 0;
padding: 0px 0px;
[B] /*float: left;*/[/B]
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;
[B] display:table-row;[/B]
}
[B]* 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}[/B]
.solidblockmenu li a {
[B] /*float: left;*/[/B]
color: white;
text-align:center;
[B]display:block;
padding: 9px 0;[/B]
text-decoration: none;
border-right: 1px solid white;
}
[B]* html .solidblockmenu li a {float: left; padding: 9px 1.125em;}
*+html .solidblockmenu li a {float: left; padding: 9px 1.125em;}[/B]
.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.