Wed, 2006-02-08 15:15
After working out all the bugs on my new site on all of the major pc browsers, it turns out that my layout falls apart on any of the browsers (as far as I can tell) when they are on the Macintosh platform. Specifically, (1) my overall layout should be centered, but on the Mac it's flush left; (2) the contact information at the bottom of my layout should be centered within the overall layout, but it too is flush left on the Mac; (3) the top margin of my text column (the middle column in my design) should be flush with the columns that surround it, but on the Mac it is below the margins of the surrounding columns. The url for the site is: http://www.NewYorkMultimedia.com.
I'm still a newbe when it comes to css design. Anyone who could offer their insight into the causes and solutions to these problems, I would truly appreciate it.
Wed, 2006-02-08 16:12
#1
Re: Macintosh Mangles My CSS
ckbraman wrote:
I've tried your site on 2 different Mac browsers (Safari and FF) and I don't see any of those problems. (1) my overall layout should be centered, but on the Mac it's flush left; (2) the contact information at the bottom of my layout should be centered within the overall layout, but it too is flush left on the Mac; (3) the top margin of my text column (the middle column in my design) should be flush with the columns that surround it, but on the Mac it is below the margins of the surrounding columns.
Wed, 2006-02-08 16:15
#2
Macintosh Mangles My CSS
I just tried it in Omniweb, Opera, Netscape, Shiira and Camino. None of them show your troubles either. :shrug:
Wed, 2006-02-08 17:36
#3
Macintosh Mangles My CSS
He must mean IE/Mac. Try changing the margins in #wrapper from:
margin: 0 auto;
to:
margin: 0; margin-left: auto; margin-right: auto;
Wed, 2006-02-08 19:07
#4
Macintosh Mangles My CSS
wolfcry911 wrote:
Blah, IE/Mac is officially dead now and I don't even check pages for it anymore.
He must mean IE/Mac.
It's rightful place:
Wed, 2006-02-08 19:32
#5
Thanks very much
Triumph, Wolfcry911,
Thanks very much for being so generous to test my site on so many Mac browsers. And I have to apologise; it is possible that the only browser on the Mac that I tested it on was IE, although my memory was of Safari and IE. In any case, I made the change in code that you recommended, and it continues to display fine on the PC. I'll assume that it solves the problem on the Mac, although I won't be able to test it until I come across a Mac in my travels because I don't own one.
From what you wrote, I'm also assuming the nearly no one on the Mac side uses IE anymore... just my unfortunate luck to have come across two computers that still had it installed. If that's the case, I won't worry about the mis-alignment of the upper margin of the center column on ie Mac, since very few people will see it.
Thanks again.
Wed, 2006-02-08 21:31
#6
Macintosh Mangles My CSS
You can read the news for yourself at microsoft's site:
Ding Dong! The Witch is dead. Which old Witch? The Wicked Witch!
Ding Dong! The Wicked Witch is dead.
Hooray! 
Thu, 2006-02-09 21:52
#7
Update
Had an opportunity to visit a Mac today, and it turns out that the code change suggested by Wolfcry didn't fix the problem. Doing some reading after I returned home, I think I have it fixed now... it seems as though IE5 doesn't understand "auto", so you have to use a hack by adding "text-alignment: center" to the body tag, and "text-alignment: left" to the wrapper tag to center divs in IE5. Anyway, I'm hoping that fixes it, because even though IE5 is officially dead on the Mac, it has been loaded on the last three Macs I've visited so it's probably worth taking into consideration.
Thu, 2006-02-09 22:15
#8
Macintosh Mangles My CSS
It's IE5 on PC that doesn't understand auto margin, so the fix you mention (text-alignment) fixes that. IE/Mac doesn't grok the shorthand margin, but it does understand the margin-left and right: auto bit, which is why I suggested it's use. As to why it's not centering I'm at a loss, but will look into it more tomorrow (btw, it's still not working).
Thu, 2006-02-09 22:25
#9
Re: Update
ckbraman wrote:
Were they also running Mac OS 9.2.2? ... even though IE5 is officially dead on the Mac, it has been loaded on the last three Macs I've visited so it's probably worth taking into consideration.
Thu, 2006-02-09 22:54
#10
More weirdness!
Hi Wolfcry911 & Triumph,
Thanks for continuing to follow through.
Wolfcry911, when I saw that
margin: 0;
margin-left: auto;
margin-right: auto;
didn't fix the problem, for the heck of it, I tried
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
which had the effect of wrecking the alignment on Firefox on the PC, so I've currently replaced the code with the original
margin: 0 auto;
...don't know what to do next, if anything...
Triumph,
I believe the operating system was some version of osX (sorry, I'm no longer a Mac guy, I'm not sure if that's how you write it...)
Just to add one more weird problem to the mix, again on the Mac side...
I actually have two variations of the website, NewYorkMultimedia.com and ChuckBramanPortfolio.com. On Safari on the Mac, ChuckBramanPortfolio.com doesn't display my photo on the left hand column, although it does display the photo on NewYorkMultimedia.com. *All* other browsers on both platforms, displays the photo fine on both sites. I can't figure that out at all...
Fri, 2006-02-10 18:57
#11
Macintosh Mangles My CSS
okay, I did some testing today and believe I found the problem. First, IE/Mac does indeed understand the shorthand margin: 0 auto; - it's only when centering tables that it needs the long version. The problem is with the overflow on wrapper. It's in the wrong place. Remove it from wrapper and place it on the content div.
Sun, 2006-02-12 22:59
#12
Thanks, but...
wolfcry911,
Thanks again for your help. Unfortunately, though, moving the overflow to the content div causes the footer div to separate from the content div in Opera on the PC., so I had to move it back again.
Mon, 2006-02-13 13:18
#13
Macintosh Mangles My CSS
simply don't float the footer...
Mon, 2006-02-13 14:57
#14
That worked!
So far as I can tell now, thanks to your help and the help of some of the others on this board, every css-related mistake of mine on my site has been corrected, and it displays as intended across all browsers. Thanks again to you and everyone else who helped. I appreciate all you've done for me.
Mon, 2006-02-13 15:07
#15
Oops, spoke too soon...
Sorry, I hit the upload button on Dreamweaver with the stylesheet hightlighted but not selected. It hadn't actually loaded when I did my tests.
After actually loading the stylesheet with float either set to "none" or removed altogether, the page displays fine in all pc browsers except Opera, which moves the footer into the bottom of the right column.