SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drop down problem

    Hi

    Please can someone offer some advice on the drop down nav in right hand column at:

    http://www.imageworksweb.co.uk/tcir_web/

    Not sure what is the best way to do it...at the moment it is list items for nav, separated by img within li. Is this the best approach?

    Also the drop downs do not work in ie7 - please can someone take a look - my brain is addled with trying to sort it....many, many thanks in advance.

    Gavin

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. Each <img> shouldn't be in its own <li>. I'd use background images for this, since they are presentational.

    Try giving a z-index to the <li>s.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

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

    IE likes the z-index to descend when you overlap elements like that.

    e.g.
    Code:
            <ul>
                <li style="z-index:10"><a href="#">ABOUT US</a>
                    <ul>
                        <li><a href="our-company.html">OUR COMPANY</a></li>
                        <li><a href="our-philosophy.html">OUR PHILOSOPHY</a></li>
                        <li><a href="our-people.html">OUR PEOPLE</a></li>
                    </ul>
                </li>
                <li style="z-index:9"> <img src="http://www.imageworksweb.co.uk/tcir_web/resources/nav-about.jpg" /></li>
                <li style="z-index:8"><a href="#">WHAT WE DO</a>
                    <ul>
                        <li><a href="analyze.html">ANALYZE</a></li>
                        <li><a href="design.html">DESIGN</a></li>
                        <li><a href="build.html">BUILD</a></li>
                        <li><a href="manage.html">MANAGE</a></li>
                    </ul>
                </li>
                <li style="z-index:7"><img src="http://www.imageworksweb.co.uk/tcir_web/resources/nav-what.jpg" /></li>
                <li><a href="#">PROJECTS</a>
                    <ul>
                        <li><a href="projects-british-isles.html">BRITISH ISLES</a></li>
                        <li><a href="projects-north-america.html">NORTH AMERICA</a></li>
                    </ul>
                </li>
                <li><img src="http://www.imageworksweb.co.uk/tcir_web/resources/nav-projects.jpg" /></li>
                <li><a href="latest-news.html">LATEST NEWS</a></li>
                <li><img src="http://www.imageworksweb.co.uk/tcir_web/resources/nav-news.jpg" /></li>
            </ul>
    (inline styles for example only)

    However I'm guessing that if you put the image in the background (as Kravvitz suggested above) then you won't have this problem. Just add some padding bottom to the top level list and apply the background image to the bottom of the element.

    e.g.Very roughly like this:

    Code:
    #nav ul li.firstimage{
    background:#54287d url(http://www.imageworksweb.co.uk/tcir_web/resources/nav-about.jpg) no-repeat left bottom;
    padding-bottom:100px
    }
    #nav ul li li{background:transparent;padding:0}
    You will have to class each toplevel list so that you can use a different image for each.


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
  •