Websites on Mac browser

redmazzy · April 21st, 2007, 04:19 PM

Hi I have just designed my portfolio site (I am a graphic designer) and it works really well. Trouble is when I view it on a mac in Safari the margins disapear, which completely ruins the style of the entire design! It also makes my links look very different, I set them in CSS to have a line through when you roll over, on Safari they look thicker and are underneath rather than through. It wouldn't be such a problem but most of my potential clients will be viewing on a mac. I have to get it to work on a mac browser! It works fine in IE, so for the time being I've put an opening page telling the viewer to view it in IE if they are on a mac, but I would like to have more of a full proof method. Does anyone have any ideas!???

Lchad · April 21st, 2007, 04:23 PM

Your best bet is to design the site for the Safari browser then. Then add tweaks to get it looking smart in IE. Safari and Firefox react similarly in my experience so you should always design for those browsers and then make it look acceptable in IE.

Ryan Fait · April 21st, 2007, 04:29 PM

Yes, and never tell a Mac use to use IE. They won't take to it kindly as it's a 7 year old browser that works about as well as a gun made out of origami. Get your site working in FF first, then fix for IE. If it works in FF, chances are you won't need to tweak a thing for Safari.

pa007 · April 21st, 2007, 04:44 PM

Hi there, I agree with what's already been said. I actually don't rejig my sites for ie/mac any more cos it's pretty poor so there must be something up with your code.

Post a link or your code and I'll see if I can find the problem.

Pete.

redmazzy · April 21st, 2007, 04:48 PM

Thanks I would appreciate it. If you look at the site in IE it should have quite large margins at the top, this is part of the design, but in safari it's flush to the top of the browser. It's not finished yet, but you can see what I mean anyway.

www.grist-to-the-mill.co.uk

Ryan Fait · April 21st, 2007, 07:38 PM

Try adding this CSS:

Code:

body {
  margin: 0;
  padding: 15px;
}

redmazzy · April 22nd, 2007, 06:43 AM

Ok I tried this, and although it helped, it did put a margin around the whole page, which I didn't want. So instead I set a box style with a margin on it, because its in frames I want the margin for the menu to be 50 and the margin for the main frame to be 120. So by setting them as styles on boxes this worked in firefox! But... not in ie, i fiddled around and eventually I could get it to work in ie but not firefox. I also don't understand why my font styles wont work in firefox, I have designed another site for work and it works in mac brower and in firefox, no problem with the font styles, but in my web page they don't work???