15 replies [Last post]
ckbraman
Offline
Regular
New York
Last seen: 15 years 12 weeks ago
New York
Joined: 2005-11-04
Posts: 34
Points: 0

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.

Anonymous
Anonymous's picture
Guru

Re: Macintosh Mangles My CSS

ckbraman wrote:
(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.
I've tried your site on 2 different Mac browsers (Safari and FF) and I don't see any of those problems.

Anonymous
Anonymous's picture
Guru

Macintosh Mangles My CSS

I just tried it in Omniweb, Opera, Netscape, Shiira and Camino. None of them show your troubles either. :shrug:

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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;

Anonymous
Anonymous's picture
Guru

Macintosh Mangles My CSS

wolfcry911 wrote:
He must mean IE/Mac.
Blah, IE/Mac is officially dead now and I don't even check pages for it anymore.

It's rightful place:

ckbraman
Offline
Regular
New York
Last seen: 15 years 12 weeks ago
New York
Joined: 2005-11-04
Posts: 34
Points: 0

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.

Anonymous
Anonymous's picture
Guru

Macintosh Mangles My CSS

You can read the news for yourself at microsoft's site:

Mac/IE is dead

Ding Dong! The Witch is dead. Which old Witch? The Wicked Witch!
Ding Dong! The Wicked Witch is dead.

Hooray! Laughing out loud

ckbraman
Offline
Regular
New York
Last seen: 15 years 12 weeks ago
New York
Joined: 2005-11-04
Posts: 34
Points: 0

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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

Anonymous
Anonymous's picture
Guru

Re: Update

ckbraman wrote:
... 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.
Were they also running Mac OS 9.2.2? Wink

ckbraman
Offline
Regular
New York
Last seen: 15 years 12 weeks ago
New York
Joined: 2005-11-04
Posts: 34
Points: 0

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

ckbraman
Offline
Regular
New York
Last seen: 15 years 12 weeks ago
New York
Joined: 2005-11-04
Posts: 34
Points: 0

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Macintosh Mangles My CSS

simply don't float the footer...

ckbraman
Offline
Regular
New York
Last seen: 15 years 12 weeks ago
New York
Joined: 2005-11-04
Posts: 34
Points: 0

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.

ckbraman
Offline
Regular
New York
Last seen: 15 years 12 weeks ago
New York
Joined: 2005-11-04
Posts: 34
Points: 0

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.