Log in

View Full Version : CSS drop down menu problems


ADP
12-15-2009, 07:44 PM
I used the code from the jQuery Multi Level CSS Menu #2 to create a nav menu as I have been having problems getting something to work correctly in IE and firefox. this menu looks like it will work fine in IE but appears to be all jarbled up in Firefox. Ugh. I would appreciate any help on this - creating a CSS drop down menu is proving to be a big pain for me!
bluewalrus
12-15-2009, 08:18 PM
Link, Code?
ADP
12-15-2009, 09:01 PM
sorry, here is the link to the menu:

http://www.ssb-cpa.com/ssb-final/jquery_inc.html

I can also past the CSS or .js code if needed.
bluewalrus
12-16-2009, 12:20 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>
</head>
<body>
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Firm News</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Our Partners</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Our Commitment to You</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Accounting Financial Services</a></li>
<li><a href="#">Employee benefit plan audits</a></li>
<li><a href="#">Tax Services</a></li>
<li><a href="#">SOX 404 Compliance Testing</a></li>
<li><a href="#">Litigation Support (Forensic Accounting)</a></li>
<li><a href="#">Business Valuations</a></li>
<li><a href="#">Business Advisory Services</a></li>
<li><a href="#">Estate and Retirement Planning</a></li>
<li><a href="#">Business Development Workshops</a></li>
<li><a href="#">Technology Support</a></li>
</ul>
</li>
<li><a href="#">Careers</a>
<ul>
<li><a href="#">Our Culture</a></li>
<li><a href="#">Our Experiences</a></li>
<li><a href="#">Why We Love SSB</a></li>
<li><a href="#">Frequently Asked Questions</a></li>
<li><a href="#">Career Profiles</a></li>
</ul>
</li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
</body>
</html>
ADP
12-16-2009, 02:00 PM
you are a life saver!!!! What was the problem with the code? I am using this nav file as an include in the header and it now functions correctly in both IE and Firefox - but looks like there is an alignment issue in IE. If you have any advice, I would appreciate it. Here is the link to the working page:

http://www.ssb-cpa.com/ssb-final/index6.asp

Thanks a million!!!!!
bluewalrus
12-16-2009, 02:52 PM
I can't advice on IE i don't have it so can't see what it looks like. One of your line items (<li>) containing an unordered list <ul> wasn't closed so everything was inside of it and then everything inside was out of order as well.
ADP
12-16-2009, 05:59 PM
thanks again for the help... if anyone can advise what may need changed to properly align the nav vertically when viewed in Internet Explorer I would appreciate it.
bluewalrus
12-16-2009, 09:18 PM
You could try firebug lite and see what is different between ff and ie and adjust in an ie conditional statement.

http://getfirebug.com/lite.html
wadeinni
12-28-2009, 10:17 AM
Hi guys, I'm cross-browser testing a page on my site and am struggling with a CSS alignment problem in Firefox 3.0. The center content keeps getting pushed down the bottom of the page where the left nav content ends.

The problem is located here: http://www.teenclassifieds.net/index.php/funny-mp3-ringtones/

It works fine in IE7 and IE8 but I can't get it to display properly in Firefox 3.0. Can anyone give me a clue as to what could be the problem and a possible fix.

Thanks