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

    Help with CSS Navigation

    I noticed my navigation on a site I built, www.houseofhunger.com, does not work in IE and I'm unsure of why. I tried playing around with it but no luck. It works fine in Firefox though. Here is my HTML and CSS for the navigation.

    HTML:

    <ul id="main_nav">
    <li><a href="http://houseofhunger.com/" accesskey="3" id="home" title="Home">Home</a></li>
    <li><a href="http://houseofhunger.com/about" accesskey="4" id="about" title="About">About</a></li>
    <li><a href="http://houseofhunger.com/menu" accesskey="5" id="menu" title="Menu">Menu</a></li>
    <li><a href="http://houseofhunger.com/connect" accesskey="6" id="connect" title="Connect">Connect</a></li>
    </ul>
    </div>

    CSS:


    #main_nav { list-style: none; margin: 0; padding: 0;}
    #main_nav li { float: left; position: relative; top: -75px; left: 50%;}
    #main_nav li a { text-indent: -999999px; display: block; height: 50px; }


    #home { background: url('images/home.png')-300px 0; width: 100px; }
    #home:hover { background: url('images/home.png') 0 0 !important; }
    #home.active { background: url('/images/home.png') -150px 0; }

    #main_nav:hover li a#home { background-position: -150px 0; }

    #about { background: url('images/about.png')-300px 0; width: 100px; }
    #about:hover { background: url('images/about.png') 0 0 !important; }
    #about.active { background: url('/images/about.png') -150px 0; }

    #main_nav:hover li a#about { background-position: -150px 0; }

    #menu { background: url('images/menu.png')-300px 0; width: 100px; }
    #menu:hover { background: url('images/menu.png') 0 0 !important; }
    #menu.active { background: url('images/menu.png') -150px 0; }

    #main_nav:hover li a#menu { background-position: -150px 0; }


    #connect { background: url('images/connect.png')-300px 0; width: 100px; }
    #connect:hover { background: url('images/connect.png') 0 0 !important; }
    #connect.active { background: url('images/connect.png') -150px 0; }

    #main_nav:hover li a#connect { background-position: -150px 0; }

  • #2
    New Coder
    Join Date
    Feb 2011
    Location
    Melbourne, Australia
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    your default background images aren't being displayed in ie for some reason.

    it looks like theres no space between the ) and the -300px

    #home { background: url('images/home.png')-300px 0; width: 100px; }
    should be
    #home { background: url('images/home.png') -300px 0; width: 100px; }
    Last edited by izrafel; 05-11-2011 at 07:21 AM.


  •  

    Posting Permissions

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