Help with CSS on jQuery Accordian Menu

Hi all,

The bods on the Javascipt forum pointed me over here with regards to the following query : -

I am using a bog standard implementation of this jQuery/CSS based accordian menu on one of my clients webpages :-

Now for reasons out of my control, DTD’s are not accepted into the environment that holds the webpage - so im dealing with quirks mode under Internet Explorer.

This is menu system works great on all other browses accept IE under quirks mode (figures). But I was wondering is there anything I can do to get it displaying correctly under these conditions?

Usually id never produce a document without the correct DTD, but this will simply be ignored. As I understand it, the ‘problem’ is rooted in CSS and not jQuery hence trying on this forum.

The code im using is identical to that used on the example page given above.

Any help much appreciated :slight_smile:

Hi,

That menu above works out of the box for me in IE6 and 7 when I remove the doctype. there would be minor tweaks needed for box model issues but it works as expected.

It will also work in IE8 if you adjust the conditional comments not to exclude IE8.


[B]<!--[if IE ]>[/B]
   <style type="text/css">
   li a {display:inline-block;}
   li a {display:block;}
   </style>
   <![endif]-->


If it’s not working for you then you will need to knock up a demo of the code you are using so we can see if there are other issues.

Remember that when you remove the doctype then all versions of IE behave like a browsers designed in the last century and act much like IE5 (although not exactly the same).

You will lose all the improvements and support built into the browser over the last 10 years and things like hover on elements other than anchors will nt work.

In quirks mode all versions of IE will use the broken box model so anywhere that you have defined a dimensions plus padding or border then you will need to do a hack to account for these specifically.

I can’t think of a situation where a doctype is not allowed but I guess this is some sort of intranet but seems a very strange directive.

Thanks for your awesome help.

The page is actually a rather advanced ebay template (e-commerce) of my clients - hence no DTD. I am aware of W3C standards when it comes to XHTML and CSS, and working in this environment (within the bay) is a relatively new experience for me. :slight_smile:

Anyway, I have nocked up a demo which shows exactly what is going on when I view it in IE: -


<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<!--[if IE ]>
	   <style type="text/css">
	   li a {display:inline-block;}
	   li a {display:block;}
	   </style>
	<![endif]-->
	<style type="text/css" media="all">
		@import "menu-style.css";
	</style>
	<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
	<script type="text/javascript" src="menu.js"></script>
	<tr>
		<td>
			<table border="0" cellpadding="0" cellspacing="0" width="20%">
				<tbody>
					<tr>
						<ul id="menu" class="menu">
							<li>
								<a href="#">Catagory A</a>
								<ul>
									<li><a onclick="someFunction()">Product A</a></li>
									<li><a onclick="someFunction()">Product B</a></li>
									<li><a onclick="someFunction()">Product C</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Catagory B</a>
								<ul>
									<li><a onclick="someFunction()">Product A</a></li>
									<li><a onclick="someFunction()">Product B</a></li>
									<li><a onclick="someFunction()">Product C</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Catagory C</a>
								<ul>
									<li><a onclick="someFunction()">Product A</a></li>
									<li><a onclick="someFunction()">Product B</a></li>
									<li><a onclick="someFunction()">Product C</a></li>
								</ul>
							</li>
							<li><a onclick="someFunction()">Catagory D</a></li>
							<li>
								<a href="#">Catagory E</a>
								<ul>
									<li><a onclick="someFunction()">Product A</a></li>
									<li><a onclick="someFunction()">Product B</a></li>
									<li><a onclick="someFunction()">Product C</a></li>
								</ul>
							</li>
						</ul>
					</tr>
				</tbody>
			</table>
		</td>
	</tr>
</table>



ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 195px;
  font-size:10pt;
}

ul.menu a {
  display: block;
  text-decoration: none;	
}

ul.menu li {
  margin-top: 1px;
}

ul.menu li a {
  background: #333;
  color: #fff;	
  padding: 0.5em;
}

ul.menu li a:hover {
  background: #000;
}

ul.menu li ul li a {
  background: #acacac;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #333333 solid;
  padding-left: 15px;
}

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }


function initMenu() {
  $('#menu ul').hide();
  $('#menu ul:first').show();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }

$(document).ready(function() {
	initMenu();
});

That should show your what I see in IE8. Again, I know standard pratice is out the window here, hence no DTD, head or body tags etc.

If you need any more info please just ask :slight_smile:

Hi,

The missing td tag around the ul is killing all versions of IE. Just replace it and it will work.


[B]<td>[/B]<ul id="menu" class="menu">
                                <li> <a href="#">Catagory A</a>
                                    <ul>
                                        <li><a onclick="someFunction()">Product A</a></li>
                                        <li><a onclick="someFunction()">Product B</a></li>
                                        <li><a onclick="someFunction()">Product C</a></li>
                                    </ul>
                                </li>
                                <li> <a href="#">Catagory B</a>
                                    <ul>
                                        <li><a onclick="someFunction()">Product A</a></li>
                                        <li><a onclick="someFunction()">Product B</a></li>
                                        <li><a onclick="someFunction()">Product C</a></li>
                                    </ul>
                                </li>
                                <li> <a href="#">Catagory C</a>
                                    <ul>
                                        <li><a onclick="someFunction()">Product A</a></li>
                                        <li><a onclick="someFunction()">Product B</a></li>
                                        <li><a onclick="someFunction()">Product C</a></li>
                                    </ul>
                                </li>
                                <li><a onclick="getProductFromServer('LedLightingKits');">Led Lighting Kits</a></li>
                                <li> <a href="#">Catagory D</a>
                                    <ul>
                                        <li><a onclick="someFunction()">Product A</a></li>
                                        <li><a onclick="someFunction()">Product B</a></li>
                                        <li><a onclick="someFunction()">Product C</a></li>
                                    </ul>
                                </li>
                            </ul>
       [B]</td>[/B]

Noooo way!

I think I love you big blue Monster :blush:

Just one other quick query… I notice the sub-catagories dont highlight in IE8 as I run my mouse over them (left margin border I belive).

Any ideas why this might be? Thanks! :slight_smile:

Hi,

Yes it’s because you don’t have href in the anchor and IE only hovers on anchors with an href.

e.g.


 <li><a [B]href="#"[/B] onclick="someFunction()">Product A</a></li>

Hi Paul,

 That works great thanks. The only problem with adding the href tag though is when I click on the (empty) links the page jumps back to the top. Is there anything I can do about this?

Many thanks

Yes either do this:



<li><a [B]href="#nogo[/B][B]"[/B] onclick="someFunction()">Product A</a></li>

The non existent fragment identifier will ensure the link goes nowhere.

Or in javascript add return false to cancel the default behaviour of the link:


<li><a [B]href="#"[/B] onclick="someFunction();[B]return false"[/B]>Product A</a></li>



Brilliant help Paul, thanks for all your hard work it is much appreciated. There really is no other resource like sitepoint :slight_smile: