IE8 Fix for my <ul> ?

[conor909]

There seems to be zero styling on my <ul> here in ie8

I have two navigations floating on either side of my logo. The floats seem to work ok too, although the bottom:0px; is not working.

All works perfect in FF and safari.

Any suggestions ?


CSS

.nav-wrapper nav ul  {
	position:absolute;
	display:inline-block;
	border-top:1px solid #666;
	bottom:0px;
	width:400px;
}

.nav-wrapper nav ul li  {
    float:left;
    display:block;
	width:133px;
}

.nav-wrapper nav ul li a {
	color:#000;
    list-style:none;
    text-decoration:none;
    font-size:80%;
    display: block;
	padding:1em 0.5em 1em 0.5em;
	text-align:center;
}

.nav-wrapper nav ul li a:hover {
    background-color:#e8e8e8;
    position: relative;
}

HTML

<div id="nav-left">
<div class="nav-wrapper">
       <nav>
          <ul>
            <li>
              <a href="#">NEWS</a>
            </li>
               <li>
              <a href="#">COLLECTIONS</a>
            </li>
               <li>
              <a href="#">RULES</a>
            </li>
          </ul>
      </nav>
    </div><!--end of nav-wrapper-->
  </div><!--left-nav-->

<div id="nav-right">
<div class="nav-wrapper">
       <nav>
          <ul>
            <li>
              <a href="#">TEST</a>
            </li>
               <li>
              <a href="#">TEST</a>
            </li>
               <li>
              <a href="#">TEST</a>
            </li>
          </ul>
      </nav>
    </div><!--end of nav-wrapper-->
  </div><!--right-nav-->

[toicontien]

Move "list-style:none;" into the .nav-wrapper nav ul style declaration. That CSS property will not affect <a> tags.

Also, you might need to provide some default styling for the <nav> element, which IE8 does not support.