Question

I have a horizontal menu bar created using ULs and LIs. The issue I am running into is when on the home page (default.aspx) the menu items with long names resize gracefully when IE is resized but once you click on the menu item and you are on that page, the menu goes whacky and the menu items with long names wraps to the next line.

Here is a pic of what I am talking about. How can I not make that wrap and make the UL not resize in the second picture?

#content-container {
  font-family: "Trebuchet MS", Verdana, serif;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#content-container ul {
  border-bottom: 18px solid #C93;
  list-style: none;
  margin: 0 -10px;
  ;
  padding-bottom: 1px;
  overflow: visible;
  width: 98%;
}

#content-container ul li {
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
  width: 14.256%;
}

#content-container ul li a {
  border-left: 1px #fff solid;
  line-height: 36px;
  text-decoration: none;
  color: #ddd;
  background-color: #2E4B68;
  display: block;
  font-size: 1.5em;
}

#content-container ul li a:hover {
  background-color: #C93;
  color: #000;
}

<link rel="stylesheet" type="text/css" href="/css/dssmenu.css" />
<div id="content-container">
  <ul>
    <li><a id="link1" href="http://mysite/Pages/Training.aspx">Training</a></li>
    <li><a id="link2" href="http://mysite/Pages/Briefings.aspx">Briefings</a></li>
    <li><a id="link3" href="http://mysite/Pages/SecurityDirectives.aspx">Security Directives</a></li>
    <li><a id="link4" href="http://mysite/Pages/DSSInspections.aspx">DSS Inspections</a></li>
    <li><a id="link5" href="http://mysite/Pages/AdverseInformation.aspx">Adverse Information</a></li>
    <li><a id="link6" href="http://mysite/Pages/Travel.aspx">Travel</a></li>
    <li><a id="link7" href="http://mysite/Pages/Resources.aspx">Resources</a></li>
  </ul>
</div>

Answer 1

You should consider nowrap.

#content-container ul li a {
   ....
   white-space: nowrap;
}