CSS menu not working in IE6

HitByLife · #1 (**permalink**) Nov 26th, 2007, 13:10

Hello, I've used a css drop-down menu that should have worked in IE6 (and even IE5.5), but I have IE6 on an older computer, and when checking, I found out that it clearly does not:

screencap_pa_ie6.jpg

It should have looked something like this (screenshot from Opera 9.5 beta):

screencap_pa_opera9.jpg

It works in Firefox 2+, Opera 9+, IE7 and Safari 3, all for Windows, I've checked.

Here's the css:

Code: Select all

/* style the outer div to give it width */
.menu {
    width:769px;
    font-size:11px;
    float: left;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:192px; /* changed from 150 px */
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:192px;  /* changed from 150 px */
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
    display:block;
    font-size:11px;
    text-decoration:none;
    color:#fff;
    width:181px;  /* changed from 139px, should be 11 px less than the .menu ul ul and .menu li */
    height:30px;
    border:1px solid #fff;
    border-width:1px 1px 0 0;
    background:#758279;
    padding-left:10px;
    line-height:29px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:192px; /* changed from 150 px */
w\idth:181px; /* changed from 139px, should be 11 px less than the .menu ul ul and .menu li */
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#C1BC9E; /* changed from #949e7c */
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#96886D;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#E2E2CA;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:192px; /* changed from 150 px to fit with toplevel widht */
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:192px; /* changed from 150px to fit with the toplevel values */
top:0;
width:192px; /* changed from 150px to fit with the toplevel values */
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-192px; /* changed from 150px to fit with the toplevel values */
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
    background:#d4d8bd;
    color:#000;
    height:auto;
    line-height:1em;
    padding:5px 10px;
    width:171px; /* changed from 129 px to fit in with toplevel values; should be 21px less that toplevel value */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:192px; /* changed from 150px */
w\idth:171px; /* changed from 129px */
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}



/*-------------------------------------
Misc. styling
---------------------------------------*/


#topimage {
    margin-top: 1px;
}

#firstcell a {
        background: #949E7C;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

#firstcell li {
    border-right: 1px solid #fff;
    z-index: 1;
    overflow: visible;
}

and here's what the html looks like:

HTML: Select all

<div class="menu">
      <ul>
        <!-- dropdown menu: HOME -->
        <li><a href="/">Home
          <!--[if IE 7]><!-->
          </a>
            <!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <!-- end HOME-->
        <li><a href="javascript:void(0)">Media Gallery
          <!--[if IE 7]><!-->
          </a>
            <!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="template.php?page=mphotos">Photos</a></li>
              <li><a href="template.php?page=maudio">Audio &amp; Video Clips</a></li>
            </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <!-- dropdown menu: career -->
        <li><a href="javascript:void(0)">Career
          <!--[if IE 7]><!-->
          </a>
            <!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="template.php?page=biography" title="A short biography">Biography</a></li>
              <li><a href="template.php?page=repertory" title="List of Repertory">Repertoire</a></li>
              <li><a class="drop" href="javascript:void(0)" title="Performance History">Performance Annals
                <!--[if IE 7]><!-->
                </a>
                  <!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                  <ul class="left">
                    <li><a href="template.php?dir=career&page=debut" title="Paul Asciak Debut, 1946">Debut 1946</a></li>
                    <li><a href="template.php?dir=career&page=aida" title="Aida with the Impresa Cantoni">Aida Cantoni</a></li>
                    <li><a href="template.php?dir=career&page=schipa" title="Under the wings of Schipa & Caniglia">Schipa/Caniglia</a></li>
                    <li><a href="javascript:void(0)" title="The Years in Italy">&laquo; Italy
                      <!--[if IE 7]><!-->
                      </a>
                        <!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <!-- flyout thirdlevel submenu  (Italy) -->
                        <ul class="left">
                          <li><a href="template.php?dir=career&page=verdi" title="The Verdi Celebrations">Verdi Celebrations</a></li>
                          <li><a href="template.php?dir=career&page=spoleto" title="The Spoleto Festival and Competition">Spoleto</a></li>
                          <li><a href="template.php?dir=career&page=preroh" title="The Years prior to Royal Opera House, Covent Garden">Work &amp; Activities </a></li>
                        </ul>
                      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li>
                      <!-- UK -->
                      <a href="javascript:void(0)" title="Works and Activity in England">&laquo; England
                        <!--[if IE 7]><!-->
                      </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <!-- flyout thirdlevel submenu (UK) -->
                      <ul class="left">
                        <li><a href="template.php?dir=career&amp;page=rosa" title="The Carl Rosa Company">Carl Rosa</a></li>
                        <li><a href="template.php?dir=career&amp;page=bbc" title="The BBC Engagements">BBC</a></li>
                        <li><a href="template.php?dir=career&amp;page=roh" title="The Years with the Royal Opera House, Covent Garden">Covent Garden</a></li>
                      </ul>
                      <!-- /UK-->
                    </li>
                    <li>
                      <!-- Wales -->
                      <a href="javascript:void(0)" title="Works and Activity in Wales">&laquo; Wales
                        <!--[if IE 7]><!-->
                      </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <!-- flyout thirdlevel submenu (UK) -->
                      <ul class="left">
                        <li><a href="template.php?dir=career&amp;page=welsh" title="Works and Activity in Wales">Opera in Wales</a></li>
                      </ul>
                      <!-- /Wales-->
                    </li>
                    <li>
                      <!-- Ireland -->
                      <a href="javascript:void(0)" title="Works and Activity in Ireland">&laquo; Ireland
                        <!--[if IE 7]><!-->
                      </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]><table><tr><td><![endif]-->
                      <!-- flyout thirdlevel submenu (UK) -->
                      <ul class="left">
                        <li><a href="template.php?dir=career&amp;page=ireland" title="Opera in Ireland">Opera in Ireland</a></li>
                        <li><a href="template.php?dir=career&amp;page=variety" title="Variety Shows">Variety shows</a></li>
                      </ul>
                    </li>
                    <li><a href="template.php?dir=career&amp;page=malta">Malta</a></li>
                    <li><a href="template.php?dir=career&amp;page=concerts">Concerts &amp; Miscellanea</a></li>
                  </ul>
              </li>
              <li><a href="template.php?page=discography">Discography</a></li>
            </ul>
        </li>
        <!-- end career -->
        <li><a href="javascript:void(0)">About this site
          <!--[if IE 7]><!-->
          </a>
            <!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="template.php?page=name">The name Asciak</a></li>
              <li><a href="template.php?page=contact" title="Contact Details">Contact details</a></li>
              <li><a href="template.php?page=credits" title="Credits & Acknowledgements">Credits</a></li>
              <li><a href="template.php?page=disclaimer" title="Disclaimer">Disclaimer</a>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
              </li>
            </ul>
        </li>
      </ul>
    </div>
    <!-- end menu -->

It's a bit of a mess, so I'm sure I've messed up something, but I can't see it at the moment. Help and fresh eyes much appreciated.

Thanks!

HitByLife · #2 (**permalink**) Nov 26th, 2007, 13:47

Sorry, I should say that the original css comes from Stu Nicholls, http://www.cssplay.co.uk/, and you can find it here: http://www.cssplay.co.uk/menus/simple_vertical.html

/J

Lchad · #3 (**permalink**) Nov 26th, 2007, 17:51

Code: Select all

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:192px; /* changed from 150 px */
w\idth:181px; /* changed from 139px, should be 11 px less than the .menu ul ul and .menu li */
}

I see a typo on the last line. width has a \ in it.

See if that fixes your problem...

HitByLife · #4 (**permalink**) Nov 26th, 2007, 18:05

Thanks Lchad, but this is a css hack to fix IE5.5 faulty box model rendering. Whether one should use these hacks or not, is a different question, but it's not a typo and it cannot explain why practically no content is showing in IE6 (I haven't checked the page in IE5.5 yet).

Lchad · #5 (**permalink**) Nov 26th, 2007, 18:24

Here is another issue.

Code: Select all

/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

delete that second t\op:31px;

Not sure if it has any bearing on your problem but, every little bit helps.

I'd need about 2 hours to go through all that code to see what the problem is. Sorry I don't have time for that at the moment.

I'd go line by line and compare what cssplay has for the ie6 hacks and check yours.

Don't even both with ie5.5 or earlier.

HitByLife · #6 (**permalink**) Nov 26th, 2007, 20:17

Uhu, Lchad, don't loose any sleep over it! Seriously. I have to go over it line by line myself. I'm sorry, it was a lot of code.

I agree, I am not going to worry about IE5.5, I was almost thinking "why worry about IE6" as well, but there are still a lot of people on IE6. But for a moment I thougth about getting a browser detection script that wil simply redirect you to another page saying "Your browser cannot render this page. Please update." Or something like that.

Anyway, thanks for offering to go through it all; you are very kind.

Stuart · #7 (**permalink**) Nov 28th, 2007, 00:28

You can also use a conditional comment for your <link>ed stylesheet. Like this:

HTML: Select all

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie6.css" />
<![endif]-->

This stylesheet will only be used by IE 6 and below :: lte means - less than or equal to

Hope that helps

HitByLife · #8 (**permalink**) Nov 28th, 2007, 01:31

Yes, I guess, but then I would have to create a separate css for IE6 and twek the template design for IE6 as I will not be able to use the drop down flyout menu...

Stuart · #9 (**permalink**) Nov 28th, 2007, 01:42

At least it's kinder to your users than telling them "You can't come in here. Get an upgrade!" You will lose viewers that way...

welshstew · #10 (**permalink**) Nov 28th, 2007, 09:40

if you want to quickly and easily compare files then take a look at windiff.

It will highlight the differences for you, so no need to go through line by line by hand.

Stew

HitByLife · #11 (**permalink**) Nov 29th, 2007, 22:38

I guess it would be better to allow for a separate css file for IE6 rather than turning users away. But damn: I wish they'd upgrade!

I might try out windiff - thanks for the tip!

/J

HitByLife · #12 (**permalink**) Dec 6th, 2007, 13:03

Just an update:

I haven't been able to solve this altogether, but at least I've managed to make the page load in IE6 - and I'm now completly forgetting about IE5.5, even though this menu should in principle work for that browser as well. Not all items in the menu are visible yet, but I'm working on it.

The problem seems to have been, partially at least, inconsistent use of conditionals. In order to make the dropdown/flyouts work, the author of the original css code used conditionals for the IE browsers:

HTML: Select all

<li><a href="#"><!--[if IE 7]><!-->LINK</a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

Now, IE7 (and all other more or less standards compliant browsers) should close the <a> tag as expected, but when it comes to IE6 (and supposedly IE5.5) the browser must be fooled into thinking the <a> tag is closed much later, in fact after your entire list:

HTML: Select all

<li><a href="#"><!--[if IE 7]><!-->LINK</a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul>
     <li><a href="#">sublink 1</a></li>
     <li><a href="#">sublink 2</a></li>
  </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

What this should do, is to let IE6 create a table and have the <ul> flow down into it. The reason is that IE5.x and IE6 do not understand li:hover, so the unordered list has to be nested in a table.

This is a bit complicated and I would probably have been much better off with a simpler way of creating these menus, using javascript and dhtml. But, it s a pure css menu and it should validate..

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Working on a drop down menu, but the dropdown section doesn't overlap div below in IE	MikeTheVike	Web Page Design	1	Mar 25th, 2008 17:32
preloader not working with a sliding menu script	nikising	Flash & Multimedia Forum	4	Jun 5th, 2007 14:58
I have a normal css menu, but want ot add drop down menu to it	multichild	Web Page Design	7	Jan 9th, 2007 16:07
Drop Down Menu not Working Since I added Toggle Javascript to Page	davva	JavaScript Forum	1	May 19th, 2006 15:03
Png not working	timmytots	Graphics and 3D	11	May 14th, 2006 07:06

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS menu not working in IE6