Macromedia's css dynamic repositioning does not work in Netscape

[Kor]

Hi,

Does anybody understand why the technique described in
http://www.macromedia.com/devnet/ser...sitioning.html

doesnt work in Netscape 6/7 and Mozilla? I tried it out but to no
avail. I am certainly not a (javascript) programmer / DOM expert but
it seems to me it should work (see for example
http://www.quirksmode.org/dom/w3c_html.html )

I hope somebody can help,

cheers,
Kor

[Juliette]

Kor wrote:

Hi,

Does anybody understand why the technique described in
http://www.macromedia.com/devnet/ser...sitioning.html

doesnt work in Netscape 6/7 and Mozilla? I tried it out but to no
avail. I am certainly not a (javascript) programmer / DOM expert but
it seems to me it should work (see for example
http://www.quirksmode.org/dom/w3c_html.html )

I hope somebody can help,

cheers,
Kor

Kor,

After a quick look, my first intuition is that the reason it won't (and
shouldn't) work is that they assign block specific styles to an inline
element.
A <DIV> is a block level element, i.e. has a box and can be positioned.
A <SPAN> is an inline element and should be represented *inline*, i.e.
not in a box and therefore *shouldn't* accept positioning.

A quick and dirty solution would be the add:
display: block;
to the css definitions which are used by the span (the .position# ones)
or for the same effect with less code:
#bomb {
display: block;
}
this is how you make the <SPAN> with ID="bomb" behave like a block
element.

The better solution would of course be to dissect the page and code it
properly, but well.. that would mean a rewrite of the article.
Macromedia is of course welcome to contact me for that (including pay).

Grz, Juliette

[DU]

Kor wrote:

Hi,

Does anybody understand why the technique described in
http://www.macromedia.com/devnet/ser...sitioning.html

doesnt work in Netscape 6/7 and Mozilla? I tried it out but to no
avail. I am certainly not a (javascript) programmer / DOM expert but
it seems to me it should work (see for example
http://www.quirksmode.org/dom/w3c_html.html )

I hope somebody can help,

cheers,
Kor

"
Stricter Style Sheet Parsing
(...)
When you use the !DOCTYPE declaration to switch on standards-compliant
mode, Internet Explorer 6 or later ignores style sheet declarations that
do not comply with CSS1.
(...)
Missing Unit Type Identifiers Treated as Pixel Values
According to CSS1, length values must specify a unit type identifier,
such as cm, mm, in, pt, pc, or px. Values without unit type identifiers
and values with white space between the number and the unit type
identifier are ignored. Earlier versions of Internet Explorer treat
numbers without any unit type identifier as pixel units—as if "px" were
appended to the string.
"
CSS Enhancements in Internet Explorer 6, March 2001
http://msdn.microsoft.com/library/en...hancements.asp

If the author of that DW document would have added a doctype decl.
triggering standards compliant rendering mode in MSIE 6, then the
resulting rendering would have been the same as with Mozilla and NS 7.1.
A simple CSS validation of that file (link broken to avoid causing
scrolling)

http://jigsaw.w3.org/css-validator/v...warning=2&uri=
http%3A//www.macromedia.com/devnet/server_archive/articles/css_positioning_dynamic_repositioning.html

will report the (error) space between the value and the unit (width: 35
px). CSS1 and CSS2 indicate how user agents should handle such error.

"User agents must ignore a declaration with an illegal value. For example:
(...)
IMG { border-width: 3 } /* a unit must be specified for length values */
"
CSS2
4.2 Rules for handling parsing errors
http://www.w3.org/TR/CSS2/syndata.html#parsing-errors

The bottom line is this: Mozilla and NS 7.x rendered correctly that
page. Had the page included a doctype decl. indicating, say, a strict
definition, then MSIE 6 would have handled/rendered it correctly.

DU

[Kor]

Thanks Juliette and DU,

I implemented it on the site I am working on, which validates as
STRICT as DU says. I added the {display: block} as Juliette suggested.
But still it doesnt work in Netsc/Moz. If you feel like it, you might
have a look, I would appreciate. The relevant css-code and scripting
is in the top of the documents.

site
http://www.martienmulder.com
(hover over the links and "under construction" will pop up.

scripting:
http://www.martienmulder.com/script.js

css:
http://www.martienmulder.com/martien.css
sources I used:
for repositioning:
http://www.macromedia.com/devnet/ser...sitioning.html

image gallery:
http://www.alistapart.com/articles/imagegallery

Thanks! Kor

[Juliette]

Kor wrote:

Thanks Juliette and DU,

I implemented it on the site I am working on, which validates as
STRICT as DU says. I added the {display: block} as Juliette suggested.
But still it doesnt work in Netsc/Moz. If you feel like it, you might
have a look, I would appreciate. The relevant css-code and scripting
is in the top of the documents.

site
http://www.martienmulder.com
(hover over the links and "under construction" will pop up.

scripting:
http://www.martienmulder.com/script.js

css:
http://www.martienmulder.com/martien.css

sources I used:
for repositioning:
http://www.macromedia.com/devnet/ser...sitioning.html

image gallery:
http://www.alistapart.com/articles/imagegallery

Thanks! Kor

Kor,

I had a quick look at it, but haven't got the time now to do the needed
rewrite.
One of the things which comes to mind as a possible source of the
problem, is that you use "bottom: ##px" as part of the positioning.
As far as I know, the bottom property isn't fully supported by all
browsers, so that may be the problem.
You could try to replace it with: "top: -xxpx;"

Juliette

[Kor]

Hi Juliette,

I tried it out (and had to change it back to "bottom") but no effect,
still no repositioning in Netsc/Moz. Weird isn't it. Can you maybe
point me in a direction to how to reposition this in a different way,
using javascript and css?

cheers, Kor

[Kor]

Hi Juliette,

I tried it out (and had to change it back to "bottom") but no effect,
still no repositioning in Netsc/Moz. Weird isn't it. Can you maybe
point me in a direction to how to reposition this in a different way,
using javascript and css?

cheers, Kor