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
epoulsenAsked:
Who is Participating?
 
CJ_SConnect With a Mentor Commented:
Okay, I think a lot can be said about this, let me start at the beginning.

Most of the time you see a border around the table, this can cause the browser to (if you use the window.innerWidth) that the width'll be 2 * border + window.innerWidth. To turn this off you need to set (especiallly in Netscape) the
topmargin=0 leftmargin=0 marginwidth=0 marginheight=0
in the BODY tag.

Another point is what you found out yourself. If yous et the width of a table  from let's say 100px and you have an image in it from like 105 then that table width will change to 105, and everything next to that table will too.

Let's see if this helps you any much, if not I know a few other things.
0
 
red117Commented:
I find most times i like to try to keep widths at a percentage.  I would tinker with the percentages until one came out right, also you can set the scroll bars to not show up when using frames can you do the same with a table?  try it.

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.



0
 
epoulsenAuthor Commented:
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
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
red117Commented:
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.
0
 
epoulsenAuthor Commented:
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
0
 
GraphicoCommented:
hi!
try and don't give sizes in pixels,
give all sizes in percentage only.
bye!
0
 
CJ_SCommented:
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.
0
 
epoulsenAuthor Commented:
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.
0
 
CJ_SCommented:
Try:

window.screen.availWidth
0
 
epoulsenAuthor Commented:
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
0
 
CJ_SCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.