Sans-Tables

Image

If you have been checking out the articles over the last few days, you may have noticed a few odd renderings! I’m doing my utmost to deliver the actual articles without tables.

Yes. Watch this space for further updates and ‘how to do’s’ on using stylesheets to deliver this look. Click over some of the article headings to see what this looks like from where you are sitting.

furthermore...

I have become aware of my web construction shortcomings because most of my stuff is built with nested tables. I have been using stylesheets (CSS) but essentialy tables are used to build the underlying structure of the page. As I write this, the home page of pageToScreen is constructed in this way. Tables and their cells are used to separate out the bits and pieces that go to make up the content of the page. HOWEVER, this page is now (almost) free of table. So what discoveries have I made during this painful and challenging translation process? Right off, it should be said that I am not the first to go through this. There are many web designers who have been trying to get this right for some time and I credit many that I have found on right side of this page. Why is it difficult? Two reasons mostly. The first is more to do with processes and workflow that we have become used to. WYSYWIG tools are great and have got really good lately, but .... They encourage layout using tables. Both Adobe GoLive and Macromedia Dreamweaver (the ones that I know) handle stylesheets well but force you to go through more steps and make the idea of WYSYWIG redundant. So making a transition to table-less design is difficult if you have become dependant on GoLive or Dreamweaver. The second reason for difficulties is browser inconsistencies, because if you follow the CSS1 and CSS2 rules, then you'll be frustrated to find that things don't look as they should on some of the most popular browsers (Windows Internet Explorer 5 and 6 for example). Painful Discoveries Exact positioning of elements is possible but there is no way of knowing that you have it right until you check your page in the range of browsers that you plan to target. It seems that the most popular web browser - Internet Explorer 5 (when I say popular, I mean installed on the majority of computers in the world) does not get it right and you will need to include some clever hack in the CSS. Fooling the browsers into behaving properly is a tremendous time consuming art and you should check tantek and zeldman before you embark on this foolish challenge. When you check the look of your site in the range of browsers, you may think that you have made a mistake. You may well have, but equally look out for browsers interpreting your CSS incorrectly. As I write this today (May31st.03), this isn't looking right in Internet Explorer 5.0 (PC) - fine on 5.5. This could be an issue with overflowing content in the central panel. Using the Correct Doctype declaration Jeffrey Zeldman has an article on A List Apart which explains this. When I first attempted this page reconstruction, ther were some behaviors and anomolies that were cured by replacing this: !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" with this: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" Then I discovered that it should be this: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" showing the complete URL to the correct DTD at w3.org. This explained fully here at the Web Design Group Learn about 'Quirk Mode' at Matthias Gutfeldts' site

Posted on 29 May around 11am

Tags: