SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why does this nav bar NOT work in IE7?

    Hello,

    Take a look at the following page

    If you look in Firefox and hover over the nav bar you will see a dropdown appear, however this does not happen in IE7, can anyone help me find out why?

    Thanks,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Not sure about IE7, but that menu looks like it needs more work in all browsers. Firstly, if you want to use images, investigate image "sprites", so that there isn't a long delay when a user hovers over the menu links. (I must say, also, that the orange-white mix on hover doesn't work at all. It looks like the menu is broken, I'm afraid, so I'd lose it. Clever, but too clever. )

    If I were you, I'd start again, using a more standard and reliable drop menu method.

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph,

    Those hover state orange white mix is just for testing purposes thats all I just need to cut out the actual mouse over button in photoshop, wanted to get the nav working properly first ..

    I see what you mean about the long delay, i have looked into sprites and have used that method before. However in regards to the nav at it's current state, you mentioned that it needs "more work in all browsers".. Aside from the loading problem was there anything else that you saw?

    Regards,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by billy_111 View Post
    Aside from the loading problem was there anything else that you saw?
    I'm not keen on the code structure, which is why I pointed you to Paul's example. Also, the Gym Equipment dropdown stretches too far to the right for my liking. But I guess the main thing was the slow rollovers. Still, I'd suggest making sure you are using the best dropdown solution before trying to debug all browsers. With the best solution, you may not need to.

  5. #5
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point Ralph. Well you guys on this forum know best and it's always a good idea to listen to advice given

    Sooo, i will have a go at using the method you posted in the link. Before i start it, with that method would i be able to get the dropdown looking like this ?

    The dropdown links will be dynamic so the heading and subcategories will all be pulled out from a database. Can i still use your suggested link to accomplish this or would you suggest something else?

    Many thanks,

    Regards,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Certainly that dropdown can be modified for that purpose. I can't advise on the database aspects, but I guess you'd just create a more complex setup within each sub LI, such as a div with columns of some sort. Persoanlly I don't much like dropdowns, preferring that users drill down into the site intuitively. Think of mobile users, who can't access that dropdown anyway.

  7. #7
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK i have had a go at using the example you suggested, see my attempt here

    Again, ignore the hovers i will be using sprites eventually

    Anyway, when you hover over "Gardening" for example, it should show the UL within the Li 4 times..

    But it only shows the one. Could you possible point me in the right direction?

    Many thanks,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by billy_111 View Post
    Anyway, when you hover over "Gardening" for example, it should show the UL within the Li 4 times..

    But it only shows the one. Could you possible point me in the right direction?

    Many thanks,
    I thought you had a working version of this in another thread?

    You are showing the ul on hover and it is placed absolutely into position so all 4 uls will be placed on top of each other exactly and show as one.

    The 4 uls should be wrapped in one parent div of correct width (not in a div around each ul) and then the uls floated left to line up horizontally if that was what you wanted.

    You would then instead of saying #nav li:hover ul{margin-left:0} you would say #nav li:hover div{margin-left:0} and it would be the div that is absolutely positioned instead of the nested ul.

    I'm sure I saw you had a working example of this earlier though?

  9. #9
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Been a long time, how's things?

    I was working on one earlier, but it was acting weird. As the IE7 issue was a different issue i thought i would post another thread as it was more cross browser issues as oppose to the actual creation of the nav.

    You can merge both threads if you want pal?

    Many thanks,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by billy_111 View Post
    Hi Paul,

    Been a long time, how's things?
    Fine thanks

    You can merge both threads if you want pal?
    I'll leave it as it is for now as the menu seems to have evolved

    Let us know if you are still stuck.

  11. #11
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brill,

    OK i see what you mean about the nav bar. First things first, i have wrapped the <ul> in one parent div.

    Then i have added ul#nav li div { position: absolute; }. I know you said i need to add a width but the problem is that this will by dynamic so the width will always be different. It needs to look like this.

    Then i have also added #nav li:hover div{margin-left:0} so that it is the div that shows up on hover.

    But this doesn't seem to be doing anything? Have i missed something out?

    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes you missed the styles for the div that were previously assigned to the ul

    However because you want this to be a fluid width you will need to change it slightly because IE7 won't let the 4 uls line up horizontally because the parent is always shrink wrapping them.

    You'll need to add another nested div like so:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
    <!-- Stylesheets -->
    <style type="text/css">
    /*
        Document   : nav
        Created on : 19-Jun-2011, 19:36:21
        Author     : e3creative
    */
    
    * {
        padding: 0;
        margin: 0;
    }
    /* BASIC STRUCTURE */
    body {
        font-family: Arial;
        font-size: 12px;
    }
    /* NAVIGATION LINKS */
    #home-link {
        width:100px;
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/home-off.jpg') no-repeat 0 0;
    }
    #gardening-link {
        width:103px;
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gardening-off.jpg') no-repeat 0 0;
    }
    #gardening-link:hover {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gardening-on.jpg') no-repeat 0 0;
    }
    #gardening-link.current {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gardening-on.jpg') no-repeat 0 0;
    }
    #furnishing-link {
        width:101px;
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/furnishing-off.jpg') no-repeat 0 0;
    }
    #furnishing-link:hover {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/furnishing-on.jpg') no-repeat 0 0;
    }
    #furnishing-link.current {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/furnishing-on.jpg') no-repeat 0 0;
    }
    #electronics-link {
        width:105px;
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/electronics-off.jpg') no-repeat 0 0;
    }
    #electronics-link:hover {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/electronics-on.jpg') no-repeat 0 0;
    }
    #electronics-link.current {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/electronics-on.jpg') no-repeat 0 0;
    }
    #clothing-link {
        width:84px;
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/clothing-off.jpg') no-repeat 0 0;
    }
    #clothing-link:hover {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/clothing-on.jpg') no-repeat 0 0;
    }
    #clothing-link.current {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/clothing-on.jpg') no-repeat 0 0;
    }
    #toys-and-games-link {
        width:122px;
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/toys-and-games-off.jpg') no-repeat 0 0;
    }
    #toys-and-games-link:hover {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/toys-and-games-on.jpg') no-repeat 0 0;
    }
    #toys-and-games-link.current {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/toys-and-games-on.jpg') no-repeat 0 0;
    }
    #gym-equipment-link {
        width:131px;
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gym-equipment-off.jpg') no-repeat 0 0;
    }
    #gym-equipment-link:hover {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gym-equipment-on.jpg') no-repeat 0 0;
    }
    #gym-equipment-link.current {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/gym-equipment-on.jpg') no-repeat 0 0;
    }
    #pets-link {
        width:97px;
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/pets-off.jpg') no-repeat 0 0;
    }
    #pets-link:hover {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/pets-on.jpg') no-repeat 0 0;
    }
    #pets-link.current {
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/pets-on.jpg') no-repeat 0 0;
    }
    .text-indent {
        text-indent: -999px
    }
    ul#nav, ul#nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        color: #fff
    }
    ul#nav li {
        position: relative;
        float: left;
    }
    ul#nav li div.sub {
        margin-left: -999em;
        top: auto;
        left:0;
        position: absolute;
        width:auto;
    }
    ul#nav li div.sub div{
        float:left;
        margin-right:-999em;
        background:url('http://www.e3creative.co.uk/clients2/BargainClearanceWarehouse/application/nav/nav-bg.png');
    }
    
    ul#nav li ul {
        float: left;
    }
    ul#nav li a {
        display:block;
        padding: 10px 0;
        text-decoration: none;
    }
    ul#nav li ul li {
        min-width: 140px;
        float:left;
        clear:left;
    }
    ul#nav li ul li a {
        padding: 5px 10px;
        color: #fff
    }
    ul#nav li ul li a:hover {
        text-decoration: underline
    }
    ul#nav li:hover div.sub, ul#nav li.over div.sub {
        margin-left:0;
    }
    ul#nav ul h4 {
        background: #999;
        padding: 5px 10px;
        width:120px;
        font-size: 12px
    }
    </style>
    </head>
    <body>
    <ul id="nav">
        <li><a href="#" id="home-link" class="text-indent">Home</a></li>
        <li> <a href="#" id="gardening-link" class="text-indent">Gardening</a>
            <div class="sub">
                <div>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li> <a href="#" id="furnishing-link" class="text-indent">Furnishing</a>
            <div class="sub">
                <div>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li> <a href="#" id="electronics-link" class="text-indent">Electronics</a>
            <div class="sub">
                <div>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li> <a href="#" id="clothing-link" class="text-indent">Clothing</a>
            <div class="sub">
                <div>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li> <a href="#" id="toys-and-games-link" class="text-indent">Toys &amp; Games</a>
            <div class="sub">
                <div>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li> <a href="#" id="gym-equipment-link" class="text-indent">Gym Equipment</a>
            <div class="sub">
                <div>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li> <a href="#" id="pets-link" class="text-indent">Pets</a>
            <div class="sub">
                <div>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h4>Tables</h4>
                        </li>
                        <li><a href="">Wooden Tables</a></li>
                        <li><a href="">Glass Tables</a></li>
                        <li><a href="">Flat Pack</a></li>
                        <li><a href="">Metal Tables</a></li>
                        <li><a href="">Marble Tables</a></li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
    </body>
    </html>
    That is working back to IE7 now (couldn't check ie6 as you have no support built in).

    Usually in a mega menu you give the menu a fixed width and align it to the left of the whole menu and apply a fixed width. In your example you are moving the mege menu all along the line!

    Are you sure you have thought this through ?

    When you get to the end of the nav the menu will stretch right out of the right side of the window.

    (You should also do the hover states by changing the background position of a sprite and not loading a new image as there is a serious delay in your menu)

  13. #13
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much

    What do you think? Take a look now

    What i have done is when the nav is too long i have applied a negative left margin. Would you approve of this? (As from what i have seen you guys are the CSS gurus.)

    And i will use the sprites for sure, just wanted to get the nav looking how tit is up till now

    Let me know what you think and if there is anything i have done wrong
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  14. #14
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhh! I so should have listened to you

    See the nav in action

    This is now dynamic, "Gardening" and "Gym Equipment" have menu items. Only problem is that i have applied a minus left margin to Gym Equipment. Now the problem is that when there is only one <ul> the menu item appears way over to the left. So the minus left margin would somehow need to move towards the left when it will overflow the Nav.

    Is this possible?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You could try floating to the right for that element so it lines up.
    e.g.
    Code:
    ul#nav li div.gym-equipment-left div {float:right!important}
    I haven't tested the above and you will probably have to remove your negative margin.

  16. #16
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    This didn't work:

    ul#nav li:hover div.gym-equipment-left div{float:right!important}
    When i hovered over the link it added a scroll bar and i couldn't not scroll so far to the right to even see the menu item.

    So i tried with this:

    ul#nav li:hover div.gym-equipment-left{float:right!important}
    That looks a little better, but what you will see that it still over flows past the end of the nav, see here
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You need to make these changes as this is the only combination that seems to work in IE7.

    Code:
    ul#nav li:hover div.sub, ul#nav li.over div.sub {
        margin:0;
    }
    ul#nav li div.gym-equipment-left{
        left:auto;
        right:0;
        margin:-999em 0 0 0;
        width:800em;
    }
    ul#nav li div.gym-equipment-left div{
        float:right;
        margin:0;
        background-position:100% 0;
    }
    

  18. #18
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok first of all, thank you that works perfectly.

    Secondly, i understand most of the changes but 2. What does the margin:-999em 0 0 0; do and is the background-position:100% 0; an IE7 hack?

    Thanks again for your help Paul
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by billy_111 View Post
    Ok first of all, thank you that works perfectly.

    Secondly, i understand most of the changes but 2. What does the margin:-999em 0 0 0; do and is the background-position:100% 0; an IE7 hack?

    Thanks again for your help Paul
    The menu was being hidden by being dragged off to the left by 999em but when the position was set to right:0 instead of left:0 this margin didn't drag the menu anywhere but just made the element very wide and the menu always remained hidden in ie7. Therefore I initially hid the menu by dragging it up above the monitor instead and then just showing it on hover by setting margin:0 to bring it back.

    The background-position may not be necessary now but in one of the variations I tried it was needed it as it was showing out of position. It will do no harm so leave it in place.

  20. #20
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that pal, really appreciate it.

    I can finally get this site moving forward now

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy


Bookmarks

Posting Permissions

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