Size and position

[Robert]

Hi,

I am currently trying to do some Javascript sizing and positioning using
Javascript and encounter some for me unexpected behaviour in IE6, yet
works fine in Firefox and Opera.

I have a table with some various elements in it and want it to take into
account the current browser viewport size and resize it relative to that.

The calculations seem to be working well, but when I assign a height to
the table style (element.style.height = "681px") the element will get a
clientHeight of 748 in IE6, while it's 679 is Firefox and Opera (due to
the 1px border).

What can influence the clientHeight in IE6 in this way?

Furthermore, are there any free, open-source, Javascript functions that
you can use to set the dimensions and positions of elements?

Or can you suggest me some good website that explains this whole sizing
and positioning topic in Javascript.

Thanks,
Robert.

 

[RobG]

Hi,

I am currently trying to do some Javascript sizing and positioning using
Javascript and encounter some for me unexpected behaviour in IE6, yet
works fine in Firefox and Opera.

I have a table with some various elements in it and want it to take into
account the current browser viewport size and resize it relative to that.

The calculations seem to be working well, but when I assign a height to
the table style (element.style.height = "681px") the element will get a
clientHeight of 748 in IE6, while it's 679 is Firefox and Opera (due to
the 1px border).

What can influence the clientHeight in IE6 in this way?

Furthermore, are there any free, open-source, Javascript functions that
you can use to set the dimensions and positions of elements?

Or can you suggest me some good website that explains this whole sizing
and positioning topic in Javascript.

Don't use JavaScript at all for this, use CSS. Ask in:

news:comp.infosystems.www.authoring.stylesheets

 

[Robert]

Don't use JavaScript at all for this, use CSS. Ask in:

news:comp.infosystems.www.authoring.stylesheets

What I am trying to do is not possible with CSS.
I have examined the possibilities and limits for weeks.

 

[Randy Webb]

Robert said the following on 9/28/2006 4:11 AM:

Hi,

I am currently trying to do some Javascript sizing and positioning using
Javascript and encounter some for me unexpected behaviour in IE6, yet
works fine in Firefox and Opera.

I have a table with some various elements in it and want it to take into
account the current browser viewport size and resize it relative to that.

Then use % sizes. It's a CSS issue.

The calculations seem to be working well, but when I assign a height to
the table style (element.style.height = "681px") the element will get a
clientHeight of 748 in IE6, while it's 679 is Firefox and Opera (due to
the 1px border).

Thats because of the difference in the way IE calculates height, and
what is included and what isn't. It's a CSS issue.

What can influence the clientHeight in IE6 in this way?

First you have to find out why there is such a huge difference in the
clientHeight and the height you specified. 67 pixels is a lot.

It's a CSS issue.

Furthermore, are there any free, open-source, Javascript functions that
you can use to set the dimensions and positions of elements?

Try Matt Kruse's www.javascripttoolbox.com site, it may have a library
for that.

Or can you suggest me some good website that explains this whole sizing
and positioning topic in Javascript.

It's a CSS issue.

P.S. Did I mention that your problem is a CSS issue?

 

[Robert]

Robert said the following on 9/28/2006 4:11 AM:

Then use % sizes. It's a CSS issue.

It is impossible to accomplish my goals using % sizes.

Thats because of the difference in the way IE calculates height, and
what is included and what isn't. It's a CSS issue.

I am aware of some differences, but not the huge difference in this case.

First you have to find out why there is such a huge difference in the
clientHeight and the height you specified. 67 pixels is a lot.

I finally found out that the difference came because IE misintepreted a
table cell that had a rowspan of 2. It counted the 2nd row two times to
calculate the height. So it actually was a IE, HTML and CSS issue.

It's a CSS issue.

No, it was not.

Try Matt Kruse's www.javascripttoolbox.com site, it may have a library
for that.

I checked it before and unfortunately it can only set position and not
the size of an element.

It's a CSS issue.

Firefox and IE has dozens of javascript properties related to size and
position. I am interested in clear documentation and examples about
those. I do not need additional information about CSS properties,
because I have enough knowledge about them already.

P.S. Did I mention that your problem is a CSS issue?

P.S. your sarcasm is not appreciated and think you need to apologize.
Maybe you have spend too much time here already.

 

[RobG]

It is impossible to accomplish my goals using % sizes.

Without an example, or even reasonable explanation, of what you are
trying to do, that conversation is pointless.

I am aware of some differences, but not the huge difference in this case.


I finally found out that the difference came because IE misintepreted a
table cell that had a rowspan of 2. It counted the 2nd row two times to
calculate the height. So it actually was a IE, HTML and CSS issue.

So it was a CSS issue?

No, it was not.

But you just said " it actually was a IE, HTML and CSS issue". The
core issue is that you are trying to use JavaScript for something that
should be fixed using CSS.

I checked it before and unfortunately it can only set position and not
the size of an element.

You can browse Quirksmode:

<URL; http://www.quirksmode.org/js/contents.html >

The layout has recently changed, there is a lot of good information
there. Spend some time poking around. But JavaScript doesn't do any
sizing and positioning, it provides a mechanism to modify the
properties of host properties. It is those properties that you are
trying to understand - once you know what you are trying to do, you
*might* be able to use JavaScript to achieve it.


Yes, it really is.

Firefox and IE has dozens of javascript properties related to size and
position. I am interested in clear documentation and examples about
those.

Mozilla: <URL: http://developer.mozilla.org/en/docs/DOM:style >

IE: <URL:
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_style.asp
You should also search this news group for getComputedStyle and
currentStyle.

However, the above will only tell you about accessing properties. How
they work in relation to each other and their effect in different
browsers is a CSS issue and should be discussed in a CSS forum.

I do not need additional information about CSS properties,
because I have enough knowledge about them already.

Clearly not, you didn't anticipate the effects of rowspan on your code.
Had you approached a CSS forum with a concise explanation and example
(they tend to prefer links to pages rather than posted code), you may
have been given an answer.

If you are trying to use JavaScript to paper over differences in HTML,
CSS and the style related properties of host objects, then likely you
are heading down a path to instabilty and poor maintainability.