Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Location
    Seattle
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal Nav Bar Staggering in IE

    I used a horizontal navigation made up of 4 images linking to the other pages in the site; all four images are side-by-side comprising a horizontal navigation. The site was functioning/rendering correctly in Firefox and IE8, but the buttons are staggering in IE 7 (and likely in previous versions).

    I've scoured the net for a few fixes to no avail. I would appreciate any wisdom.

    Here is the HTML:
    <ol>

    <li>
    <a href="contact.html"><img src="Images/contact.jpg" width="200" height="40" alt="Contact Button"/></a></li>
    <li>
    <a href="affiliations.html"><img src="Images/affiliations2.jpg" width="200" height="40" alt="Affiliations button" /></a>
    </li>
    <li>
    <a href="aboutkaren.html"><img src="Images/aboutKaren.jpg" width="200" height="40" alt="About Karen Button" /></a>
    </li>
    <li><a href="index.html"><img src="Images/homebutton.jpg" width="200" height="40" alt="Home button" /></a></li>
    </ol>

    </div>

    And here is the related CSS:

    div#navbar {
    position: relative;
    margin: 0 auto;
    width:800px;
    height: 40px;
    z-index: 100;
    border: 1pt solid;
    border-color: rgb(153, 102, 51);
    background-color: rgb(254, 250, 235);
    }

    ol {
    list-style-type: none;
    width: 100%;
    overflow: hidden;
    }

    Any help would be greatly appreciated. Thanks so much.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think there must be a bit more to your css as that isn't going to give you a horizontal menu. Also, it might be better to use an unordered list <ul> rather than an ordered list <ol> - as your list isn't ordered.

    Re your staggering problem, give it a try by adding:

    Code:
    #navbar ol li {display:inline}
    If this doesn't fix the problem, please post your entire code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •