152784 - cbwa-az.org - CSS effects on popup menus aren't right

Status: RESOLVED WORKSFORME

(Tech Evangelism Graveyard :: English US, defect)

Description

[josh]

From Bugzilla Helper:
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; Q312461; Cox 
High Speed Internet Customer; .NET CLR 1.0.3705)
BuildID:    2002053012

The popup menus don't look 3D like they do in IE.  

Reproducible: Sometimes
Steps to Reproduce:
1.  go to http://www.cbwa-az.org/
2.  try the menus
3.

Comment 1

[Phil Schwartau]

Confirming using Mozilla trunk binary 2002061707 on WinNT.

In IE6, the text of submenu items is shown inside white containers.
In Mozilla, all you get is the text: no container for it.

In IE6, when you mouseover submenu items, you get a shaded 3D effect
in green. In Mozilla, the green color is flat and uniform.


Note: the frame containing the menu is http://www.cbwa-az.org/header.htm
The JS file creating it is view-source:http://www.cbwa-az.org/fw_menu.js

/**
 * fw_menu 24OCT2000 Version 4.0
 * John Ahlquist, October 2000
 * Copyright (c) 2000 Macromedia, Inc.
 *
 * based on menu.js
 * by gary smith, July 1997
 * Copyright (c) 1997-1999 Netscape Communications Corp.
 *
 * Netscape grants you a royalty free license to use or modify this
 * software provided that this copyright notice appears on all copies.
 * This software is provided "AS IS," without a warranty of any kind.
 */


                          etc.
                          etc.


Here is a key part of the writeMenus() function:


			content += ''+
			'<DIV ID="menuLayer'+ countMenus +'" 
STYLE="position:absolute;z-index:1;left:10;top:'+ (i * 100) 
+';visibility:hidden;">\n'+
			'  <DIV ID="menuLite'+ countMenus +'" 
STYLE="position:absolute;z-index:1;left:'+ menu.menuBorder +';top:'+ 
menu.menuBorder +';visibility:hide;" onMouseOut="mouseoutMenu();">\n'+
			'	 <DIV ID="menuFg'+ countMenus +'" 
STYLE="position:absolute;left:'+ menu.menuBorder +';top:'+ menu.menuBorder 
+';visibility:hide;">\n'+
			'';



I can't tell whether this is a CSS issue or an Evangelism issue.
Reassigning to DOM Style component for further triage; cc'ing Boris -

Comment 2

[Lasse Marøen]

Seems like mozilla can't get the background images for the menu items - probably
due to a space in the path:

fw_menu_0.bgImageOver="target test/fwmenu4_142x25_over.gif";

Trying to load the gif by pasting the url works fine. Moz translates the space
to %20:
http://www.cbwa-az.org/target%20test/fwmenu4_142x25_over.gif

Comment 3

[Boris Zbarsky [:bzbarsky]]

Lasse, thank you!

The code then goes on to do:

a.style.background = "url(" + a.Menu.bgImageUp +")";

Now in CSS, the URL syntax is pretty straightforward:


"url("{w}{string}{w}")"
{return URI;}
"url("{w}{url}{w}")"
{return URI;}
url
	([!#$%&*-~]|{nonascii}|{escape})*

Which means that if the quotes around the "foo" are left out in the "url(foo);"
construct then no unescaped spaces are allowed in "foo".  The prose at
http://www.w3.org/TR/REC-CSS2/syndata.html#uri is also quite explicit on this:

   Parentheses, commas, whitespace characters, single quotes (') and double
   quotes (") appearing in a URI must be escaped with a backslash: '\(', '\)',
   '\,'. 

I've tested, and that site should change the line to 

a.style.background = "url('" + a.Menu.bgImageUp +"')";

(note the single quotes) or change the variable definition to:

fw_menu_0.bgImageOver="target\\ test/fwmenu4_142x25_over.gif";

(so that the space is escaped).  Unless they do that, the correct rendering of
that CSS is to ignore it as if it did not exist...

Comment 4

[josh]

i changed the site (http://www.cbwa-az.org) so that there are no more spaces in
the links.  that seems to worked as the popup menus are now in 3d.  it is
strange that the curson over the menus is not the hand, but the I for typing.

Comment 5

[Boris Zbarsky [:bzbarsky]]

The page uses "cursor:hand" is an IE-only thing.. the correct CSS2 value for a
"this is a link" cursor is "cursor: pointer"
(http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor)

Or is it using cursor:hand somewhere else?  The js is kinda hard to follow...

Comment 6

[Bob Clary [:bc] (inactive)]

tech evang june 2003 reorg

Comment 7

[Jan Moesen]

This can probably be resolved WORKSFORME now.

Comment 8

[Lasse Marøen]

Yes, site has changed. Bug no longer there.

Comment 9

[csjoshi]

The logical variable has been the targeted segment to the http://printcalendartemplates.com/october-2017-printable-calendar/ logical trends has been the logical information