CSS Menu Width and Arrows - Post ID...

User 390945 Photo


Registered User
2 posts

I have used both the DHTML Menu Builder and the CSS Menu Designer(in Coffee Cup HTML Editor) to create a vertical menu. Here is the link to the CSS Menu Designer result http://www.ronncarol.com/BTI%20Menu/main.php .

I selected "Use fixed width" 160px. The result is 160px for the fly-out items but only 100px for the main items. Also missing from the CSS design are the arrows in the main list items that indicate submenu items are available. Where did they go? They appeared with DHTML Menu Builder.

I decided to use the Coffee Cup products to simplify my design efforts and also because the results are suppsedly cross-browser compatible. Perhaps I should probably just go back to CSS Play to clear this up. But, I really like the ease of use of HTML Editor and CSS Menu designer.

No doubt I'm doing something wrong or missing a vital bit of instruction.

I have a live working site: http://www.breachingtechnologies.com/main.php . If your not using IE6 it works great! This menu design is courtesy of one by Stu Nichols at CSS Play http://www.cssplay.co.uk/index. Unfortunately this particular design is not backward compatible with IE6, the fly-outs don't work. Bummer! Yeah, I know, why would anyone still use IE6. It's a mute point here since my client wants it that way.

Thanks in advance for any help/comments.

Ron R
San Antonio, TX
Webworker
San Antonio TX
User 463058 Photo


Ambassador
1,073 posts

Ronald Rasmusson wrote:
I have a live working site: http://www.breachingtechnologies.com/main.php . If your not using IE6 it works great! This menu design is courtesy of one by Stu Nichols at CSS Play http://www.cssplay.co.uk/index. Unfortunately this particular design is not backward compatible with IE6, the fly-outs don't work. Bummer!


Actually, it is backwards compatible, but you're missing the .htc file IE 6 needs.

You have this code for IE 5 and 6 in your page:
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}

</style>
<![endif]-->


Notice the bahavior in there. IE 6 is looking for "csshover.htc", but it doesn't find it, so the menu doesn't work. It's a good bet that Stu has this file present so his menu works in all browsers. You can either get it from his site, or get the latest version from the following link and rename it.

http://www.xs4all.nl/~peterned/csshover.html

By the way, CC's CSS menu also requires this .htc file and the behavior code in order to work with IE 6.
User 390945 Photo


Registered User
2 posts

Thanks Cary!

Your right on the mark concerning the csshover.htc. I had downloaded the newer csshover3.htc but had not updated my header_exception_handling.php include file to add the "3".

Thanks for your time and extra eyes. The fly-outs work fine now in IE6.

I'll try another post later regarding the menu width control and AWOL arrows.

Regard's,
Ron R

Webworker
San Antonio TX
User 1977795 Photo


Registered User
35 posts

CC Menu designer doesn't open in my HTML Editor (one of the reasons I purchased the editor) even with something open it still stays grey. Any ideas anyone?

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.