I'm having trouble with Suckerfish Dropdowns and PHP

[Grant Palin]

In case you haven't read it, here's a link (http://www.alistapart.com/articles/dropdowns) to an article on A List Apart on how to create dropdowm menus with almost pure CSS, and a bit of Javascript.

Now, I liked that article, and decided to try implementing it for my website. I did a plain HTML version (link (http://hommworld.ithium.net/Homm2_New/dropdownmenu.html)), and it worked.

However, I also decided to automate my site somewhat by using PHP to insert header and footer information (link (http://hommworld.ithium.net/Homm2_New/index.php)). When I add some PHP code to handle the insertions, the page stops working! Have a look at the page, mouse over the menu items - nothing happens! Well, the text changes color as expected, but no menu appears!

I've validated the output page with the W3C HTML Validator, and it was fine. I'm wondering if using the menu in a PHP file had anything to do with it...like I said, it worked fine in a plain HTML file. I tried putting all the stuff (menu and content) into a single PHP file, without any includes. Same result.

Has anyone had experience with the menu from ALA? Any suggestions on how to get it working in PHP?

[Roy Sinclair]

The menu works in Firefox 0.8 :thumbsup:

[Grant Palin]

The second one? The dropdowns appear in Mozilla, but don't appear correctly.

I'm using IE 6 and Mozilla 1.4 (I think) on Windows XP.

[pardicity3]

I may be wrong about this, but here is my idea:

In your pure html version, your css never used the #nav id on your ul declarations. In your .php version, you state ul#nav. Now, when you give ul#nav attributes like list-style: none; and margin: 0; padding: 0; you are no longer applying these styles to your nested uls. Try adding this code:

ul#nav li ul { list-style: none; padding: 0; margin: 0; }

Do you understand what I am getting at? I may have read your code wrong, but I believe this is where the problem lies.

[Roy Sinclair]

Yep, the second one (well the first one worked too). They don't appear quite right in FireFox either, they've got bullets which reduce the text are portion but they are usable.

I suggest that you edit your styles.css file and place the styles for the menu after the rest of the styles, I can easily see one style for "li" elements that may be interfering.

[Grant Palin]

pardicity: the bit of CSS you gave me fixed the problem with the bullets appearing in Mozilla.

Roy: I moved the CSS like you suggested, I saw that potential problem too.

After those changes, the thing still didn't work. So I went into the CSS for the PHP version, and compared with the CSS for the HTML version. I had made some changes to the PHP version - apparently causing the problem in the first place. Go figure. :mad: Anyway, I changed the PHP's CSS to match the HTML's CSS, and the menu worked! I think what happened was I was being too specific when addressing the list styles; for example, I was doing ul#nav li ul {...}. I removed the ul#nav from in front of all those lines in the CSS, which seems to have caused the menu to work properly.

So, the menu now works in IE and Mozilla.

A side effect from removing those specific identifiers is that now any lists in the content section of the page are styles similar to the menu. I'm thinking maybe I should style content lists to appear normally, or maybe enclose the menu inside a menu div, and target list elements inside that div to style the menu.

Suggestions?

[Roy Sinclair]

enclose the menu inside a menu div, and target list elements inside that div to style the menu.


That sounds like a good plan.

[Grant Palin]

Just tried it, and I'm back to the problem I had before: addressing the menu items inside the div breaks the menu in IE.

I was trying to do something like:

div#header ul li


And it wouldn't work! :mad: :(

I also just tried to style the content div lists so they would appear normally, but that's turning out to be cumbersome, and it shouldn't really be necessary, I don't think.

Hopefully you or somebody else has ideas for this. Hopefully what I'll be able to make workable will be something like this

<div id="header">
<ul id="nav">
<li>...
<ul>
<li>...</li>
...
</li>
</ul>
</div>


Like I've said, I've tried this, and it doesn't work...yet. It's probably something in the CSS.

[Grant Palin]

All right, I just spent a little more time on the menu-containing div idea. I added div#menu in front of all the menu item addresses, and the menu still didn't work. However, when I went through the addresses, and tried removing the addition, and observing the results, I found that if I did not put the extra bit in front of li ul (which corresponds to the second level of the menu, the part that actually drops down), the menu actually worked in IE! I suppose it must be something to do with the drop down behavior in IE as defined by the DOM scripting...I have very little knowledge of DOm, so I don't know.

Anyway, the menu is now appearing and dropping down properly in IE. It also appears and drops down in Mozilla; however, when you mouse over the rightmost top-level menu item, the menu that appears causes the horizontal scrollbar to appear, shifting some of the page upwards. I don't know what to do about that... Also, the drop down menus appear so that the upper right corner of the drop down menu is overlapped by the next top-level menu item...I wonder if there's something that can be done about that, although the effect is minor. Finally, also in Mozilla, the menu is offset from the top of the page (but not in IE). I've set margin:0 and padding:0 on the menu div and the body.

[Roy Sinclair]

That's a screen width issue, with the slight offset of the drop down and when the screen is just barely as large as the menu that slight offset will cause an overflow which brings up the scroll bars.

On a smaller screen the menus perform a word-break, if you don't want that you happen you need to replace the space in those with the &nbsp; character (which is what it's supposed to be used for anyway n=non, b=breaking and sp=space).

Oh yeah, I've had them all since the "King's Quest" that the HOMM series was based on was first released.

[Grant Palin]

Is there anything I could do for the screen width problem?

I'll try the nbsp fix, see what happens.

You're a HoMM fan?

[Roy Sinclair]

Screen width is user/browser specific so I wouldn't obsess about it.

HOMM releases have been a regular purchase for me. I've liked some things that have changed over time and disliked others. Much the same as with any other game. They generally take less micromanagement than many of the other games out there so you get to the "action" quicker.

[Grant Palin]

Screen width is user/browser specific so I wouldn't obsess about it.

Okay...forgotten! :thumbsup:

What about that little gap at the top of the browser window in Mozilla (just above the menu)?

HOMM releases have been a regular purchase for me. I've liked some things that have changed over time and disliked others. Much the same as with any other game. They generally take less micromanagement than many of the other games out there so you get to the "action" quicker.

I like HoMM since it's turn based...it's a bit easier to keep up with things that way. I like games like Warcraft okay, but they're a bother because you have to be everywhere at once, since it's real-time.

Do you have all of them? HoMM up to HoMM4?

[Roy Sinclair]

What about that little gap at the top of the browser window in Mozilla (just above the menu)?

Not sure, it goes away if you enable that diagnostic border you've got in the div#menu style (except for the border itself). It's odd, I can't see any reason for it happening.


I've got all the HOMM series. I've usually preferred the turn based stuff myself.