html list item wraps when IE resized
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 do I not make that wrap and make the UL not resize in the second picture??

![whacky menu bar](http://i45.tinypic.com/2lkxlwk.jpg)

    <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>

And the CSS itself..

    #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;
    }
    
   


html list item wraps when IE resized
===

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 do I not make that wrap and make the UL not resize in the second picture??

![whacky menu bar](http://i45.tinypic.com/2lkxlwk.jpg)

    <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>

And the CSS itself..

    #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;
    }
    
   

