Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Form css broke my dropdown menu

    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 Cheers all!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I don't think it's the css. Your becomepatient page is loading jQuery again if you have a look at the resultant html:

    Code:
    !-- 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;}
    </style>
    <![endif]--> 
    <!--[if IE 7]>
    <style type="text/css" media="screen"> 
    	.mc-field-group {overflow:visible;}
    </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="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)
    Last edited by SB65; 11-19-2010 at 09:48 AM.

  • Users who have thanked SB65 for this post:

    Riboflavin (11-19-2010)

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I removed that line, and though it fixed a problem with the newsletter, the menu is still broken any other ideas?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Looks to me like your newsletter.js is conflicting with your other scripts. If you take that out the menu behaves itself.

  • #5
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hmm, you are right. I need that for the form though. Any idea what part of it might be causing problems?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Add
    Code:
    #menu  li:hover ul {
    visibility:visible;
    z-index:100;
    }
    into your CSS and check again.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Riboflavin (11-20-2010)

  • #7
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    the little image isn't showing up beside the link, any way to fix that?
    Little image?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Click the home button and you will see there should be a small arrow to the right of the whats in stock link/dropdown

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Riboflavin View Post
    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
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    #menu ul .sf-sub-indicator {
    right:6px;
    top:6px;
    }
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.

  • #13
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    bump

  • #14
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    ttt, one last time before I give up.

  • #15
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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:

    Code:
    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:

    Code:
    var mce_jQuery = jQuery;
    I think this will sort out your menu, but make sure your newsletter still works.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •