Website wrong on Mac OS

Joined
Dec 9, 2010
Messages
4
Reaction score
0
Points
1
Hey guys!

I have a big problem with my website. Currently I am working on a school project where I have to make a website. The website is 99%done, and works perfectly on windows, and the browsers in windows. But when I want to view it on a Mac computer with a Mac OS system, the website messes up. It is like there is some kind of margin problem, but then it should not work on windows? It is the front page, the News page and the Gallery page that has this problem.

So I am hoping someone in here can help me.

The Address is The Perth Group

Thanks in advance!
 
Joined
May 19, 2009
Messages
8,428
Reaction score
295
Points
83
Location
Waiting for a mate . . .
Your Mac's Specs
21" iMac 2.9Ghz 16GB RAM - 10.11.3, iPhone6s & iPad Air 2 - iOS 9.2.1, ATV 4Th Gen tvOS, ATV3
Well loaded front page in FF, safari and Google Chrome on the front page and all seemed fine there.

Now News page was

20101209-8ex6mnkjm4mn36cy8bdec47nyg.jpg
20101209-bujahgq5uqxirgehynn9nyhhgq.jpg
20101209-p84qdu6q299s6r5ktygccm5rmm.jpg


And Gallery was good all through except for Chrome

20101209-gjyxje35kta4acwsgty21c7sum.jpg


Is this what you meant as *Margin Problems* ??
 
OP
S
Joined
Dec 9, 2010
Messages
4
Reaction score
0
Points
1
Okay, the front page should be wrong also, at least on the macs i've tested it on. The flashplayer is beeing pushed out to the far right and is not center as it should be.

But yes, that is the problems I was referring to. Do you know how to fix these problems?

Thanks!
 

vansmith

Senior Member
Joined
Oct 19, 2008
Messages
19,924
Reaction score
559
Points
113
Location
Queensland
Your Mac's Specs
Mini (2014, 2018, 2020), MBA (2020), iPad Pro (2018), iPhone 13 Pro Max, Watch (S6)
The problem has nothing to do with the OS - webpage rendering is independent of the underlying operating system. The issue is the browser. Have you tried viewing the webpage in a browser that you also use on Windows (there are at least four that work on both - Firefox, Opera, Chrome and Safari).
 
Joined
Nov 29, 2010
Messages
27
Reaction score
1
Points
3
Location
Vancouver, BC, Canada
Your Mac's Specs
Black 13.3" MacBook 4,1 Intel Core2 Duo, 4Gigs Ram (2x2G), 2.4GHz, OS X 10.7.2
The problem has nothing to do with the OS - webpage rendering is independent of the underlying operating system.

I wish that were true, unfortunately I've found that Firefox 3.6 for Linux != Firefox 3.6 for Windows != Firefox 3.6 for Mac.

For example, my employer has a site for employees to login and see their schedules and such, but it was created using Microsoft Silverlight. It only works in Windows. Even with the Silverlight plugin for Mac, the page starts to load but then just shows a blank white page where there should be a login dialog. Loads perfectly in all browsers in Windows, but not Linux or Mac.

Another example, I created a php script for my own site (www.theDBM.ca) that dynamically creates a gallery of thumbnails from images in a directory. When you click on a thumbnail, another php script displays the image and a brief description. That display page was intended to have a black background. Seemed to work fine when I created and tested it in Linux, but when I viewed it in Windows 7, the page had a default white background. Turns out the php scripts should have had proper html tags but were php only (my bad). It looked correct in Linux, but not in Windows - until I added the basic html tags. Now it looks the same in all platforms.

Moral of the story, if you don't do things absolutely "correct" then it seems the browser versions for different platforms do have different ways of handling "issues". But if you do everything right, they should all display the same thing (pretty close, anyway).
 
OP
S
Joined
Dec 9, 2010
Messages
4
Reaction score
0
Points
1
The problem has nothing to do with the OS - webpage rendering is independent of the underlying operating system. The issue is the browser. Have you tried viewing the webpage in a browser that you also use on Windows (there are at least four that work on both - Firefox, Opera, Chrome and Safari).

Iv'e tried all the browsers in windows, and the same browers in Mac OS. And all the browsers work on windows. And none of them work on Mac.
So it has to be something with the Mac OS...

So please help if you can :)
 
Joined
Apr 23, 2009
Messages
79
Reaction score
0
Points
6
It looks like the JS is doing something badly.
Honestly, the site's code is extremely messy and would fail validation.
 
OP
S
Joined
Dec 9, 2010
Messages
4
Reaction score
0
Points
1
It looks like the JS is doing something badly.
Honestly, the site's code is extremely messy and would fail validation.

Actually, all the sites except the video site passed the validator with flying colors. So that is not the problem. I know it is not the prettiest code, but given the fact that it passed in the validator and works perfectly on all the browser in windows, Mac OS has to be the problem.. can't see what else it could be
 
Joined
Apr 23, 2009
Messages
79
Reaction score
0
Points
6
I didn't think files with spaces would pass validation. At very least, it's not a good idea.
The code was simply messy. Sorry I can't be more helpful.
 
Joined
Jun 25, 2005
Messages
3,231
Reaction score
112
Points
63
Location
On the road
Your Mac's Specs
2011 MBP, i7, 16GB RAM, MBP 2.16Ghz Core Duo, 2GB ram, Dual 867Mhz MDD, 1.75GB ram, ATI 9800 Pro vid
In my opinion it looks like bad CSS construction. I played with the front page a bit and was able to make it look correct on a Mac and Windows. I'm not convinced my CSS is great either, but the page looked good.

I altered the index.html file very little, but used the position tag several times in the css file, and fixed up the margins given my other changes. I used the wrapper as the base of the other boxes so one thing I got rid of was some of those negative numbers.

I didn't work on the other pages.

I don't know CSS well, so take this with a grain of salt. I think the HTML and CSS is more complicated than it needs to be, so I suspect the same result can be achieved by simplifying the box models, perhaps by splitting out your sections better.

By the way, in your 'content' tag, you can replace the following two lines with a background-color attribute. You'll save 12k from downloading the image that you'll also no longer need to create.
Code:
background-image:url(images/index_02.jpg);
background-repeat:repeat-y;
Code:
background-color: black;
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top