Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Nav ul won't display properly in IE8

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 17, 2010 at 4:06 pm #30721
    angela1138
    Participant

    Hello! I am new to these forums and still sort of a noob to CSS. Thank you in advance for any help!

    I an working on a new site for a client and trying to get the header/nav right before moving on. I am using an unordered list for the nav and it works beautifully in Safari, FF, Opera, and Chrome. But of course, its not showing right in IE8. Any idea why?

    Here is a link to a screen of what it is doing in IE8 (I blurred out the logo as I can not disclose the client yet.) http://blueaeonstudio.com/img/Untitled-1.jpg

    The 3 links should line up nicely in the yellow boxes and they are doing that in all other browsers.

    Here is my CSS Code:  
    @charset "utf-8";<br />
    /* CSS Document */<br />
    <br />
    body {<br />
    font-size:62.75%;<br />
    font-family:Verdana, Arial, Helvetica, sans-serif;<br />
    background:url(images/bg.jpg) repeat-x top;<br />
    }<br />
    <br />
    li {<br />
    font-size:1.8em;<br />
    }<br />
    <br />
    div#page-wrap {<br />
    width:962px;<br />
    background:url(images/header-nav.png) no-repeat;<br />
    margin: 0 auto;<br />
    }<br />
    <br />
    ul#nav {<br />
    height:158px;<br />
    list-style:none;<br />
    padding-left:313px;<br />
    }<br />
    ul#nav li a {<br />
    display:inline-block;<br />
    float:left;<br />
    width:213px;<br />
    margin-top:109px;<br />
    color:black;<br />
    font-weight:bold;<br />
    text-decoration:none;<br />
    }<br />
    ul#nav li a:hover, ul#nav li a:active {<br />
    color:white;<br />
    }<br />




And my html:  
    <br />
    <html xmlns="http://www.w3.org/1999/xhtml"><br />
    <br />
    <body><br />
    <br />
    <div id="page-wrap"><br />
    <br />
    <ul id="nav"><br />
    <li><br />
    <div align="center"><a href="#">Join Us</a></div><br />
    </li><br />
    <li><br />
    <div align="center"><a href="#">How It Works</a></div><br />
    </li><br />
    <li><br />
    <div align="center"><a href="#">Who We Are</a></div><br />
    </li><br />
    </ul><br />
    <br />
    <br />
    </div><br />
    <br />
    <br />
    </body><br />
    </html><br />
    November 18, 2010 at 12:52 am #74752
    angela1138
    Participant

    That worked perfectly, thank you!

    November 18, 2010 at 1:46 am #74753
    sylenix
    Member

    you’re welcome ma’am! ΓΌ

    January 21, 2014 at 2:07 am #160870
    JiminSA
    Participant

    I can’t see the solution – all I get in sylenix’s response is this … “add/replace your meta with this” …
    and then an empty black rectangle where his/her meta info should be??

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.