CODEWITHSUNDEEP
htmlcssmenuresize
Athapali
Athapali

Reputation: 1089

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

Upvotes: 0

Views: 909

Answers (1)

scorpio1441
scorpio1441

Reputation: 3088

You should consider nowrap.

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

Upvotes: 4

Related Questions