View Full Version : Form css broke my dropdown menu

11-19-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!

11-19-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)

11-19-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?

11-19-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.

11-19-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?

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

11-19-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?

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

11-19-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

11-19-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?

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

11-20-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.

11-20-2010, 04:59 PM
bump :o

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

11-22-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.

11-23-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.

11-23-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.

11-23-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?

11-23-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.

11-23-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!

11-23-2010, 01:02 PM
Excellent, that makes sense. :thumbsup: