Bob
Bob

Reputation: 101

HTML5 & CSS3 Centering

I am using the following HTML & CSS code excerpts. The "navmenu" items span the full width of the page in IE but leave space on the right side in Chrome. The full page can be see at www.bobabend.com. Can anyone tell me what to change so the "navmenu" items span the full width in both browsers?

.navmenu {
  padding: 0;
  display: block;
  z-index: 2;
  clear: none;
  margin-top: -13px;
  margin-left: auto;
  margin-right: auto;
}

.navmenu ul {
  padding: 0;
  background-color: #0000FF;
}

.navmenu li {
  padding: 0;
  list-style: none;
  position: relative;
  background-color: #006500;
  float: left;
  border: thick ridge #CC9900;
}

.navmenu ul li a {
  text-align: center;
  font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif, helvetica;
  text-decoration: none;
  height: 45px;
  width: 200px;
  display: block;
  color: #FFF;
  text-shadow: 1px 1px 1px #000;
  font-size: medium;
  vertical-align: middle;
  line-height: 40px;
}

.navmenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 32px;
}

.navmenu ul li:hover ul {
  visibility: visible;
}

.navmenu li:hover {
  background: #09F;
  z-index: 1;
  font-weight: bolder;
}

.navmenu ul li:hover ul li a:hover {
  background: #CCC;
  color: #000;
}

.navmenu a:hover {
  color: #000;
  font-weight: bolder;
}

.clearfloat {
  clear: both;
  margin: 0;
  padding: 0;
}

.wrapper {
  z-index: 1;
  width: 1050px;
  margin-left: auto;
  margin-right: auto;
}
<div class="wrapper">
  <div class="navmenu">
    <ul>
      <li><a class="long bold" href="Electrical Equipment Reliability 8-12-2014 Sec.pdf" target="_blank">Electronics<br>Reliability Paper</a>
      </li>
      <!--end main LI-->
    </ul>
    <!--end main UL-->
  </div>
  <!--end navmenu-->
  <div class="navmenu">
    <ul>
      <li><a class="bold" href="A-Board Insurance Claim Analysis 1-4-2015 small.pdf" target="_blank">Case Report Example</a>
      </li>
      <!--end main LI-->
    </ul>
    <!--end main UL-->
  </div>
  <!--end navmenu-->
  <div class="navmenu">
    <ul>
      <li><a class="bold long" href="dui.pdf" target="_blank">Attorney<br>Commentaries</a></li>
      </li>
      <!--end main LI-->
    </ul>
    <!--end main UL-->
  </div>
  <!--end navmenu-->
  <div class="navmenu">
    <ul>
      <li><a class="bold long" href="Case Experience Synopsis.pdf">Partial Case<br>Experience Summary</a>
    </ul>
    <!--end inner UL-->
    </li>
    <!--end main LI-->
    </ul>
    <!--end main UL-->
  </div>
  <!--end navmenu-->
  <div class="navmenu">
    <ul>
      <li><a class="bold" href="https://www.myfloridalicense.com/LicenseDetail.asp?SID=&id=68D81F7B226A04EF73021FA90FD37339" target="_blank">FL State License</a>
      </li>
      <!--end main LI-->
    </ul>
    <!--end main UL-->
  </div>
  <!--end navmenu-->
</div>
<!--end wrapper-->

Upvotes: 1

Views: 56

Answers (1)

Chris Hawkes
Chris Hawkes

Reputation: 12410

Why not just put

.navmenu {
    padding: 0;
    z-index: 2;
    clear: none;
    margin-top: -13px;
    margin-left: 0;
    margin-right: 0;
}

Upvotes: 1

Related Questions