Webpages Viewable with Windows IE and Apple's Safari? at DVinfo.net

James Emory · July 11th, 2007, 05:31 PM

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?

John Miller · July 11th, 2007, 07:15 PM

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

Reid Bailey · July 12th, 2007, 07:43 AM

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.

Christopher Lefchik · July 13th, 2007, 11:11 PM

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.

Cole McDonald · July 14th, 2007, 09:48 AM

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.

Christopher Lefchik · July 14th, 2007, 08:30 PM

Quote:

Originally Posted by Cole McDonald

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

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.

Cole McDonald · July 15th, 2007, 09:15 PM

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.

Christopher Lefchik · July 16th, 2007, 08:59 AM

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.

Quote:

Originally Posted by Cole McDonald

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

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.

Cole McDonald · July 17th, 2007, 12:25 AM

'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.

Christopher Lefchik · July 17th, 2007, 05:33 PM

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

July 11th, 2007, 05:31 PM	#1
James Emory Regular Crew Join Date: Aug 2002 Location: Atlanta, Georgia Posts: 1,892	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?

July 14th, 2007, 09:48 AM	#5
Cole McDonald Trustee Join Date: Nov 2005 Location: Sauk Rapids, MN, USA Posts: 1,675	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. __________________ Web Youtube Facebook

July 15th, 2007, 09:15 PM	#7
Cole McDonald Trustee Join Date: Nov 2005 Location: Sauk Rapids, MN, USA Posts: 1,675	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. __________________ Web Youtube Facebook

July 17th, 2007, 12:25 AM	#9
Cole McDonald Trustee Join Date: Nov 2005 Location: Sauk Rapids, MN, USA Posts: 1,675	'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. __________________ Web Youtube Facebook

July 11th, 2007, 07:15 PM	#2
John Miller Major Player Join Date: Oct 2005 Location: Hillsborough, NC, USA Posts: 968	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....

July 12th, 2007, 07:43 AM	#3
Reid Bailey Major Player Join Date: Jul 2004 Location: Fredericksburg, Va Posts: 220	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.

July 13th, 2007, 11:11 PM	#4
Christopher Lefchik Trustee Join Date: Jul 2003 Location: US Posts: 1,152	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.

July 17th, 2007, 05:33 PM	#10
Christopher Lefchik Trustee Join Date: Jul 2003 Location: US Posts: 1,152	Understood. Glad you've worked out an efficient and elegant solution for your needs.