• 0

CSS Dropdown help - no IE7 support?


Question

site in question: SunriseHairDesign.com

Using unordered lists (UL LI) with CSS for navigation drop-downs and a menu of services. It works perfectly in IE8, Chrome, FF, Safari, etc., etc. I knew it wouldn't work in IE6 (Using alpha-tran PNGs, etc), but I thought it would work in IE7 at the least. In IE7, the drop-down menus show up under text and you can't move your mouse to many other options. On the Services page, the mouseover changes the colors of the cells. It works great in IE8 and standards-based browsers, but in IE7, it's all sorts of messed up.

I'd really appreciate some insight into what I'm doing wrong. Here is some code:

Navigation CSS (Partial):

/* *****************NAVIGATION******************** */
#navi { position: relative; float: left; clear: right; width: 896px; left: 50%; margin-left: -448px; padding: 2em 0 2em 0; list-style: none; }
#nav, #nav ul { padding: 0; margin: 0; list-style: none; line-height: 1; z-index: 9999; }
#nav a { display: block; width: 12.8em; color: transparent; }
#nav li { float: left; width: 12.8em; }
#nav li ul { position: absolute; width: 12.8em; left: -999em; }
#nav li:hover ul, #nav li.sfhover ul { left: auto; }
#nav li ul ul { margin: -2.5em 0 0 12.8em; }
#nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; }
#nav_sl { background: url(images/nav/sl.png); width: 12.8em; height: 3em; }
#nav_sl:hover { background: url(images/nav/sl_o.png); }
#nav_se { background: url(images/nav/se.png); width: 12.8em; height: 3em; }
#nav_se:hover { background: url(images/nav/se_o.png); }
#nav_gc { background: url(images/nav/gc.png); width: 12.8em; height: 3em; }
#nav_gc:hover { background: url(images/nav/gc_o.png); }

The menu:

<div id="navi">
        	<ul id="nav">
            	<li><a href="/index2.php"><div id="nav_sl"></div></a>
                	<ul>
                    	<li><a href="/pages/localsupport"><div id="nav_gb"></div></a>
                        	<ul>
                            	<li><a href="/pages/locksoflove"><div id="nav_ll"></div></a></li>
                            </ul>
                        </li>
                        <li><a href="/pages/policies"><div id="nav_po"></div></a></li>
                        <li><a href="/pages/map/"><div id="nav_md"></div></a></li>
                    </ul>
                </li>                              
            	<li><a href="/pages/services"><div id="nav_se"></div></a>
                	<ul>
                    	&lt;li&gt;&lt;a href="/pages/services/index.php#color"><divnav_cs"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/services/index.php#haircuts"><divnav_hc"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/services/index.php#special"><divnav_ss"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/services/index.php#perms"><divnav_pm"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/services/index.php#waxing"><divnav_wx"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/extensions"&gt;&lt;div id="nav_et"&gt;&lt;/div&gt;&lt;/a&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
				&lt;li&gt;&lt;a href="/pages/color"&gt;&lt;div id="nav_co"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/pages/experts"&gt;&lt;div id="nav_ex"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/pages/products"&gt;&lt;div id="nav_pr"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/pages/giftcert"&gt;&lt;div id="nav_gc"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/pages/contact"&gt;&lt;div id="nav_cn"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;/div&gt;

The Table CSS:

#srvtable { width: 35em; float: left; color: #FFF; display:table; }
#prdtable { width: 50em; float: left; color: #FFF; display:table; }
#srvtable ul, #prdtable ul { display:table-row; width: 100%; }
#srvtable ul li { display: table-cell; padding: .5em; width: 8%; text-align: center; }
#prdtable ul li { display: table-cell; padding: .5em; }
#srvtable ul li.title { font-weight: bold; font-size: 2em; background: url(images/tblhead.jpg) repeat-x top left; color: #FFF; text-align: center; height: 1em; width: auto; }
#srvtable ul.odd, #prdtable ul.odd { font-size: 1.6em; background: #211005; }
#srvtable ul.even, #prdtable ul.even { font-size: 1.6em; background: #401c05; }
#srvtable ul.odd:hover li, #srvtable ul.even:hover li, #prdtable ul.odd:hover li, #prdtable ul.even:hover li { background: #b66527; }
ul.even li a, ul.odd li a, ul.even li a:visited, ul.odd li a:visited { color: #FFF; text-decoration: none; }

The Table (partial):

&lt;div id="srvtable"&gt;
&lt;br /&gt;
&lt;ul&gt;
    &lt;li class="title"&gt;&lt;a name="color"&gt;Color Services&lt;/a&gt;&lt;/li&gt;
    &lt;li class="title"&gt;From&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;Full Foils&lt;/li&gt;
    &lt;li&gt;$84&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Partial Foils&lt;/li&gt;
    &lt;li&gt;$74&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;Color Retouch&lt;/li&gt;
    &lt;li&gt;$64&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Initial Color&lt;/li&gt;
    &lt;li&gt;$64&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;Additional Color (per color)&lt;/li&gt;
    &lt;li&gt;$20&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Overlays &amp; Add-on Color&lt;/li&gt;
    &lt;li&gt;$20&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;&lt;10 Foils (per foil)&lt;/li&gt;
    &lt;li&gt;$7&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Cap Highlights&lt;/li&gt;
    &lt;li&gt;$43&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;Corrective Color (by consultation only)&lt;/li&gt;
    &lt;li&gt;per hr.&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Men's Color&lt;/li&gt;
    &lt;li&gt;$43&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
    &lt;li class="title"&gt;&lt;a name="haircuts"&gt;Hair Cuts&lt;/a&gt;&lt;/li&gt;
	&lt;li class="title"&gt;From&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;

Thanks!

Link to comment
https://www.neowin.net/forum/topic/892764-css-dropdown-help-no-ie7-support/
Share on other sites

3 answers to this question

Recommended Posts

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Right Click on My Computer Icon -> Properties(?)
    • HomeBank 5.9.2 by Razvan Serea HomeBank is a free software (as in "free speech" and also as in "free beer") that will assist you to manage your personal accounting. It is designed to easy to use and be able to analyse your personal finance and budget in detail using powerful filtering tools and beautiful charts. If you are looking for a completely free and easy application to manage your personal accounting, budget, finance then HomeBank should be the software of choice. HomeBank also benefits of more than 19 years of user experience and feedback, and is translated by its users in around 56 languages. Highlights: Cross platform, supports GNU/Linux, Microsoft Windows, Mac OS X Import easily from Intuit Quicken, Microsoft Money or other software Import bank account statements (OFX, QIF, CSV, QFX) Duplicate transaction detection Automatic cheque numbering Various account types : Bank, Cash, Asset, Credit card, Liability Scheduled transaction Category split Internal transfer Month/Annual budget Dynamic powerful reports with charts Automatic category/payee assignment Vehicule cost HomeBank 5.9.2 fixes: bugfix: #2112135 scheduled with limitation don't stop and goes erroneous data bugfix: #2111663 variable scope issue in ui-assign.c bugfix: #2111359 remind status not synced in transfers Download: HomeBank 5.9.2 | 20.2 MB (Open Source) Download: 3rd party packages (macOSX. Ubuntu...etc) View: HomeBank Website | Support | Features | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • How long until the Windows 11 hating bots come and say that Windows 11 committed atrocities against their family and their dog?
    • If you never consented to cookies (required), and you're blocking ad domains and you never see ads on Neowin (despite whitelisting) wouldn't you agree the adblock popup notice is doing what it is supposed to do?
  • Recent Achievements

    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      400
    2. 2
      +FloatingFatMan
      178
    3. 3
      snowy owl
      171
    4. 4
      ATLien_0
      169
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!