Position layers works in IE not Firefox/Safari

[cewisham]

I have a menu that pops up different layers as you mouse over. Seems to
work OK in IE 6. I position the layers dynamically with javascript
because the menu moves when users resize their browser window. In the
Firefox or Safari browsers the position of the layers is 0,0 no matter
what, right off the bat. Top left corner.
Can any one tell me why?
Here is my javascript function for positioning the layers.
Below that is the URL of the page I am building.

/* START FUNCTION
*****************************************************/
function positionLayer(layerID, imageName) {

// positions layer 'layerID' at the same coordinates as image
'imageName'
var xPos, yPos, myElement, myLayer;
if(document.layers) { // NN4.x
xPos = document.images[imageName].x;
yPos = document.images[imageName].y;
} else if(document.all) { // IE4/IE5
xPos = getXPos(document.images[imageName]);
yPos = getYPos(document.images[imageName]);

myLayer = document.all[layerID];
} else { // ass-u-me W3 DOM
myElement = document.getElementById(imageName);
xPos = myElement.offsetLeft;
yPos = myElement.offsetTop;

myLayer = document.getElementById(layerID);
}

/* END FUNCTION *****************************************************/

http://www.qcbt.com/qcbtinternet/unsecure/index.aspx

 

[Randy Webb]

(e-mail address removed) said the following on 4/25/2006 8:23 AM:

I have a menu that pops up different layers as you mouse over. Seems to
work OK in IE 6. I position the layers dynamically with javascript
because the menu moves when users resize their browser window. In the
Firefox or Safari browsers the position of the layers is 0,0 no matter
what, right off the bat. Top left corner.
Can any one tell me why?

Because your code is error prone, doesn't do what you think it does, and
you are taking the .all and .layers branches first.

 

[cewisham]

I see. Thanks for all the great advice.

 

[The Magpie]

[snup] In the Firefox or Safari browsers the position of the layers
is 0,0 no matter what, right off the bat. Top left corner. Can any
one tell me why?

I'm guessing (from the variable name) that you may be using element
names as IDs. Which they aren't and which will therefore not work in
GetElemtById(x)

 

[Gérard Talbot]

I have a menu that pops up different layers as you mouse over. Seems to
work OK in IE 6. I position the layers dynamically with javascript
because the menu moves when users resize their browser window. In the
Firefox or Safari browsers the position of the layers is 0,0 no matter
what, right off the bat. Top left corner.
Can any one tell me why?

The Magpie got it: you are passing the image name when you should be
passing the id attribute if you use getElementById or the image name
with document.images collection. You can't mix the 2.

What Randy told you is also correct and good. The first branch of a
if..else..else block should be the W3C DOM support.

function positionLayer(layerID, imageName)
{
var xPos, yPos, myElement, myLayer;

if(document.images)
// DOM 2 HTML compliant
// http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117
{
xpos = getXPos(document.images[imageName]);
yPos = getYPos(document.images[imageName]);
};
}

I suggest you drop the document.layers block unless you can test the
function+DHTML menu with NS 4.x and if you know that there are still
users using it... and even there, I'd never recommend using NS 4.x to
reach a bank website. NS 4.x users represent less than 0.5% worldwide:
it's definitely not worth the huge trouble coding for NS 4.x involves.

I'm going to add that your webpage is full of deprecated markup code,
uses transitional DTD and is full of nested tables: there is no reason
for all this.

Table-based webpage design versus CSS-based webpage design: resources
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

HTML Tidy extension for Firefox users
http://users.skynet.be/mgueury/mozilla/index.html

Why we won't help you
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

HTML markup validator
http://validator.w3.org/

Gérard

 

[Matt Kruse]

Table-based webpage design versus CSS-based webpage design: resources
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

"The reports of my death have been greatly exaggerated"
-- <table>

A single, clean layout table for a page often is still the best way to go.
Trying to do some things with pure CSS that can be done trivially with a
table layout often involves CSS hacks, doctype-dependencies, and bulky
"wrapper" <div>'s, not to mention a steep learning curve for most.

For developers who understand the issues and are not zealots for either
side, a common-sense marriage of tables and CSS is the true nirvana.

 

[Gérard Talbot]

Matt Kruse wrote :

"The reports of my death have been greatly exaggerated"
-- <table>

A single, clean layout table for a page often is still the best way to go.

It depends. In the abstract, I can't say. In general, I can't say. But I
am saying there is no justification for nested tables. And I'm saying
that the webpage I saw
http://www.qcbt.com/qcbtinternet/unsecure/index.aspx
was clearly and definitely misusing tables, abusing tables.
It looks entirely not professional.

Trying to do some things with pure CSS that can be done trivially with a
table layout often involves CSS hacks,

It shouldn't involve CSS hacks. Even Microsoft asked people to stop
using CSS hacks.
Call to action: The demise of CSS hacks and broken pages
http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

doctype-dependencies,

It depends what you're referring to here.

and bulky

"wrapper" <div>'s, not to mention a steep learning curve for most.

No argument with me on this. Too many <div>'s strongly suggest
inexperience and/or lack of knowledge.

Web Page Development: Best Practices
http://developer.apple.com/internet/webcontent/bestwebdev.html

"Classitis and Divitis

For developers who understand the issues and are not zealots for either
side, a common-sense marriage of tables and CSS is the true nirvana.

What about simply suggesting to use an already proven, simple and
reliable CSS templates which are available, easy to implement, easy to
understand, easy to upgrade if needed, using valid markup code and a
strict DTD?

CSS webpage templates
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources.html#CSSWebpageTemplates

Gérard

 

[Thomas 'PointedEars' Lahn]

"The reports of my death have been greatly exaggerated"
-- <table>

A single, clean layout table for a page often is still the best way to go.

No, it is not. For example, it renders slower and it does not follow
accessibility standards.

Trying to do some things with pure CSS that can be done trivially with a
table layout often involves CSS hacks, doctype-dependencies, and bulky
"wrapper" <div>'s,

No, it does not.

not to mention a steep learning curve for most.

You would prefer to keep people incompetent, so that you can "sell" them
your software? I see.

For developers who understand the issues and are not zealots for either
side, a common-sense marriage of tables and CSS is the true nirvana.

A true nirvana for you. Because you can follow your natural laziness, can
avoid learn anything new, and can better "sell" your software. To the
disadvantage of everybody else. There is a word for that: antisocial.


PointedEars

 

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 4/27/2006 9:27 AM:

No, it is not. For example, it renders slower and it does not follow
accessibility standards.

Yes it is. You are just too ignorant to realize/accept it.

No, it does not.

Depends on who tries to create it and the knowledge level of that
person. And yes, when going from tables to CSS most newbes do div overkill.

You would prefer to keep people incompetent, so that you can "sell" them
your software? I see.

Matt sells software? Thats news to me. Or, are you pulling crap out of
your ass again?

A true nirvana for you. Because you can follow your natural laziness, can
avoid learn anything new, and can better "sell" your software.

There you go again. Can you post a URL to this "software" you keep,
wrongly, referring to?

To the disadvantage of everybody else. There is a word for that: antisocial.

You, calling people antisocial? Thank you for my laugh of the week.

 

[Matt Kruse]

No, it is not. For example, it renders slower and it does not follow
accessibility standards.

It does neither.
In fact, I've seen CSS-only layouts that render slower than a single table.
Saying that a single table will render slow is absurd, unless you think in
nanoseconds.
Accessibility is a concern, but the information in a table layout still
flows correctly top-to-bottom in the source. Since table layouts have been
used for years, any accessibility tool should be able to deal with a simple
table layout.

No, it does not.

Your lack of anything resembling an argument does not help your "point".
If CSS layouts didn't require hacks we tables like this:
http://www.dithered.com/css_filters/css_only/index.php wouldn't exist.

You would prefer to keep people incompetent, so that you can "sell"
them your software? I see.

The reality is that people don't have hours and hours to spend learning
every new web technique. Some of us have families and jobs. And the truth
is, learning to use CSS to the degree required to do complex layouts is
something many people don't have time to do.

And once again, despite your push towards people doing things the "right"
way, your own web site reoutinely demonstrates the _opposite_ of what you
preach. Is your lack of ability to do things the "right way" incompetence on
your part? Or just laziness?

I've used CSS extensively for complex layouts without tables. I'm very
familiar with the arguments for and against using tables for layouts. I'm
very familiar with the nuances of CSS and how they affect real-world
development. Although I use a single layout table on
http://www.javascripttoolbox.com/ you are welcome to look at my CSS
techniques there and critique all you want. I think you will find that my
standards are far above other sites like, oh, say, http://pointedears.de/ .

A true nirvana for you. Because you can follow your natural
laziness, can avoid learn anything new, and can better "sell" your
software. To the disadvantage of everybody else. There is a word
for that: antisocial.

You are truly a piece of work, Mr. Lahn. I am neither lazy nor anti-social
nor do I "sell" my software nor am I disadvantaging anyone else.

You, sir, are a troll, and just barely above VK in the amount of value that
you add to this newsgroup. If the word "anti-social" describes anyone here,
it would be you. Maybe you don't interact with humans in the real world, but
if you behave in real life as you do here, I don't imagine that many people
would find your company welcome. You are judgemental, insulting, demeaning,
elitist, anal retentive, combative, and unpleasant.

Do me a favor and add me to your kill file or adjust my score or whatever it
is that you do, so you never need to be bothered with seeing or responding
to my posts again.

Have a nice day!

 

[Matt Kruse]

You, sir, are a troll, and just barely above VK in the amount of
value that you add to this newsgroup. If the word "anti-social"
describes anyone here, it would be you. Maybe you don't interact with
humans in the real world, but if you behave in real life as you do
here, I don't imagine that many people would find your company
welcome. You are judgemental, insulting, demeaning, elitist, anal
retentive, combative, and unpleasant.
Do me a favor and add me to your kill file or adjust my score or
whatever it is that you do, so you never need to be bothered with
seeing or responding to my posts again.

I probably should have prefaced that with "Jane, you ignorant slut"

 

[Gérard Talbot]

Matt Kruse wrote :

If CSS layouts didn't require hacks we tables like this:
http://www.dithered.com/css_filters/css_only/index.php wouldn't exist.

I have never recommended CSS hacks or anything close to any of this.
Quite on the contrary.
A good web design would stay away from any/all of these hacks. As soon
as such flaws in browsers are corrected by new versions, then the
webpage code (markup and CSS) has to be modified and adjusted while
maintaining the old hacks in place for the people not upgrading their
browsers. All of this is non-sense, more and more difficult to manage,
to maintain.

The reality is that people don't have hours and hours to spend learning
every new web technique. Some of us have families and jobs. And the truth
is, learning to use CSS to the degree required to do complex layouts is
something many people don't have time to do.

I'd reply roughly the same again. First, use a decent, web standards
compliant HTML editor: Nvu 1.0 is certainly a defendable choice. On the
other hand, Front Page has now been discontinued by Microsoft itself.

Then, search for proven, reliable, cross-browser and standards-oriented
CSS templates: I have offered a list already.
The best CSS template is the one that gets explained step by step in a
tutorial. So that way, one can reach both goals: usage of the template
and understanding (with the independence that it brings) of
using/adjusting/upgrading it later.

And once again, despite your push towards people doing things the "right"
way, your own web site reoutinely demonstrates the _opposite_ of what you
preach.

Several people have compared Thomas Lahn's own adamant preaching, harsch
admonishing posts with his own webpage design practices. The guy is not
only abrasive, arrogant but, more importantly, he is in blatant
contradiction, his practices are blatantly inconsequent.

You are truly a piece of work, Mr. Lahn. I am neither lazy nor anti-social
nor do I "sell" my software nor am I disadvantaging anyone else.

You, sir, are a troll, and just barely above VK in the amount of value that
you add to this newsgroup. If the word "anti-social" describes anyone here,
it would be you. Maybe you don't interact with humans in the real world, but
if you behave in real life as you do here, I don't imagine that many people
would find your company welcome. You are judgemental, insulting, demeaning,
elitist, anal retentive, combative, and unpleasant.

Your judgement and appreciation of Thomas 'Pointed Ears' Lahn definitely
meets my own.

Gérard