SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: drop down problem
-
Sep 18, 2007, 09:01 #1
- 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
-
Sep 18, 2007, 23:22 #2
- 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.
-
Sep 19, 2007, 03:27 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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>
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}
Bookmarks