010426.html | WebReference


((((((((((((((((( WEBREFERENCE UPDATE NEWSLETTER ))))))))))))))))) April 26, 2001


Sponsored by: Bowstreet, Informative Graphics and Enterprise Web & Corporate Portal Conference __________________________________________________________________

This week Dan Ball tells us how to create tables that dynamically resize themselves with the browser. He also gets into browser compatibility and cross-browser design.


Stop re-inventing the wheel! When it comes to e-business projects, Bowstreet can show you how to do the work once, and reap the benefits for all your e-business initiatives. Sound intriguing? Then don't miss Bowstreet's next one-hour long WEB SEMINAR on Tuesday, May 15, 2001. You'll hear from Bowstreet's, President & CEO, Bowstreet's CTO as well as a Patricia Seybold Group Sr. Consultant. We'll also have great giveaways, register now! http://events.bowstreet.com/bswebs9/23


http://www.webreference.com *- link to us today http://www.webreference.com/new/ *- newsletter home http://www.webreference.com/new/submit.html *- submit article

This week in the WebReference newsletter,

New this week on WebReference.com and the Web:

1. TWO NEW CONTESTS: Submit & Win HoTMetaL Pro 6.0 and XMetaL 2.0! Signup & Win! 2. FEATURED ARTICLE: The Art of Cross-Browser Table Building 3. NET NEWS: * Business: IM is getting out of control * Playing with IT * Sun Unveils Distributing Computing Software ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. TWO NEW CONTESTS: Submit & Win HoTMetaL Pro 6.0 and XMetaL 2.0! Signup & Win

>Submit & Win HoTMetaL Pro 6.0 and XMetaL 2.0!

Submit your article today and you could win SoftQuad's HoTMetaL Pro 6.0 and XMetaL 2.0! This week Dan Ball wins the prize for showing us how to dynamically resize tables for any browser. If your article makes the cut, and we publish it on the site or in this newsletter, you win! See the submission page for details:


>New Signup & Win!

Sign up for the WebReference Update newsletter, and you could win a killer software bundle from Pegasus Imaging, JPEG Wizard and PICShow. Each week we'll draw new winners from our new subscribers - you could be next. Already a subscriber? Not a problem - just fill out the form, and you'll be automatically entered to win. Tell your friends!



Are you having the bottleneck blues? Net-It Central™ empowers departments with the ability to maintain their own intra /inter-net web site for document publishing. You won't be putting yourself out of a job; you will simply make it possible to focus on the more critical tasks at hand. Try it out for FREE, for your first 30 documents then recommend it to your boss and co-workers for no-hassle document publishing. http://www.infograph.com/wr.htm

**********************************************************adv.**** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2. FEATURED ARTICLE: The Art of Cross-Browser Table Building

Back in the version 3 era of browsers, compatibility was more of an "it supports it or it doesn't" choice. Now in the version 5 going toward 6 era it is more of a "well, it sort of supports it, should we use it or not" type of choice. My goal here is to bring to light some of the issues facing front-end coders in this new generation of browsers as it relates to tables.

Too many browsers... Too little time...

Even though Netscape 6 is out in its official release and IE6 is out in beta at the time of this writing, I still stand by my statement above saying "Now in the version 5 going toward 6 era" because Netscape 6 is, in my opinion, far from a completed browser as it has MANY, MANY issues with simple tasks. My method with Netscape 6 is to get everything working as much as possible, but without interfering with it's operation in IE 4 and 5 or Netscape 4.xx. Therefore, the majority of this article will be focused on IE 4.x, IE 5.x and Netscape 4.xx.

Putting it all on the Table...

One of the biggest problems I see for front-end developers is dynamic table construction. Netscape 4.xx's rendering of dynamic tables that resize with the browser window is frustrating at best, and seemingly impossible at worst. It goes without saying that even if a browser is forgiving of sloppy code, like IE, a good developer will still keep his/her code as clean and valid as humanly possible. IE forgives non-closed TABLE, TR, and TD tags and continues to render the page to the best of its ability, whereas Netscape just chokes. You can blame Netscape all you want for this, but the fact is, in this case it is purely the developer's problem.

If you have a perfectly coded and validated dynamic table and it still doesn't render properly, consider this: theoretically, tables render the pixel-coded table cells solid to that pixel size and render the percentage-sized (WIDTH="x%") cells around them. With Netscape 4.xx this is not always the case. It will render the table quite well, but rarely perfect if you are mixing pixel and percentage-sized cells.

The obvious answer to this is to do what many do, and just hard code your site to a given pixel size and if the visitor has a bigger window, the rest will just be white space. But it is possible to build a cross-browser dynamic site, you just need to focus your technical and creative juices a little differently. Let's say your page, like many, is one big table, right after the BODY tag you have a TABLE tag and right before /BODY you have the /TABLE tag. For that page to resize dynamically with the window your best place to start is to have all you percentage-sized cells in one column from top to bottom, don't overlap dynamic cells, doing this, all columns are hard-coded to the pixel but one, and the one column that is dynamic should contain no COLSPAN or ROWSPAN properties. If you need additional formatting in the dynamic column, nest a table inside the cell and set it at 100% WIDTH. This will help the initial table render cleaner and the nested one may help push the table into place. If you overlap dynamic cells with COLSPAN and ROWSPAN properties the resulting pixel-sized cells will rarely render to your satisfaction.

One place where this less-than-perfect table rendering has bitten me is when I hard code a 1 pixel cell going the whole height of the page with a different BGCOLOR to act as a 1 pixel line that displays between content columns of a page. This is useful in news sites that want to look more like a newspaper and have their content displayed in columns rather than one full width column. I found that there is one little trick to get around this. If you are like me, you optimize your sites to look best in 600x800 resolution, and hope for the best in 1024x768. Well, when you're viewing a page in Netscape on a 1024x768 monitor those 1 pixel cells become about 4 pixels wide. Your BGCOLOR line ends up fatter and not very attractive. So I just make a graphic 1 pixel tall and about 10 pixels wide, make the first pixel the color you want the BGCOLOR to be and the rest the color of the background of your site. Then, set the graphic as the BACKGROUND of your cell. The line will not appear perfectly centered between columns, but you will still see the line as a 1 pixel column. I have used this trick several times and it works great.

[Ed. note: We recommend optimizing your pages to work on any width screen (including some Macs etc. that have less than 600 pixel wide screens) using fluid tables as the author recommends, with percentage widths for the outer table.]

The magic of a transparent gif...

Many times, just hard coding cell widths with pixel sizes won't suffice either. A better way to make sure they don't render smaller is to use a 1 pixel-square transparent .gif and in the IMG tag set it to the width of the cell you want to hold size. This will assure it doesn't get smaller, but will do nothing for getting bigger. However, if you do not have dynamic tables, this transparent .gif can be used in each column to make darn sure that table holds its size perfectly. I have myself, on occasion, put a 1 pixel high TR at the top of the table using nothing but transparent .gifs to hold the size of the table for the remainder of the page. Just figure out exactly how many columns you will have, and what size they need to be and fill the row with the appropriate IMG widths. This can help make managing complex tables easier because you always have a reference right at the top of the page as to how many columns you have. Thus, the browser can quickly figure out ROWSPANs or cell WIDTHs very quickly and easily from anywhere on the page.

Don't Nest too deep...

Keeping your level of nested tables to a minimum is also helpful in rendering dynamic tables, nesting a second table in the main table is fine, sometimes even helpful, a third can be problematic, and a fourth often lethal to your site. Netscape's rendering engine can choke on nested tables much faster in a dynamically sized site than a static one. Keep your tables as simple as possible, rather than coding a bunch of ROWSPAN and COLSPAN cells at 10 pixels wide and tall to space your content apart. Instead see if CELLSPACING or CELLPADDING will do the trick. If used wisely, these properties can keep your table much simpler and it will render much better in any browser. If you are using dynamic content, such as news stories drawn from a database, try to have them laid out in paragraphs rather than table cells, as well as any other content. With this the content will wrap when it has to and gracefully fill the whole cell it occupies.

In Conclusion...

The moral of the story is just to say that most cross-browser issues can be worked around. You just need to be creative and not afraid to try something different, it just might work. Happy coding, and good luck in the NEXT generation of browsers, I am sure version 7's will bring a whole new group of issues for us to complain about and then tackle and conquer.

[Ed: Note that some less complex layouts can also be achived using CSS2, we'll have more on these soon.]

# # #

Dan is the owner of dB Masters Audio Productions (http://www.dbmasters.net), a small business that handles audio production and Web developement for the independent music community. With an extensive local music career in the Twin Cities area, a performer with several bands, and as a live sound and recording engineer, Dan has learned that sometimes rules must be broken to achieve one's goals. This ideology is also applied to his Web development. Currently Dan works at Retek in Minneapolis and is the Web site and Streaming Media Producer for www.retek.com as well as managing many side projects for small-businesses and volunteering development time to some non-profits as well. He can be contacted at mailto:dbmasters@excite.com.


JOIN THE CORPORATE PORTAL REVOLUTION IN BOSTON - SAVE $200! Enterprise Web & Corporate Portal Conference & Exposition May 23-24 -- Boston Park Plaza -- Boston, MA This is the only conference that analyzes portals & content, as well as application development, that emphasizes the interrelationships among them for the delivery of the next generation of enterprise class, web-based systems. Register on-line today: http://www.imgevents.com/eweb1 Include PRIORITY CODE: EWEB200 to receive your $200 discount!

**********************************************************adv.**** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 3. NET NEWS: Business: IM is getting out of control Playing with IT Sun Unveils Distributing Computing Software

>Business: IM is getting out of control

Is someone reading your Instant Messages? Find out how to protect yourself. http://www.zdnet.com/zdnn/stories/news/0,4586,2712552,00.html

>Playing with IT

Find out why playing with toys (computers) can be the most productive way to learn and use them. http://www.itworldcanada.com/cw/displayArticle.cfm?oid=4B0B9B60-3321-11D5-AA 8A00A0CC574E58

>Sun Unveils Distributing Computing Software

Have you been paying attention to the latest computing craze, P2P? Sun Microsystems has and can prove it with their new idea, JXTA. http://www.internetnews.com/wd-news/article/0,,10_752501,00.html http://www.jxta.org/

That's it for this week, see you next time.

Andrew King Managing Editor, WebReference.com update@webreference.com

Alexander Rylance Assistant Editor, WebReference.com arylance@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Advertising: If you are interested in advertising in our newsletters, call Frank Fazio on 1-203-662-2997 or send email to mailto:ffazio@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For contact information on sales offices worldwide visit http://www.internet.com/mediakit/salescontacts.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a Commerce Partner, contact David Arganbright on 1-203-662-2858 or mailto:commerce-licensing@internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To learn about other free newsletters offered by internet.com or to change your subscription visit http://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ internet.com's network of more than 150 Web sites are organized into 16 channels: Internet Technology http://internet.com/it E-Commerce/Marketing http://internet.com/marketing Web Developer http://internet.com/webdev Windows Internet Technology http://internet.com/win Linux/Open Source http://internet.com/linux Internet Resources http://internet.com/resources ISP Resources http://internet.com/isp Internet Lists http://internet.com/lists Download http://internet.com/downloads International http://internet.com/international Internet News http://internet.com/news Internet Investing http://internet.com/stocks ASP Resources http://internet.com/asp Wireless Internet http://internet.com/wireless Career Resources http://internet.com/careers EarthWeb http://www.earthweb.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - http://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Looking for a job? Filling an opening? - http://jobs.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This newsletter is published by Jupitermedia Corp. http://internet.com - The Internet & IT Network Copyright (c) 2001 Jupitermedia Corp.. All rights reserved. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: http://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~