Solved

Calculating table width using innerWidth gives inaccurate results

Posted on 2000-04-21
11
286 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Ouput in html in powershell 2 32
..ignore the Question 1 21
href return to normal window 5 28
ASP sending two datas 2 22
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

735 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