Defined Table widths in templates

[mmesarch1]

HI,
I am having some problems getting tables to be limited to the size I define them to be. I want a 300 pixel wide table, but the resulting tables are always 100% of the available space when using the template. And example is at http://snr.unl.edu:9999/agmet/instrumen ... -short.asp that does not work. I cut the table out of the file and pasted it into a plain html file at http://snr.unl.edu:9999/agmet/testtable.html and it works.

How can I get the table width to respond properly?
Thanks.

[saltybeagle]

This only occurs in Internet Explorer and if your table is defined using the width="" attribute.

To correct it, use a css attribute to set the width of the element.

Code: Select all

<table style="width:300px" border="1" cellpadding="2">

Why is it screwed up you may ask?

Well, I did this to prevent the hundreds of instances where people use a table with width="100%" and border="(anything > 0)" from breaking inside the templates.

In CSS standards, the box model states that borders are rendered outside the width of the element. On many pages here @ UNL, people use tables with a width of 100%, and also a border of 1 or more pixels.
In standards compliant rendering (which is used by the templates), that table would be 100% + 2 pixels wide (1 pixel border on each side). This causes problems because 100%+2px is wider than the container can allow it to go.
We override tables with old defined widths to prevent this explosion within IE, and unfortunately tables with other widths are also affected.

If there's a better way of handling this 'problem,' I'm open for suggestions.

The forward looking way is to begin using CSS to style pages and drop the old attributes. Once you make the switch to CSS styling for tables and other elements, I think you'll discover that CSS gives you a lot more formatting flexibility.