Closed Bug 152784 Opened 22 years ago Closed 20 years ago

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

Categories

(Tech Evangelism Graveyard :: English US, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: josh, Unassigned)

References

()

Details

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.
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 -
Assignee: rogerl → jst
Component: JavaScript Engine → DOM Style
QA Contact: pschwartau → ian
Summary: Popup menus don't aren't right → CSS effects on popup menus aren't right
Status: UNCONFIRMED → NEW
Ever confirmed: true
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
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...
Assignee: jst → doron
Severity: enhancement → normal
Component: DOM Style → US General
OS: Windows XP → All
Product: Browser → Tech Evangelism
QA Contact: ian → zach
Hardware: PC → All
Version: other → unspecified
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.
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...
Summary: CSS effects on popup menus aren't right → cbwa-az.org - CSS effects on popup menus aren't right
tech evang june 2003 reorg
Assignee: doron → english-us
QA Contact: zach → english-us
This can probably be resolved WORKSFORME now.
Yes, site has changed. Bug no longer there.
Status: NEW → RESOLVED
Closed: 20 years ago
Resolution: --- → WORKSFORME
Product: Tech Evangelism → Tech Evangelism Graveyard
The logical variable has been the targeted segment to the http://printcalendartemplates.com/october-2017-printable-calendar/ logical trends has been the logical information
You need to log in before you can comment on or make changes to this bug.