• 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

    • Windows 10 EOL is coming, so how many is “forced”? (to be prepared and not wait until the last moment in October?)
    • I guess more Windows users are switching on their desktops/laptops than people buying new Steam Decks. I wouldn't be surprised. Deck doesn't have the mainstream appeal of other handhelds, usually people who would want one already have one. Glad to see Linux go up!
    • Any news about Windows and Microsoft always brings up crazy people saying; - Windows 11 is terrible, it destroys my hardware, it had sex with my wife, it told the FBI that I visit shemale sites, it collects my data where I get illegal anime. Never use Windows 11, go for Linux and it will never have sex with your wife.
    • QOwnNotes 25.6.0 by Razvan Serea QOwnNotes is a open source (GPL) plain-text file notepad with markdown support and todo list manager for GNU/Linux, Mac OS X and Windows, that (optionally) works together with the notes application of ownCloud (or Nextcloud). So you are able to write down your thoughts with QOwnNotes and edit or search for them later from your mobile device (like with CloudNotes) or the ownCloud web-service. The notes are stored as plain text files and you can sync them with your ownCloud sync client. Of course other software, like Dropbox, Syncthing, Seafile or BitTorrent Sync can be used too. Features: the notes folder can be freely chosen (multiple note folders can be used) sub-string searching of notes is possible and search results are highlighted in the notes application can be operated with customizable keyboard shortcuts external changes of note files are watched (notes or note list are reloaded) older versions of your notes can be restored from your ownCloud server trashed notes can be restored from your ownCloud server differences between current note and externally changed note are showed in a dialog markdown highlighting of notes and a markdown preview mode notes are getting their name from the first line of the note text (just like in the ownCloud notes web-application) and the note text files are automatically renamed, if the the first line changes compatible with the notes web-application of ownCloud and mobile ownCloud notes applications compatible with ownCloud's selective sync feature by supporting an unlimited amount of note folders with the ability to choose the respective folder on your server manage your ownCloud todo lists (ownCloud tasks or Tasks Plus / Calendar Plus) or use an other CalDAV server to sync your tasks to encryption of notes (AES-256 is built in or you can use custom encryption methods like Keybase.io (encryption-keybase.qml) or PGP (encryption-pgp.qml)) dark mode theme support theming support for the markdown syntax highlighting all panels can be placed wherever you want, they can even float or stack (fully dockable) support for freedesktop theme icons, you can use QOwnNotes with your native desktop icons and with your favorite dark desktop theme support for hierarchical note tagging and note subfolders support for sharing notes on your ownCloud server portable mode for carrying QOwnNotes around on USB sticks Evernote import QOwnNotes is available in many different languages like English, German, French, Polish, Chinese, Japanese, Russian, Portuguese, Hungarian, Dutch and Spanish Changes in QOwnNotes 25.6.0: QOwnNotes now builds with with Botan 3, when built with the system Botan library (cmake build parameter -DBUILD_WITH_SYSTEM_BOTAN=ON), because of the end of life of Botan 2 (for #2786) Keep in mind that Botan 3 needs C++20, which causes issues on Qt5 QMake and Qt5 will still use the internal Botan 2 amalgamation Creating an amalgamation Botan 3 did work, but caused major issues with various build processes The filename in checksum files of the Qt6 AppImages in the releases on GitHub was fixed (for #3286) Download: QOwnNotes 25.6.0 | 37.3 MB (Open Source) Download: QOwnNotes for Other Operating Systems View: QOwnNotes Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • There are lots of older PC's that are now going to be unsupported on W10, but for modern systems, you should be able to update to W11. Even so, there are ways to bypass the official hardware requirements as well as the MSA (which imo is the bigger annoyance). My only gripe with W11 is all the telemetry collection / bloatware - yes, it is a problem compared to W10 and Linux.
  • Recent Achievements

    • Week One Done
      Epaminombas earned a badge
      Week One Done
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
    • Week One Done
      rollconults earned a badge
      Week One Done
    • One Month Later
      lilred1938 earned a badge
      One Month Later
    • Week One Done
      lilred1938 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      148
    2. 2
      Xenon
      132
    3. 3
      ATLien_0
      123
    4. 4
      +Edouard
      103
    5. 5
      snowy owl
      96
  • Tell a friend

    Love Neowin? Tell a friend!