ddSmoothMenu issue with Google Chrome/IE

[bigdaddy]

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

[Beverleyh]

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.

[bigdaddy]

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.

[Beverleyh]

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

[bigdaddy]

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!

[Beverleyh]

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.

[jscheuer1]

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:

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

to:

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

/*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.

[bigdaddy]

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!