Mis-aligned text on Mac

[Chipshop]

Hello all this is my first post so i hope you can help.
The problem is that i don't have a mac to develop on (and in the past that hasn't been a problem) but i'm currently doing a site for a client and they soley use a mac (Firefox / Safari) to view my work.
The site so far looks and functions the way i want it to on windows using IE7 / 8, Firefox 3, Safari and Opera 9.5, The client sent over this screenshot (etsdomedia.co.uk/chhttp://www.larmseekers/images/screwy.jpg) and here (http://www.letsdomedia.co.uk/charmseekers/index.html) is where i am testing the page!

Thanks in advance... i can't quite afford a Mac to test things on :p

[Mr. E. Cryptic]

can you try posting the link for the screenshot again please, not there.

[Chipshop]

Oops hopefully i've managed it this time

http://www.letsdomedia.co.uk/charmseekers/index.html

Cheers in advance for any help

[Mr. E. Cryptic]

sorry, it's the 'screenshot' link that's not working - if you can repost it, it would be helpful to see the problem thats occuring.

[WebJoel]

....i don't have a mac to develop on Try "Safari-on-XP" browser. While it's display on XP might be slightly different that it's display on MAC, it's got to be closer than nothing at all. http://www.apple.com/safari/download/

[Chipshop]

yeah i have and do test on Safari, this is why it seems so weird to me. I can't see anything obviously wrong with the code either... just gotta try and find a Mac so I can have a look myself.
Thanks for looking

[Chipshop]

here is the screen shot link againhttp://www.letsdomedia.co.uk/charmseekers/images/screwy.jpg

[Mr. E. Cryptic]

the problem is that you've created an area tha has a finite height, and packed it very tightly with content.

Now, you've used absolute values for the font sizes to prevent users increasing the size and destroying your design, but you haven't taken into account that the same font on a PC and a MAC aren't actually the same font - mac's tending to display fonts slightly chunkier than their PC version (as is plainly visible in the screenshot).

The result is that your font is actually displaying bigger on a MAC-based browser, and so everything is being pushed down (in the same way it probably would if you changed your font size from 14 to 15px).

You've already packed your areas to their full height and so there's nowhere for the content to go. you could set the overflow to hidden, but that would just cut off the content, if you set to scroll then you get an ugly scroll bar.

I'm not sure if CSS can really do anything with this (with your current design) - hopefully there's a CSS guru here that might read and be able to give you a better answer from the perspective.

You other option is to make the content in the three areas smaller to allow for a few lines of expansion cross-platform.

As far as i know, there's no way to 'solve' the MAC/PC difference in fonts - it's just the way each system displays them, again I may be wrong though.

[Declan1991]

Probably if you change your font size down a px, it'll be okay, and won't look too bad on Microsoft either. You cannot be that precise, because there are too many different platforms that your site may be viewed on.

[Mr. E. Cryptic]

if you try reducing the font size and re-upload your files, and repost a reminder for me to do so on Monday, I'd be happy to check it from safari on a Mac for you (no mac at home unfortunately)

[Chipshop]

Cheers for the help guys, i thought i was up to date with all the known browser quirks... how wrong i was ;)

I've shrunk the text from 14 to 13, not ideal as the text then loses all its boldness and looks weak but if this is the only way then so be it!

I've updated the test page with the new pages, i appreciate the time..
Thanks again.

[Mr. E. Cryptic]

just to torment you further;

here's a screenshot from opera (http://www.partialreptile.com/test_images/shotOPERA.jpg) and one from safari (http://www.partialreptile.com/test_images/shotSAFARI.jpg) both on mac. Can't call this a platform problem :(

you could try another PX down?

[WebJoel]

here is the screen shot link againhttp://www.letsdomedia.co.uk/charmseekers/images/screwy.jpg OMG don't let my wife see these! :D She adores 'charm/trollbeads' and will probably buy your entire collection! :eek:

And in the vane of non-hijacking, have you seen how different fonts appear upon different platforms? Here: http://www.ajowebdesign.com/Fonts/Mac_Win_Common_Fonts_Groups.html