Appearance of site very different on others' displays

[jennadams]

I designed a simple site using P2007, it is currently under development and
up for your perusal at jadams.joganic.com.

Since this is my first site, I have been reading these forums continually
looking for hints about how to make it work correctly and display well on
other displays and across browsers. I have been testing simultaneously in FF
and IE 7 as I go along. I created the site for 800px and on my 1680
widescreen display, the site looks perfect in both browsers.

But when I go to look at it on my coworkers' screens (same ratio as mine.)
or on my laptop (IBM thinkpad, not sure of aspect,) or on my 19" monitor at
home...it looks like crud in IE. FF still looks good and even seems to size
niftily on roll. But to my eternal frustrations, in IE, all the text boxes,
pictures and design elements resize and rearrange themselves willy-nilly.

I am using both a font and a color scheme and I have no master pages. I am
using html frags for picture placement to avoid the quality degradation
issue. My links all work and all my pics display (except one pesky jeg that
pops in and out intermittently- still troubleshooting that one.) I have tried
various groupings, orders, repositioning, etc.

Why does this site look perfect only on my display? And why is it only IE
that causes it to crap up? Since Publisher and IE are both M$, I would think
they would play nicer together. I wouldn't think that the display driver
would have any effect on how Publisher creates the code...or does it?

Your insight would be much appreciated. I am under a lot of pressure to get
this site up and hosted like yesterday. I was thinking of using Office Live,
thinking that sticking with a M$ product would help me through some of the
inevitable VML issues, etc. If you have any thoughts on that as well, I'd
appreciate it.

Best,
Jennifer

 

[Rob Giordano [MS MVP]]

Looks fine here in IE7, FF3, and Chrome. The only thing that is messed up is
the Form.

 

[DavidF]

Jennifer,

First of all I congratulate on your approach to building your site. You have
read the posts in this newsgroups and found a lot of the formatting and
design issues that create cross browser compatibility issues. You also
tested as you built the page with both IE and FF. If more people did this
they would save themselves a lot of work redesigning their pages after the
fact.

Unfortunately I think you have come across another issue that is a bit more
obscure. Publisher web pages will render differently in IE6 depending upon
what the display dpi setting is. On the computer that you produce your site,
right click your desktop > properties > Settings > Advanced > and under the
Display and DPI settings what do you have it set at? 96 dpi or 120 dpi? Now
go to one of those other computers and do the same thing, and you will
probably find that they are set at a different dpi.

By default the Publisher html coding engine outputs the code at 96 dpi and
uses absolute positioning and layering. If you publish your web pages at 120
dpi and view the pages in IE6, then the layout can be scrambled. You can see
this for yourself if your display is set at 120 dpi, and you change it to
96, and republish. The pages will now look OK on the machines that are set
at 96 dpi and IE6....but render wrong at 120 dpi.

If you want to read some of the longggggg threads about this subject, here
is a link:
http://groups.google.com/group/micr...er.webdesign&q=120+dpi&qt_g=Search+this+group
The second thread especially discusses a lot of testing and exploring of
this issue.

Bottom line is that Publisher websites are going to look different if
someone views them on IE6 at a different dpi than what they were produced
at. Generally you would be better off publishing at 96 dpi as more monitors
and screens are using that default, except for the new high resolution
laptop screens and wide aspect monitors, so fewer people will have problems
viewing your site correctly. There is an obvious trade off and compromise
and no real fix. Except that IE7 and FF do not have this problem. The good
news is that fewer and fewer people are running IE6:
http://w3schools.com/browsers/browsers_stats.asp
Note that as of October 2008 only 20.2% are still using IE6, 26.9% are using
IE7....and perhaps most interestingly FF now is 44%! Notice that the use of
IE6 has been going down since November of 2003 and FF has been increasing
since it was introduced. Another thing to keep in mind is that IE8 beta is
now out, and so those people using IE6 will continue to be fewer and fewer.
Vista comes with IE7 right now, so as older computers are replaced, IE6 will
disappear...and thus this 96/120 dpi issue will probably go away. Of course
IE8 may open a whole new can of worms...

I guess what I am saying is I would probably produce your site at 96 dpi for
now to minimize the problem, or not worry about it and leave it at 120 dpi.
Total cross browser compatibility is only a goal...and a moving target. You
have done a good job of making your site render well for most people in most
browsers and in most versions of browsers.

DavidF

 

[jennadams]

Ah ha! You are absolutely right about the dpi. That fixed it.

I suppose I will eventually have to pay someone to reconstruct the site but
at least this gets us on the web.

Thank you thank you thank you.

 

[DavidF]

Thanks for posting back. It is appreciated.

I don't know that you will need to rebuild. Even the most sophisticated web
building programs have ongoing challenges of producing code that is cross
browser compatible. However, I am concerned about the feedback we are
getting about IE8 beta. If they don't fix that, then perhaps we will all be
switching.

DavidF