View Full Version : Form css broke my dropdown menu

Nov 19th, 2010, 10:28 AM
Hello everyone, I recently added a newsletter signup form to my webpage and if seems to have broken my drop down menu. You can view the page with the form here: http://bit.ly/adElte

As you can see the drop down menu for 'whats in stock' isn't working properly like it is on other pages. If anyone can help me find the css in the form that is breaking this and help me fix it I would be much appreciative :thumbsup: Cheers all!

Nov 19th, 2010, 10:45 AM
I don't think it's the css. Your becomepatient page is loading jQuery again if you have a look at the resultant html:

!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
#mc_embed_signup fieldset {position: relative;}
#mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
<!--[if IE 7]>
<style type="text/css" media="screen">
.mc-field-group {overflow:visible;}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>

<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>

Loading jQuery twice is a good way to stop it working - and here it's jQuery that's controlling your menu by amending the class on the dropdown li. If you can stop mailChimp loading jQuery that should solve the problem. (I'm assuming mailchimp's adding that code)

Nov 19th, 2010, 10:49 AM
I removed that line, and though it fixed a problem with the newsletter, the menu is still broken :( any other ideas?

Nov 19th, 2010, 02:09 PM
Looks to me like your newsletter.js is conflicting with your other scripts. If you take that out the menu behaves itself.

Nov 19th, 2010, 03:03 PM
Hmm, you are right. I need that for the form though. Any idea what part of it might be causing problems?

Nov 19th, 2010, 03:46 PM
#menu li:hover ul {
} into your CSS and check again.

Nov 19th, 2010, 03:53 PM
You are the man! It is working now, only one small problem, the little image isn't showing up beside the link, any way to fix that?

Nov 19th, 2010, 04:32 PM
the little image isn't showing up beside the link, any way to fix that? Little image?

Nov 19th, 2010, 04:49 PM
Click the home button and you will see there should be a small arrow to the right of the whats in stock link/dropdown

Nov 19th, 2010, 05:08 PM
Click the home button and you will see there should be a small arrow to the right of the whats in stock link/dropdown

I see a ">>" beside your Whats in Stock menu item. What browser are you not seeing that in?

Nov 19th, 2010, 05:11 PM
#menu ul .sf-sub-indicator {
} ?

Nov 20th, 2010, 01:53 AM
Teedoff: Really? It doesn't show for me in any browser (on the whats in stock page, it works on all other pages).

I tried adding that abduraooft but no luck.

Nov 20th, 2010, 04:59 PM
bump :o

Nov 21st, 2010, 11:35 PM
ttt, one last time before I give up.

Nov 22nd, 2010, 09:54 AM
You won't see that image on the BecomeAPatient page because it isn't in the html. As earlier posts, your jQuery is falling over on that page because of the conflict, and it's the jQuery that's adding that image into your html when the page loads - so in the absence of this script running properly, the html isn't there.

The root problem I think is coming from the no conflict statement in newsletter.js:

var mce_jQuery = jQuery.noConflict();

which causes the page to relinquish control of the $ variable. This is breaking your other code. Have a try by amending the line above to:

var mce_jQuery = jQuery;

I think this will sort out your menu, but make sure your newsletter still works.

Nov 23rd, 2010, 09:40 AM
I thought I fixed that conflict by removing the call from the mailchimp script? I will try that code but I don't want to break the newsletter.

Nov 23rd, 2010, 09:43 AM
Nothing earlier in this thread suggests any change to the script. Abduraooft's suggestion above works around the issue by using css to generate the drop down menu rather than using the javascript - but it doesn't affect the underlying issue.

Firebug throws a console error "$ is not a function" on that page.

Nov 23rd, 2010, 10:54 AM
Sorry I guess I'm confused. I removed the red line you posted in your first post (second post in this thread), should I not have done that?

Nov 23rd, 2010, 11:19 AM
No, that's fine, there's two separate issues. The first problem, two instances of jQuery loaded prevents jQuery working entirely. The second is a conflict between two different jQuery scripts - what I was trying to say in my previous post was we haven't done anything to address that (second) issue.

Nov 23rd, 2010, 12:21 PM
Ah okay I understand now :)

I changed it to remove the noConflict and it seems to have fixed the problem. It works without the css posted earlier, and the newsletter seems to still be functioning as normal as well. Thanks for your help!

Nov 23rd, 2010, 01:02 PM
Excellent, that makes sense. :thumbsup: