#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    6
    Rep Power
    0

    Overlapping Text in List IE 8


    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 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.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    6
    Rep Power
    0
    It appears adding auto to the margin in this line resolved it:

    #subnav ul li { display: inline-block; position:relative; padding: 0; margin: 0 auto; }

    Does this make sense to the CSS gurus?

IMN logo majestic logo threadwatch logo seochat tools logo