epoulsen
asked on
Calculating table width using innerWidth gives inaccurate results
Hi folks,
I have a table that I need to size exactly to the user's browser screen (i.e., no horizontal scrollbars). The reason for this is that I have multiple columns with multiple nested tables. Sometimes (in Netscape only), these tables will grow to 100% of the screen width regardless of the width of the containing table column. The only way Netscape properly displays those tables is if the outermost table has a pixel width (not a percentage width).
Anyway, I am using the window.innerWidth to calculate the number of pixels wide the user's browser window is. I then am setting dynamically the outermost table's WIDTH attribute. The problem is that innerWidth does not seem to be accurate. For instance, in my browser (Netscape 4.08), I get an innerWidth value of 1016. However, the correct width to display my table without scrollbars is actually 981 (35 pixels less). What's worse, if I drop to 800 x 600, the innerWidth is 892 but the correct width is 847 (45 pixels less). On another machine, the width at 800 x 600 is around 830 (62 pixels less).
Is there ANY way to control this or get the proper screen width so that consistently I draw a table without a horizontal scrollbar in its window?
BTW, I cannot use framesets to resolve this issue.
Thanks in advance!
Esther
I have a table that I need to size exactly to the user's browser screen (i.e., no horizontal scrollbars). The reason for this is that I have multiple columns with multiple nested tables. Sometimes (in Netscape only), these tables will grow to 100% of the screen width regardless of the width of the containing table column. The only way Netscape properly displays those tables is if the outermost table has a pixel width (not a percentage width).
Anyway, I am using the window.innerWidth to calculate the number of pixels wide the user's browser window is. I then am setting dynamically the outermost table's WIDTH attribute. The problem is that innerWidth does not seem to be accurate. For instance, in my browser (Netscape 4.08), I get an innerWidth value of 1016. However, the correct width to display my table without scrollbars is actually 981 (35 pixels less). What's worse, if I drop to 800 x 600, the innerWidth is 892 but the correct width is 847 (45 pixels less). On another machine, the width at 800 x 600 is around 830 (62 pixels less).
Is there ANY way to control this or get the proper screen width so that consistently I draw a table without a horizontal scrollbar in its window?
BTW, I cannot use framesets to resolve this issue.
Thanks in advance!
Esther
ASKER
Actually, you cannot set scrollbars in tables (at least not as part of the table specification).
The problem isn't necessarily scrollbars, it's just that I want to essentially duplicate "WIDTH=100%". I cannot use WIDTH=100% because nested tables sometimes do not behave correctly in Netscape...depending on the attributes in those nested tables, they will expand to the entire window width, and you will have to scroll to see the next column. I am trying to avoid that. The problem is that this is all built dynamically, so I don't have control over the nested tables. Therefore, by setting a fixed width on the parent table, the subtables should (and do) draw themselves correctly. The problem is getting that fixed width number and have it be correct across multiple screen sizes and multiple versions of Netscape.
Any other suggestions would be greatly appreciated.
Thanks!
Esther
The problem isn't necessarily scrollbars, it's just that I want to essentially duplicate "WIDTH=100%". I cannot use WIDTH=100% because nested tables sometimes do not behave correctly in Netscape...depending on the attributes in those nested tables, they will expand to the entire window width, and you will have to scroll to see the next column. I am trying to avoid that. The problem is that this is all built dynamically, so I don't have control over the nested tables. Therefore, by setting a fixed width on the parent table, the subtables should (and do) draw themselves correctly. The problem is getting that fixed width number and have it be correct across multiple screen sizes and multiple versions of Netscape.
Any other suggestions would be greatly appreciated.
Thanks!
Esther
I try not to set anything to width 100%, try setting it to like 85%-90% and see if that helps you a little better.
ASKER
This does not work. Let's say column 1 is set to a 70% width, column 2 to 30%, and the table itself is set to 100%. Column A stretches to 100%, column B remains at 30%. If I set the table to 70%, column A stretches to 70%, column B to 30%, and so on.
This happens if some child tables have "width=100%" tags (though not always), as well as large amounts of text in their cells (NOWRAP is not turned on). However, if I take these child tables out, the parent table does only take up 70% of the screen (or whatever I set the width to). Because I am not sure which tables are going to be appear, I can't consistently control the end user's presentation of data.
I read the HTML specification and one thing that was pointed out was that hardcoded widths do tend to force subtables to behave themselves, which brings me to the point where I am trying to figure out exactly how to get that magic width for each user.
Thanks for your suggestions!
Esther
This happens if some child tables have "width=100%" tags (though not always), as well as large amounts of text in their cells (NOWRAP is not turned on). However, if I take these child tables out, the parent table does only take up 70% of the screen (or whatever I set the width to). Because I am not sure which tables are going to be appear, I can't consistently control the end user's presentation of data.
I read the HTML specification and one thing that was pointed out was that hardcoded widths do tend to force subtables to behave themselves, which brings me to the point where I am trying to figure out exactly how to get that magic width for each user.
Thanks for your suggestions!
Esther
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
hi!
try and don't give sizes in pixels,
give all sizes in percentage only.
bye!
try and don't give sizes in pixels,
give all sizes in percentage only.
bye!
That's not an answer Graphico, he said he wants it to be exactly the width of the screen, and 100% doesn't give the right number of pixels, so he cannot use percentages.
ASKER
As CJ S said, percentages do not work correctly. I've tried this a ton of different ways, but Netscape does not render child tables with certain table attributes correctly if the parent table has a percentage width.
Try:
window.screen.availWidth
window.screen.availWidth
ASKER
I set all the margins to topmargin=0 leftmargin=0 marginwidth=0 marginheight=0. I am still calculating the innerWidth and it's still off, but I subtract about 50 pixels and that seems to do the trick for enough browser versions and screen resolutions that it's a stable workaround.
Not to jump on the soapbox, but I hope that future versions of Netscape have a better table rendering engine and this problem goes away.
If you have any other ideas I'd love to hear them (btw, availWidth gives the full screen size, not the size of the browser window rendering area so that didn't work), and I greatly appreciate your help!
Esther
Not to jump on the soapbox, but I hope that future versions of Netscape have a better table rendering engine and this problem goes away.
If you have any other ideas I'd love to hear them (btw, availWidth gives the full screen size, not the size of the browser window rendering area so that didn't work), and I greatly appreciate your help!
Esther
Glad to be of any help. we Just had the same problem here with the width and all, so if I find out anything, I'kll post it here.
for example in this frameset..
<FRAMESET ROWS="23%,81%">
<FRAME SRC="top.htm" NAME="top" SCROLLING="NO">
<FRAMESET COLS="17%,85%">
<FRAME SRC="side.htm" NAME="side" SCROLLING="YES">
<FRAME SRC="page.htm" NAME="page">
try setting this on the table as well.