Webpage Looks Like Crap On Mac

[tylerdog]

Hello -

Why do webpages designed on a PC look like crap on a MAC? And what can be done to prevent this in the future?

Here's a site that I've been working on:

http://www.donniegreen.com


It looks just fine on my PC, but when I get on my iMAC, everything is out of whack and misaligned.

-Thanks

[James L.]

Hey,

I looked at your site on a mac and it didn't look too out of wack. If the code is validated, with no proprietary code thrown in, your page should basically look the same on either platform. Barring the different screen resolutions and the different gamma...which usually doesn't make a big enough difference to really notice.

As a general rule most of the Mac browsers are very standards compliant... IE 5.2.2 (the latest Mac build of IE) handles valid code, CSS, etc very well. Apple's new browser Safari, while still a work in progress, is also very standards complient, as is NN, Mozilla, and for the most part, Opera. I have noticed problems with Omniweb, even with complient code.

I checked your home page code briefly and noticed there was no DOCTYPE. I put one on your code and ran it through the W3 validator and it threw up a bunch of code errors (I think 31). You should go through your code and fix those.

I code all of my pages on a Mac, then test them on my pc. I am careful to only use valid html code and very rarely run into display problems with my pages, except for a couple of IE bugs that I sometimes have to work around.

If you still aren't happy with the display once your code is valid let me know and I will help you run down the problem.

Cheers!

p.s. I looked at your code a bit closer and it looks like you used FrontPage to create the page. If so, this may be causing some problems too. FrontPage writes TERRIBLE code, and if the code is bad it will cause huge compatability issues.

[Stevorino]

I'm sitting here comparing your site on a MAC and in Windows. They look near identical to me. What type and version of a MAC browser are you using that makes your page look so bad on a MAC? What MAC operating System are you using?

[tylerdog]

To James L -

I used PSP7 to create the background and to do the coding for the image slicing. I then imported it into Frontpage 2000 to add the hyperlinks and java etc.

As far as coding, I know next to nothing about. Psp and Fp do all of the coding for me. I'd love to try and fix the code. I went to http://validator.w3.org/ to check it out. Tell me, do I need a DOCTYPE on each page of my website or just the index page?

I'm pretty much a newbie to the world of website development - so any advice would be appreciated.



To Stevorino -

My iMAC has a power pc g3 processor - like about 350mhz
OS- Mac OS 8.6
32 megs ram
128 virtual memory
bus speed 66mhz
cache 512kb

The apps are:

AOL 5.0
IE 5
NS 4.5

I'm glad to hear the site looks fine on your MAC setup - what are you using?

[MotherNatrsSon]

Isn't this a "duplicate" thread. I recall answering a similar post. You page loks fine in Netscape 7 on my MAC.

G-4
MAC OS 9.2.2
812mb ram
100gb of hard drive
400 or 500mhrtz processor...

Code Validation (http://validator.w3.org/)

MNS

[tylerdog]

No, this isn't a repeat thread. I'm a brand new user at Web Developer.

Thanks for the code validation link.

[Stevorino]

To: tylerdog

I'm using:

Dual G4 1 GHZ
OSX 10.2.8
1.5 GB memory

I viewed your site in:

Netscape 7.1 (no music playing but looks good)
Explorer 5.22 (looks fine - music on entry)
Safari 1.0 (looks good but no music)
OmniWeb 4.5 (looks good but no music)


Seems like only Explorer plays music on entry. Site looks identical on all browsers though.

[James L.]

Hey,

Yes, you need a valid doctype on EACH page. I would start with HTML 4.01 Transitional, also called loose. It is a bit more forgiving than HTML 4.01 Strict, and XHTML.

You can get the DOCTYPE from the W3 site, then add it to the very top of each page (above the head section). From there, run each page through the validator, and fix up the coding errors.

If you want to learn valid coding, and don't have much experience, then I would strongly recommend some of the online tutorials that exist. I don't know which ones are great as I haven't used them...maybe some people could help.

Next up, I would recommened a book called "Sams teach yourself CSS in 24 hours". It is a no nonsense, great guide to CSS, has information on where the browser support is good and weak, which hacks are required for specific browser isssues, etc.

With regards to the sound not playing in some browsers, if you used the bgsound attribute... I believe it is a Microsoft proprietary attribute (ugh). This means it will only work in their browser, and not in any others. How typical Microsoft. Here is a quote from the W3 site:

"Users sometimes specify background sounds with the "bgsound" attribute. Note. This attribute is not part of [HTML4.0]."

I don't think it will cause display issues in other browsers, but it will throw up errors in the validator.

...hope this helps!

[tylerdog]

Thanks Stevorino


One more question James L -

Thanks for the DOCTYPE info - I'm on it. And I know what you mean about CSS, I need to look into it. It would be a much more efficient way to go. And I'll look for a javascript that will play background music - that should fix that problem.

Question: what site builder has the least margin for errors? I heard that Dreamweaver is supposed to be the best.

Any ideas?

[James L.]

Hey,

Currently, in the latest issue of MacAddict, they do a head to head with GoLive and Dreamweaver. In most of these, Dreamweaver seems to come out on top.

Having said that, I don't use either as when I learned to code my instructor would only allow us to hand code, then validate the pages on the W3 site.

If you go to Adobe.com or Macromedia.com you can download 30 day trials of either of these programs though. If you have a Mac or PC you could probably do this on one machine for a month, and then if you still were undecided do it on the other machine for another month. This would give you some time to check them out.

Note, if you decide to buy and you are a student there are great discounts usually at the university book stores for these programs.