No replies
Mschoaf
Mschoaf's picture
Offline
newbie
Last seen: 8 years 22 weeks ago
Timezone: GMT-6
Joined: 2012-12-11
Posts: 1
Points: 2

Looking for some help with styling of text links in a list. Bascially the list looks perfect in Firefox, Chrome and IE9 but in IE8 wherever there is a space inside of the link (eg. "Illinois Open") the text seems to overlap. Once the link gets hovered on, the text reflows properly. I can "fix" it by using a non-breaking space in place of the actual spaces, but there has got to be a better fix. Dev site at http://ipgadev.ipcinc.net/foundation/index.asp.

List:

<nav id="subnav">
 <ul>
  <li class="first"><a href="/index.asp">Overview</a></li>
  <li><a href="tournaments/2013/index.asp">Community Programs</a></li>
  <li><a href="/illinoisopen/index.asp">Scholarships and Awards</a></li>
  <li class="last"><a href="/foundation/index.asp">Illinois Golf Hall of Fame</a></li>
 </ul>
</nav>

Styling navigation elements with:

#subnav ul { list-style:none; position:relative; margin: 0; padding: 0px; text-align:left; } 
#subnav ul li { display: inline-block; position:relative; padding: 0; margin: 0; }
#subnav ul li a { display:inline-block; padding: 3px 8px 3px 8px; text-decoration: none; color: #686868; font-size: 1.0em; line-height: 24px; font-weight: normal; margin: 0 auto; overflow:hidden; border-right: 1px solid #ccc; }
#subnav ul li a:hover { color: #0082c8; }
#subnav ul li a.active { color: #b49956; }
#subnav ul li a.active:hover { color: #b49956; }
#subnav ul li.first a { border-left: 1px solid #ccc;;}

Any direction would be great. Thanks.