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
