8015

CSS/XHTML Menu - Working in all browsers - IE6 Help

i found this menu that's exactly what i want. It works in all modern browsers and IE 7/8. I need to find a fix for it to work in IE6. Any help would be greatly appreciated.

http://lab.returnwt.net/htmlcss/tabmenu/

Answer1:

The problem with this menu in IE6 is that it's using selectors like this:

header ul#menu li:hover ul

IE6 only supports :hover on a elements.

Fortunately, there's a really easy fix to make this menu work in IE6.

It's called Whatever:hover

    <li>Download the (minified) csshover3.htc file.</li> <li>

    Add this CSS:

    body { behavior: url("csshover3.htc"); } </li> </ul>

    Here's a self-contained file that I tested to work with IE6, provided that the csshover3.htc file is in the same folder:

    <!DOCTYPE html> <html> <head> <title>Simple Tabbed Navigation - CSS3</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <meta charset="utf-8" /> <style> body { behavior: url("csshover3.htc"); } body { background: #efefef url(images/bg_main.png); font: 13px Helvetica, Arial; margin: 0; } header { background: url(images/bg_head.png); display: block; /* Compatibility fix */ } header:after { background: rgba(0, 0, 0, 0.1); content: ' '; height: 1px; position: absolute; width: 100%; z-index: 10; } header ul#menu { border-bottom: 5px solid #fff; margin: 0; overflow: hidden; padding: 0 10px; padding-top: 100px; list-style: none } header ul#menu li { float: left; } header ul#menu li a { background: #b1d0dd; border-top: 1px solid #d0e2ea; color: #fff; font-weight: bold; display: block; line-height: 34px; margin-right: 2px; padding: 0 20px; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.25); border-radius: 3px 3px 0 0; /* Currently working on Firefox 4.0b (Nightly), Chrome 8.0.xxxx and Opera 10.63+ */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B1D0DD), to(#89b8cc)); background-image: -moz-linear-gradient(top, #B1D0DD, #89B8CC); } header ul#menu li > ul { display: none; } header ul#menu li a:hover { background: #fff; border-top-color: #fff; color: #666; text-shadow: none; } header ul#menu ul { background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: none; margin-left: 0; margin: 0; padding: 5px 0 0 0; position: absolute; z-index: 999; } header ul#menu ul li { border: 1px solid rgba(0, 0, 0, 0.1); border-width: 0 1px; float: none; list-style: none; margin: 0; padding: 0; } header ul#menu ul li a { background: none; border-bottom: 1px solid #ededed; border-top: none; color: #666; font-weight: normal; font-size: 12px; margin: 0 20px; padding: 0; text-shadow: none; width: 118px; } header ul#menu li a.home-icon span { background: url(images/home-icon.png) no-repeat center center; display: block; text-indent: -999em; overflow: hidden; text-align: left; direction: ltr; width: 16px; } header ul#menu li a.home-icon:hover span { background-image: url(images/home-icon-hover.png); } header ul#menu ul li:last-child a { border-bottom: none; } header ul#menu li:hover ul { display: block; } header ul#menu ul li a:hover { color: #000; } header ul#menu ul li:last-child { border-bottom: none } </style> </head> <body> <header> <ul id="menu"> <li><a href="#homepage" class="home-icon"><span>Home</span></a></li> <li> <a href="#">Community</a> <ul> <li><a href="#">Recent Activity</a></li> <li><a href="#">Member Forum</a></li> <li><a href="#">Member List</a></li> <li><a href="#">Member Groups</a></li> </ul> </li> <li><a href="#">Pet Help</a></li> <li><a href="#">Pets for Sale</a></li> <li><a href="#">Pet Services</a></li> </ul> </header> </body> </html>

Recommend

  • Got failure in integration testing of rails
  • XML/XSLT conditional comment IE stylesheet
  • Can't Get “Hello World” to work with Angular JS
  • How to add CSS3 rounded corners with modernizr?
  • WPF - automatic view resolving for view model
  • How to bring front or launch browser in Delphi
  • Alternative of TabAcitivity
  • Building libunwind for Mac
  • Odd behavior from UITabBar where background color only shows for one tab
  • How to update kml file/layer dynamically?
  • Want to create a simple image brightness control slider
  • CSS border-image - critical
  • It seems that not all of my HTML page loads in some browsers
  • How to reuse eclipse launch file in a new project
  • how to compile code from svn into jar file?
  • C++ face detection/recognition implementations
  • How to compare source in Git repository between source in SVN repository
  • Is there any way to center certain columns in table?
  • Unable to generate call to cell phone using asterisk
  • How to use Eclipse Mars to connect to Subversion
  • Collect and run all junit tests in parallel with each test class in its own JVM (parallelization by
  • How to set the navigation bar to the top in Table View?
  • Base Internationalization and “Could not find a storyboard named […]”
  • jQueryMobile, Ajax Navigation, and MVC
  • react split panel resize
  • Uncaught TypeError: $(…).select2 is not a function
  • How to view images from protected folder with php?
  • Unable to install Git-core+svn by MacPorts
  • Django simple Captcha “No module named fields” error
  • Display images in Django
  • Could not find rake using whenever rails
  • Change multiple background-images with jQuery
  • DomPDF {PAGE_NUM} not on first page
  • Installing Hadoop, Java Exception about illegal characters at index 7?
  • Javascript simulate pressing enter in input box
  • Resize panoramic image to fixed size
  • Importing jscolor library in angular 2
  • SVN: Merging two branches together
  • A cron job substitute?
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?