Solved

Calculating table width using innerWidth gives inaccurate results

Posted on 2000-04-21
11
265 Views
Last Modified: 2010-04-09
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
0
Comment
Question by:epoulsen
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 1

Expert Comment

by:red117
ID: 2738132
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
 

Author Comment

by:epoulsen
ID: 2738154
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
 
LVL 1

Expert Comment

by:red117
ID: 2738167
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
 

Author Comment

by:epoulsen
ID: 2738242
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
 
LVL 22

Accepted Solution

by:
CJ_S earned 150 total points
ID: 2739592
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Expert Comment

by:Graphico
ID: 2741388
hi!
try and don't give sizes in pixels,
give all sizes in percentage only.
bye!
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2741394
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
 

Author Comment

by:epoulsen
ID: 2743709
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
 
LVL 22

Expert Comment

by:CJ_S
ID: 2746833
Try:

window.screen.availWidth
0
 

Author Comment

by:epoulsen
ID: 2749486
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
 
LVL 22

Expert Comment

by:CJ_S
ID: 2750328
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now