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 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Navigation problems in ie7

    Hi, I need some help if possible! I'm designing a website for a local enterprise charity and I'm having trouble making the navigation work in ie7 - it works in all other browsers but in ie7 the nav bar is there but it's like it's a solid image, the rollover effect doesn't work and the links are ignored like they aren't there. The website can be seen in its temporary location here

    This is the navigation code:
    <div id="nav">
    <ul>
    <li<?php if ($pagename == 'home'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>" title="home">Home</a></li>
    <li<?php if ($pagename == 'about'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/about.php" title="about">About</a></li>
    <li<?php if ($pagename == 'news'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/news.php" title="news">News</a></li>
    <li<?php if ($pagename == 'resources'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/resources.php" title="resources">Resources</a></li>
    <li<?php if ($pagename == 'newsletters'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/newsletters.php" title="Newsletters">Newsletters</a></li>
    <li<?php if ($pagename == 'gallery'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/gallery.php" title="gallery">Gallery</a></li>
    <li<?php if ($pagename == '5blossom'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/5blossom.php" title="5blossom">Make £5 Blossom</a></li>
    <li<?php if ($pagename == 'big13'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/big13.php" title="big13">The Big 13</a></li>
    <li<?php if ($pagename == 'warwick'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/warwick.php" title="warwick">The Warwick Award</a></li>
    <li<?php if ($pagename == 'young'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/young.php" title="young">Young Entrepreneurs</a></li>
    <li<?php if ($pagename == 'game'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/game.php" title="game">Interactive game</a></li>
    <li<?php if ($pagename == 'links'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/links.php" title="links">Links</a></li>
    <li<?php if ($pagename == 'partners'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/partners.php" title="partners">Partners</a></li>
    <li<?php if ($pagename == 'About'){echo ' class="current"';}?>><a href="<?php echo $root_dir;?>/contact.php" title="contact us">Contact us</a></li>
    </ul>
    </div><!--nav close-->
    And this is the CSS
    #nav {
    width: 260px;
    display: block;
    margin-left: -1000px;
    margin-top: 40px;
    float: left;
    text-align:right;
    }

    #nav ul {
    list-style: none;
    display: block;
    text-align: right;
    }

    #nav ul li {
    z-index: 10;
    width: 275px;
    text-align: right;
    margin-left: 1000px;
    padding-top: 5px;
    list-style:none;
    display: block;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
    }

    #nav ul li a {
    color: #000;
    background: url(images/nav.gif) right 0 no-repeat #ffa200;
    height: 29px;
    margin-left: -700px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 500px;
    padding-right: 20px;
    text-align: right;
    }

    #nav ul li a:hover {
    background: url(images/nav-hover.gif) right 0 no-repeat #cd0015;
    padding-left: 500px;
    padding-right: 20px;
    color: white;
    }

    #nav ul li a:current {
    background:url(images/nav-hover.gif) #cd0015 right 0 no-repeat;
    padding-right: 20px;
    }
    I can't tell if the problem is the CSS or the links themselves, I'm at a loss! Been trying to find a solution for months Please help!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello NicolaHWS,
    Right off I notice you don't float .logo and use a negative margin to bring .tabs up alongside it. IE7 is famous for having trouble with negative margins...I pretty much make it a rule never to use them. If there is ever a case where negative margins seem to be the only way, it may actually be ap that is needed.
    Not always, negative margins have their place. I don't think this is an example though.


    So...
    Floats are how we put elements beside each other. When you don't float .logo, .tabs has no way of being beside it.

    Look at it this way once -
    Code:
    #header .logo {
        background: url("images/logo.gif") no-repeat scroll left top transparent;
        float: left;
        height: 112px;
        margin-top: 20px;
        width: 363px;
    }
    #header .tabs {
        float: right;
        /*margin: -148px auto;*/
        width: 500px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for getting back to me so quick

    Ironically, the tabs work fine in ie7, is the navigation down the side that's refusing to work. If I can't find a way I might just have to have in ie7 stylesheet and make the nav different, just won't look nearly as pretty is all Frigging ie7! Always screw up my designs, I usually don't bother with it anymore but this one will be looked at a lot by school pupils, and schools often have outdated browsers

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Code:
    #nav {
        display: block;
        float: left;
        margin-left: -1000px;
        margin-top: 40px;
        text-align: right;
        width: 260px;
    }
    #nav ul li {
        display: block;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 18px;
        list-style: none outside none;
        margin-bottom: 20px;
        margin-left: 1000px;
        padding-top: 5px;
        text-align: right;
        width: 275px;
        z-index: 10;
    }
    I would question the reason for any left/right margin that huge.

    In your ie7.css -
    Code:
    #nav ul {
    	width: 960px;
    	list-style: none;
    	margin: 0 auto;
    	float: right;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    The margin is that big to make absolutely sure no matter how high a resolution someone's screen is the background goes all the way across, I did try reducing it right down to see if it made a difference and it didn't

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by NicolaHWS View Post
    The margin is that big to make absolutely sure no matter how high a resolution someone's screen is the background goes all the way across, I did try reducing it right down to see if it made a difference and it didn't
    Not sure what that means since your background is just a color. Since you don't specify a color, it's whatever I've set my browser with on my end.

    It looks like you mean for #nav and #wrapper to be beside each other. That's normally done by floating one or both of those elements. Look at a simplified example of a 2-column layout here. It's very easy to adapt that to a full width page like yours.
    The three things I highlighted in my previous post, the huge margins (both -/+) and the width of the ul are what are causing your problem. That and not understanding how floats solve your problem (like floating 100% width elements).

    Have a look at a float tutorial here.

    Another problem, you generically apply margin: 0 auto; to almost all your div elements. Auto margins is a centering technique and putting it on full width elements like the body of your document or an element that is supposed to go beside another like your #wrapper doesn't make sense.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your help everyone, I've got it working now. Still not sure how, I just fiddled and prodded until it worked!


  •  

    Posting Permissions

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