error reported parsing style properties 'left' & 'top'

RESOLVED INVALID

Status

()

Firefox
General
RESOLVED INVALID
11 years ago
11 years ago

People

(Reporter: Tom Nielsen, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

11 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:2.0.7.7) Gecko/20070914 Firefox/2.0.0.7

When a DTD is present (HTML 4.01 Transitional or XHTML 1.0) Firefox reports:
  Error in parsing value for property 'left'. Declaration dropped.
  Error in parsing value for property 'top'. Declaration dropped.
If DTD omitted, no error.

Reproducible: Always

Steps to Reproduce:
1. load page
2. click small icon at bottom of a concept symbol
Actual Results:  
popup always appears in upper left corner of window

Expected Results:  
popup appears at cursor location where icon was clicked

1. Works as expected if DTD is removed from the page.
   See: <URL: http://www.enfolded.info/cmaps/maps/ue_fig_01.htm >.
2. Works with DTD correctly in Opera 9.23
3. FWIW, in IE7 popup appears offset from expected location by amount of scroll

Comment 1

11 years ago
Are you providing units when you set those styles?  Units are required.  

Comment 2

11 years ago
Tom, 

Brian is right. This code:

    if (document.all) {                 // Internet Explorer Detected
	   IE = true;	
    }
    else if (document.layers) {         // Netscape Navigator Detected
	   NS = true;	
    }
    else if (document.getElementById) { // Netscape 6 Detected
       GECKO = true;
    }

Netscape 6, NS 7, NS 8, NS 9 do not support layers collection;
Opera 6+ supports document.all. All the above code is not the proper way and recommended way to do browser detect.

	if (GECKO)
	{
	    document.getElementById(popupName).style.left = event.layerX;
	    document.getElementById(popupName).style.top = event.layerY;

is very wrong as layerX/layerY are integer values, not parsable length units.
The Error console in Firefox was already indicating the source of the problem.

Please visit
Using Web Standards in your Web Pages
Section 3.3.1.2: W3C DOM2 Reflection of an Element's CSS Positioning Properties
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages

Also, 
CSS 1 Forward-compatible parsing
http://www.w3.org/TR/REC-CSS1#forward-compatible-parsing

and

CSS 2.1 Rules for handling parsing errors
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

clearly states that length values must have units.

You mentioned Opera 9.23 but
"CSS size and position properties specified without a unit
Unit-less numbers in CSS (e.g. 'width: 300') are interpreted as pixels in Quirks Mode and ignored in Standards Mode."
http://www.opera.com/docs/specs/opera9/doctype/index.dml

Implement the W3-dev toolbar in Opera 9 and then verify that the webpage triggers standards compliant rendering mode.

Also, your browser sniffing code will absolutely create problems in short and long term.
Please consult

Using Web Standards in your Web Pages
 4 Developing Cross Browser/Cross Platform Pages

  4.1 Browser identification approach (aka "browser sniffing"): not best, not reliable approach
  4.2 Using Object/Feature support detection approach: best and overall most reliable

http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages

and
A Strategy That Works: Object/Feature Detecting by comp.lang.javascript newsgroup FAQ notes
http://jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD

Browser detection - No; Object detection - Yes by Peter-Paul Koch
http://www.quirksmode.org/js/support.html

Resolving as INVALID
Status: UNCONFIRMED → RESOLVED
Last Resolved: 11 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.