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
    Jul 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Horizontal NavBar is Verticle in IE

    Hello,

    Please help, I have exchanged my javascript horizontal navigation bar with rollover images for a nice CSS one using 1 image for both states of the button.

    Everything in Firefox is perfect but in IE the list is showing as a verticle, not horizontal, list.

    The result is my nav bar looks like a staircase as they all stagger down the page.

    There's nothing too fancy going on, the CSS is:

    #buttsamples a {
    background: url(images/buttsamples.gif) top;
    width: 77px;
    height: 42px;
    float:right;
    display:inline;
    margin-left: 0;
    }
    #buttsamples a:hover {
    background: url(images/buttsamples.gif) no-repeat bottom;
    }

    And HTML:

    <div id="menus">
    <li id="butthome"><a href="index.html"></a></li>
    <li id="buttbook"><a href="howtobook.html"></a></li>
    <li id="buttrates"><a href="rates.html"></a></li>
    <li id="buttfaq"><a href="faqs.html"></a></li>
    <li id="buttsamples"><a href="samples.html"></a></li>
    <li id="buttclients"><a href="clients.html"></a></li>
    <li id="buttcontacts"><a href="contacts.html"></a></li>
    </div>

    Any help you can lend would save my bacon.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <div id="menus">
    <li id="butthome"><a href="index.html"></a></li>
    <li id="buttbook"><a href="howtobook.html"></a></li>
    <li id="buttrates"><a href="rates.html"></a></li>
    <li id="buttfaq"><a href="faqs.html"></a></li>
    <li id="buttsamples"><a href="samples.html"></a></li>
    <li id="buttclients"><a href="clients.html"></a></li>
    <li id="buttcontacts"><a href="contacts.html"></a></li>
    </div>
    <li> can't be nested under <div> as the immediate child. You need to use a <ul> there instead of <div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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