Webpages Viewable with Windows IE and Apple's Safari?
 

One of my other websites displays just fine on a PC but when viewed on a Mac or the new iPhone with the Safari browser it is distorted. The website that I am referring to uses alot of tables too. Should that matter? What is the solution to creating one site that will display properly in both browsers so I don't have to make two versions?

This is a common problem with tables being treated differently by different browsers.

As far as I recall, it has to do with empty cells in the tables. Different browsers render them with different dimensions, hence the distortion you describe.

I think the solution is to put something in the empty cells to force the browser to display them with the correct size. Macromedia Dreamweaver does this automatically. Unfortunately, I can't find the reference to it in the documentation.

Hopefully, this will give you a pointer....

I recently ran in to a similar thing.
I'm not very good with html so the fix I used was type in a couple of characters and change their color to match the background of the cell.

It's probably the worst way to do it, but it handled it for the time.

Tables were never intended to be used for layout purposes. Of course, for a while Web designers didn't have much choice. Now, however, CSS is a viable and better option for design and layout. I've recently switched over from tables to CSS for layout. There is a learning curve, but you will end up with a better quality, more standards compliant site.

I still use tables as CSS now suffers from the same "renders differently" problem across browsers...at least in my experience.

to counteract the table rendering problems. Make sure there is content in every TD by using the font tag to color to the background color and adding a single character...or using blank gifs.

Make sure to set the border, cellpadding and cellspacing to 0 and define heights and widths effusively.

Set borders on all your images as well as the default is 1 for IE and 0 for everything else.

Yes, there are still quirks and bugs in the major browsers when it comes to some CSS properties. However, that should not inhibit the move to standards based design.

The original goal of HTML was to describe the document's structure, not its presentation. Unfortunately, during the browser wars we were inundated with a load of tags (such as the font tag) that violate the principle of HTML. Recently, however, there has been a movement to return to standards based design, which separates the structural layer from the presentation layer. The W3C XHTML 1.0 and CSS Level 2 Recommendations make it possible to develop sites which are both visually pleasing and standards compliant.

Faster download and rendering, compatibility with the widest range of present and future devices, and less time developing are all immediate advantages made possible through the adoption of standards based Web design.

The 3rd edition of Web Design in a Nutshell, by Jennifer Nierderst Robbins, is a good primer and reference on standards compliant Web design.

Should not inhibit the move to standards based design...but does if your customers can't get to your website...I tend to close windows that don't render correctly without reading any of the content after notifying the webmasters that their pages don't work on whatever setup I happen to be using at the time. I also have PC folks whom I ask to test websites for me. Too many bad pages in the early 90's developed that habit.

So far I haven't run into any major browser bugs that weren't unfixable with some fiddling. The book I referenced above has a whole chapter on workarounds for browser bugs.

You mean similar rendering problems to tables? If that's your experience, then why not move to standards-based CSS design anyway? At least you will get other advantages for your sites, such as being more compatible with present and future devices.

Browser bugs will in all likelihood always be with us (and yes, they do bug me). It's just something Web designers have to deal with, regardless of whether you design to Web standards.

'cause I know all the workarounds for the tables...and I don't do enough websites anymore to have to take the next 3 years to learn how to develop for all the browsers and IE. It's all much better now though, there used to be so many more when I learned (and much less code to learn too -- the center tag was new then :) and blink, marquee and javascript were still on the horizon).

I can code tables faster than CSS (as one is now habit...and the other is newer and I still have to look it up)...and I don't like (purely my opinion) the look of what everyone does with them, too many cookie cutter templated sites that make me long for the anarchic layouts of the early 90's, at least they had some visual interest if not blatant chaotic clutter.

I have books on it and I like the promise of it, but I'm probably not going to take the time to relearn everything I know as I'm devoting much more time to learning filmmaking now. I'll use the books as reference and figure it out on a case by case basis as I find something I have to do that I can't get done with tables and straight HTML.

I can code a page in a matter of minutes to fit whatever design someone hands me (the graphics take most of my time). If I were to have not devoted my focus to one way of laying things out and really dug into it, I'd have wasted the last 15 years of my life doing nothing but learning all the new doodads and whistles that came out only to not use them because they either fell quickly out of favor, or were more than my clients needed.

PHP I've picked up on a bit as it gives me access to the layout stuff I wanted to use CSS for but it didn't provide for me without jumping through a myriad of hoops. Specifically, I wanted to make a blanket design for my website that I could change by altering one or two files. CSS didn't have an elegant solution for my site...I did it with 3 lines of PHP includes 2 for the head and navigation of the site and 1 for the footer.

All of the content has its own pages and references those 3 documents...so a site wide change including table layout and background colors is just a matter of changing those 3 files. They leave off at the opening TD for the main content and the footer starts back up again at the closing TD of it...so only content tables in the individual pages. Very elegant solution.

Understood. Glad you've worked out an efficient and elegant solution for your needs.