Results 1 to 8 of 8

Thread: ddSmoothMenu issue with Google Chrome/IE

  1. #1
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default ddSmoothMenu issue with Google Chrome/IE

    1) Script Title: ddSmoothMenu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

    3) Describe problem: My drop-down menu works perfectly in Firefox, but when I view my page in either IE or Chrome, it is unusable. In IE, the main links do not display, and the drop-down submenu doesn't work at all. In Chrome, the drop-down menu appears, but at the bottom of the page, where it is inaccessible. My web site is http://www.bigdaddybaseball.com, and the link to the ddSmoothMenu script appears on the far right under the label "Rosters." When you click on the "Rosters" link, it is supposed to display 25 links to team rosters below that main menu.

    Thanks in advance for your help!

    Mike

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    One issue is with z-index. All of your elements have z-index numbers set (some seem a bit random too) which is causing them to overlap the sub-menu - it's there, but it's displaying behind the central white panel.

    I suspect that your point-and-click website builder (SiteSpinner?) is generating the html markup/CSS and assigning z-index automatically. Although this may provide a more convenient way to build a website visually, instant WYSIWYG website builders often introduce their own problems with excess markup and auto-generated ids/classes that makes troubleshooting somewhat difficult, even for people who understand html and css.

    Often the best way to troubleshoot any misbehaving web page is by dismantling and rebuilding it again from scratch (testing between each addition in a few browsers). This allows you to hone in and target the problem element and then concentrate on its html/css/scripts. Its easier when you can manipulate the code directly - I don't know if your web building software allows this, but that's really where you need to be.

    That being said, whether you're in WYSIWYG mode or in code view, try working through each logical block of markup, individually adding things afresh to a blank web page. And watch out for those z-index values. If your web builder is assigning z-index/layers as you work, it might be that you need to add the menu into your web page as the very last thing to ensure that is end up "on top" of everything else. It just depends on the limitations of the software and what it will and won't allow you to edit.
    Last edited by Beverleyh; 01-02-2013 at 05:28 PM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    bigdaddy (01-02-2013)

  4. #3
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your quick reply, Beverlyh!

    This was my first experiment with SiteSpinner, so that could very well be the root of my problem. It's also been YEARS since I've built a web site, so it's my first exposure to the whole concept of building through div tabs and z-indexes instead of the old-school table-centric design. I'm going to play around with the z-indexes, and will let you know if that does the trick.

    Again, thanks very much for your time and help.

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    No problem. Yes, I started out using tables too so I appreciate where you're at (CSS floats! The bane of table-to-div conversions, LOL).

    Just out of curiosity, have you heard of KompoZer? http://www.kompozer.net/

    It's very similar to DreamWeaver, but FREE, and you can easily flip between the source/WYSIWYG tabs. Something like that might offer an easier way to build/test visually, while still allowing you to edit the markup and see instant results
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #5
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I've never heard of KompoZer...until now! Thanks for the recommendation. It sounds like something exactly like what I've been looking for. I really don't like the fact that you can't edit the code in SiteSpinner.

    Thanks, again!

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    KompoZer is quite nice. It doesn't have all the plugins that Dreamweaver does but its a very nice piece of software, especially for those on a budget and those who want to maintain some degree of coding control - or indeed for those folks making the transition between visual website building and learning CSS and HTML

    One thing that you might want to change straight away is the encoding type under the help >> options >> advance menu. It defaults to strict HTML but you can change it to transitional and/or XHTML too.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That page is definitely laid out in an odd way. And z-index has a role. But more importantly the page is in quirks mode and hasn't always completed its layout on document ready. I figured out a way to make it all work though. Working from what you had when you first posted, change the DOCTYPE from:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    to:

    Code:
    <!DOCTYPE html>
    Use this custom version of the script (right click and 'Save As'):

    ddsmoothmenu.js

    And in the bigdaddybaseball.com/styles/allstyles.css file, around line #415 get rid of the highlighted:

    Code:
    /*Top level menu link items style*/
    .ddsmoothmenu ul li a{
    z-index:120;
    display: block;
    background: #000041; /*background of menu items (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
        opacity: 0.9; 
        filter :alpha(opacity=0);
    }
    You won't get that semi see through look in IE 8 and less but at least it will work. You could but then you would have to lose the drop shadow in that browser. And the text will lose it's anti-aliasing quality. So I recommend against that.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    bigdaddy (01-03-2013)

  10. #8
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Wow, John. I can't thank you enough. I've been wrestling with various z-indexes, positioning, etc., etc. all day, and you solved the problem with less than a minute of changes.

    Thank you, thank you, thank you!

Similar Threads

  1. ddsmoothmenu not working in Chrome + Safari
    By Chaim in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-21-2011, 12:08 AM
  2. ddsmoothmenu not working in Safari & Chrome
    By Swennet in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-15-2011, 03:04 PM
  3. ddsmoothmenu and Firefox issue
    By pbassett in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 07-14-2010, 11:17 PM
  4. ddsmoothmenu dropdown issue in IE
    By hemil_sheth in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-18-2009, 07:44 PM

Bookmarks

Posting Permissions

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