Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Calculating table width using innerWidth gives inaccurate results

Posted on 2000-04-21
11
Medium Priority
?
306 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 450 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

Technology Partners: 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!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

782 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