By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,584 Members | 1,803 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,584 IT Pros & Developers. It's quick & easy.

Size and position

P: n/a
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.
Sep 28 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Robert wrote:
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

--
Rob
Sep 28 '06 #2

P: n/a
RobG wrote:
Robert wrote:
>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
What I am trying to do is not possible with CSS.
I have examined the possibilities and limits for weeks.
Sep 28 '06 #3

P: n/a
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?

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 28 '06 #4

P: n/a
Randy Webb wrote:
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.
It is impossible to accomplish my goals using % sizes.
>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.
I am aware of some differences, but not the huge difference in this case.
>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.
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.
>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.
I checked it before and unfortunately it can only set position and not
the size of an element.
>Or can you suggest me some good website that explains this whole
sizing and positioning topic in Javascript.

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.
Sep 28 '06 #5

P: n/a
Robert wrote:
Randy Webb wrote:
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.

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.

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.

I am aware of some differences, but not the huge difference in this case.
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.

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?

It's 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.

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.

I checked it before and unfortunately it can only set position and not
the size of an element.
Or can you suggest me some good website that explains this whole
sizing and positioning topic in Javascript.
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.

It's a CSS issue.
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/a.../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.
--
Rob

Sep 28 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.