Would it just be easier to tell my customers to buy a Mac?

October 6, 2008 6:54 AM

I designed this website on my Mac. The problem is that it looks slightly different on the PC (or Windows in VMWare) and my skills aren't advanced enough to figure out this problem on my own. More inside.

Basically, when my site is viewed on a PC, I want it to look identical to what it looks like on my Mac (fonts, layout, everything). The problems are:

(i) the font is slightly different, which leads to
(ii) the spacing is slightly off (particularly in the three brown boxes below the main text area and in the nav bar in the upper right corner of the page), and
(iii) the right margin of the main text area (beginning with "There is nothing...") doesn't extend far enough to the right.

I would also like to make the page static. That is, I want to prevent a user's browser settings (e.g. for font size) from effecting how my page displays. My CSS stylesheet can be found here.

I'm sure this is easy for more experienced developers, but its all slightly beyond me. Any help from those with access to both platforms would be appreciated.

posted by pantheON to computers & internet (11 comments total)

hmm... I'm far from an expert in such matters (and I think that preventing users from being able to adjust font size is not a good idea) but upon perusing your stylesheet I don't see anything regarding fonts whatsoever - maybe that would be a good place to start

like so:

body { font-family: serif; }
p { font-size: 13px; }

unfortunately, I don't think this will override the fact that PCs & Macs actually have different fonts & so the sizing will always be somewhat different

the only way I know of to make your fonts look absolutely the same across all browsers/platforms/machines is to turn them into images - this, however, makes for some serious accessibility issues
posted by jammy at 7:07 AM on October 6, 2008

The best you can achieve is that it will look *similar* across platforms. Identical is impossible to achieve.
posted by unixrat at 7:13 AM on October 6, 2008 [1 favorite has favorites]

I would also like to make the page static. That is, I want to prevent a user's browser settings (e.g. for font size) from effecting how my page displays.

Make PDFs instead. Sorry, the web is simply not a static medium.

Your site looks fine in IE 7 for me, so I can't diagnose your specific problem. But to get more consistency between browsers in general I recommend 1) keeping your CSS organized in external stylesheets with meaningful names, 2) using reset.css as a standard base, 3) testing on multiple platforms with something like Bootcamp and/or something like browsershots, and 4) using conditional comments for IE-specific adjustments.
posted by scottreynen at 7:32 AM on October 6, 2008 [4 favorites has favorites]

scottreynen: I'll implement your first two suggestions. Can I ask though, in IE7 on your computer, does the right-hand margin of the main text area extend all the way to the edge of the brown box containing the phrase "A Defence You Can Afford"?
posted by pantheON at 7:52 AM on October 6, 2008

The problem is that you have used absolute positioning on some of your DIVs but used tables for other placement. Your table cells are growing and shrinking as the text changes size, but your aboslutely-positioned DIVs are staying in the same place, which makes a mess.

Your code needs to be ripped apart and you need to use either CSS for layout OR tables for layout, but generally not both mixed together in that way.
posted by bcwinters at 8:04 AM on October 6, 2008

bcwinters: This may be the problem, but I use Dreamweaver and have let it handle most of the code. Bad idea it sems.
posted by pantheON at 8:22 AM on October 6, 2008

Echoing bcwinters, the HTML markup in place is overly complicated for other designers to jump in and make a quick fix. You shouldn't need more than 4-6 levels of nested div's to acheive the same effect. Dealing with all those tables is cumbersome. But, from where I stand, this site looks just fine as is, in IE 6 and Firefox 3 on Windows. Trying to fix minor spacing issues can drive you nuts, when most people don't even notice those small details.

For other novice web designers who, run into cross-broswer compatibility issues, there's plenty of sage advice at dowebsitesneedtolookexactlythesameineverybrowser.com.
posted by nemoorange at 8:24 AM on October 6, 2008 [3 favorites has favorites]

http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

Rip your website apart and start here. You can learn this in a day. Dreamweaver is great for mockups, but tends to generate wacky, complicated code.
posted by GilloD at 8:50 AM on October 6, 2008

I'm a big fan of the IE NetRenderer for testing the basics in back-versions of IE.
posted by Plug Dub In at 8:58 AM on October 6, 2008

Looks fine on Firefox 3 on Windows and IE7 here. But like everyone else here said, you might as well start over. Seeing both table- and div-based layout simultaneously can make a web developer/designer cry. And it looks like it's fixed-width throughout too.

I highly encourage hand-coding your websites, rather than relying on Dreamweaver. Sorry I can't point to online tutorials on this, but I read this book for my first experience with CSS.
posted by curagea at 10:33 AM on October 6, 2008

I would also like to make the page static. That is, I want to prevent a user's browser settings (e.g. for font size) from effecting how my page displays.

Bad idea. You don't think anyone with visual problems (or anyone over 60) will ever try to access your site? You want them to be able to read it, right? Then they need to be able to increase the font size. Please do not specify everything in exact sizes - use percentages and ems/exs.
posted by timepiece at 2:35 PM on October 6, 2008