Cross platform browser appearance

[Goose]

Hello all. I’ve got a few questions and comments about Publisher
created websites. I wish I had found this forum eight months ago –
I’ve come across some great tips and information recently. Thanks for
your contributions.

I’m using Publisher 2007 (with Office SP2 installed) and have evolved
a web site (www.dogandwhistlegoosecontrol.com) built essentially with
text boxes, embedded photos/graphics and with some external links to
PDF files on the webhosting server and to other websites.

I initially built the site with Publisher 2003 and had many cross
platform browser issues. What looked good on my computer in IE was
unacceptable in FF and even worse in Safari. The issues were
typically object and text alignment. I was ready to chuck it all and
have a web design firm takeover, but at the last moment we upgraded to
Office 2007 and simply by opening and publishing the Pub. 2003 file in
Pub. 2007, most of the issues went away. What’s left however is still
a nagging disparity in font depiction and line spacing between
browsers or even with same browser but with a different computer.

I understand the Publisher created HTML code is non-standard or non-
compliant. Is this then just the nature of the beast in a Publisher
created site – do Publisher produced sites typically have this issue?

Thanks in advance for your insights.
Brett

 

[GeoffreyChaucer]

Yes Goose, some browsers do create problems and "SOME" of these problems are
unique to Publisher-created websites. As far as fonts are concerned, you can
minimise the problem by using web standard fonts such as: Arial, Verdana,
Comic, Georgia, Times New Roman etc. FF notoriously distorts odd fonts.

Personally, I design mainly for IE and to some extent for FF and I ignore
Safari and the other exotic browsers. I noticed that if a Publisher-created
website looks alright in FF, it "USUALLY" also looks alright in Safari but
not always.

Let's see what the rescue team has to say about this matter.
DavidF, Don Schmidt, Spike, Maureen, Rob Giordano, you have the floor.

 

[MAURH]

Goose,

I use Publisher 2003 for my website so my experience may be slightly
different to yours, but like Geoffrey I design mainly for IE and test it in
Firefox. Through my hosting company, I can check which browsers people are
using to view my website and those figures tell me that the majority of
people use IE. Next comes FF and then a very small proportion, 1 in approx.
350, use other browsers. So I take the view that if you get your website
looking good in IE and FF, you cover the vast majority of viewers.

If you use a non web standard font it can cause you problems....even in IE,
so it's important to use fonts that are acceptable to the web. If you read a
web design tutorial, i.e. http://www.webdesignfromscratch.com/ you will
find that most recommend Verdana as the easiest on the eye for your
viewers..and that's what you want for your viewer isn't it? Some of the
fonts in some of my titles are Copperplate Gothic and Trebuchet MS and
whilst they all seem to work well too, they are limited in use.

As to your spacing problem. I seem to remember having this problem some time
ago when viewed in FF and I think one of the things I did was to make sure
the special characters was unchecked >view>special characters. Not
completely sure about this as it was a good while ago, but it's worth a try.
DavidF could probably confirm it....and I'm sure he will be along soon.

Nice looking site! I could do with your services to keep the cats out of my
garden!

Maureen

 

[John G.]

If you took away the white space on the left thenyour pages would fit on a
1024/768 screen with no need to scroll across which is an annoying little
thing in my opinion.

John G.

Hello all. I’ve got a few questions and comments about Publisher
created websites. I wish I had found this forum eight months ago –
I’ve come across some great tips and information recently. Thanks for
your contributions.

I’m using Publisher 2007 (with Office SP2 installed) and have evolved
a web site (www.dogandwhistlegoosecontrol.com) built essentially with
text boxes, embedded photos/graphics and with some external links to
PDF files on the webhosting server and to other websites.

I initially built the site with Publisher 2003 and had many cross
platform browser issues. What looked good on my computer in IE was
unacceptable in FF and even worse in Safari. The issues were
typically object and text alignment. I was ready to chuck it all and
have a web design firm takeover, but at the last moment we upgraded to
Office 2007 and simply by opening and publishing the Pub. 2003 file in
Pub. 2007, most of the issues went away. What’s left however is still
a nagging disparity in font depiction and line spacing between
browsers or even with same browser but with a different computer.

I understand the Publisher created HTML code is non-standard or non-
compliant. Is this then just the nature of the beast in a Publisher
created site – do Publisher produced sites typically have this issue?

Thanks in advance for your insights.
Brett

 

[MAURH]

Interestingly John, my screen is set at 1024/768 and I don't see any white
space on the left at all. This website is in the centre of my screen, with
just a grey background. I wonder why you see it differently?

Maureen

 

[John G.]

Now I look further-
IE7 and FF3.51 look too wide and IE8 is nicely centred both the IEs are set
to 100% zoom.

No it is not that simple. looking at them all and restarting I got some
different results in FF so I will withdraw my criticism but it is worth
watching.

John G.

 

[DavidF]

Brett,

Every browser will render fonts and pages a bit different regardless of the
tool you use to produce the web. For example I recently read that Verdana
font renders larger in FireFox than it does in IE, and yet this is supposed
a web safe font. However in this case, I don't think using the wrong font is
the issue with your pages.

John G. alluded to the problem with his observation about how the pages look
wider to him in FireFox than in IE. If you load your home page in IE7 and FF
and compare the two you will see that all the images and the page is roughly
125% larger in FF while the font size has not increased proportionally. Look
carefully at the first paragraph and you will see that the text has simply
wrapped at a different place. The text box is 125% wider. And here is a
measurable illustration. Here is a link to the main picture on your home
page when it is viewed in IE7:
http://www.dogandwhistlegoosecontrol.com/index_files/image581.jpg and here
is the picture that is rendered in FF:
http://www.dogandwhistlegoosecontrol.com/index_files/image5811.jpg You will
notice that the difference is one is 708 pixels wide and the other is
887...or 125% larger in FF.

Now as to the cause. On the machine that you produce your site, which is
probably a laptop, go to your control panel, and then the display...or with
XP just right click your desktop > properties. Then in that dialog go to the
Settings tab > Advanced. Under Display your machine is most likely set to
120 dpi. Change that to 96 dpi and ok out. Now open your Publisher file and
Publish new web files and upload them and you will get consistent pages and
spacing in both IE and FF. Notice if you divide 120 by 96 you will get 1.25
or 125%.

Publisher outputs its pages and images at a default of 96 dpi or ppi which
in this case are used interchangeably. Many of the new high resolution
screens, and especially laptops, come preset with the Display set at 120 dpi
to make the text easier to read at those higher resolutions, while 96 has
been the industry standard in the past. It is better to reset your display
at 96 dpi so your pages are produced at the 'standard'. Try changing the
font size from the Appearance tab instead if you want the text size
increased on your display. This does not adversely affect your font size and
spacing in your Publisher webs. Otherwise you can choose to live with the
difference in the size of your web pages in different browsers. I read
recently that Apple has gone back to setting all their displays to 96 dpi
because of the problems associated with having the displays at 120
dpi....though I am confident it was some other problems than Publisher webs
<g>.

If you have other spacing issues after making this change then post back
with a link to the page and specifics and we will try to help. In some cases
spacing can be affected if you use more than a single line spacing in text
boxes and other print formatting for the paragraphs, but I believe the major
issues you are having has to do with the 96/120 dpi issue.

If at some point you decide that this tradeoff or weakness in Publisher webs
is unacceptable I would suggest that you look at Serif WebPlus as an
alternative rather than giving the site to someone else. WebPlus works much
as Publisher and does not have this problem. And of course you could go to a
full standards compliant program such as Web Expression but the learning
curve is large, and requires learning some html and php coding.

And by the way, like the others that have commented, I like your site. It is
clean, well laid out, not a lot of bells and whistles, etc...you did a good
job. One tip...read the post on 9/17 by Lynn about Back to Top bookmark
trick...and Spike and Maureen's post. There approach is better than just
writing a link to the page as you have done...

Keep up the good work...hope this helps.

DavidF

Hello all. I’ve got a few questions and comments about Publisher
created websites. I wish I had found this forum eight months ago –
I’ve come across some great tips and information recently. Thanks for
your contributions.

I’m using Publisher 2007 (with Office SP2 installed) and have evolved
a web site (www.dogandwhistlegoosecontrol.com) built essentially with
text boxes, embedded photos/graphics and with some external links to
PDF files on the webhosting server and to other websites.

I initially built the site with Publisher 2003 and had many cross
platform browser issues. What looked good on my computer in IE was
unacceptable in FF and even worse in Safari. The issues were
typically object and text alignment. I was ready to chuck it all and
have a web design firm takeover, but at the last moment we upgraded to
Office 2007 and simply by opening and publishing the Pub. 2003 file in
Pub. 2007, most of the issues went away. What’s left however is still
a nagging disparity in font depiction and line spacing between
browsers or even with same browser but with a different computer.

I understand the Publisher created HTML code is non-standard or non-
compliant. Is this then just the nature of the beast in a Publisher
created site – do Publisher produced sites typically have this issue?

Thanks in advance for your insights.
Brett

 

[Spike]

At 1440 X 900 it is on the left
I did notice that the navigation bar on the home page acts differently than
the bars on other pages. On the home page the hyperlink is available over
the entire area, where as the bars on other pages the hyperlink is not
available on the text, but above and under it is. I am wondering if the
originator of the site altered the navigation bars.

Spike

 

[Goose]

You guys are awesome! I implemented David’s suggestion to change the
font setting from 120 to 96 dpi (and as he deduced, I am using a
laptop to produce the Pub file) and republished the files. I do see
improvement to the FF viewing on all computers (as well as on IE on my
laptop). Previously, FF had displayed exaggerated vertical spacing,
but now it looks like it should and comparable to IE.

Fonts still display a bit different in their line weight, but I can
live with this for the time being. As Geoffrey and Maureen point
out, I am using non-web fonts throughout. To Publisher’s credit the
warnings about using non-web fonts are clear, including having to un-
tick a box to make the non-web fonts available. Interestingly, I
even found font variation created when I changed one of the monitor’s
refresh setting from 60 to 75 mhz. I do like Verdana, so I’ll
experiment with swapping it out the Trebuchet MS, which is the bulk of
the font use.

Centering: The pages do not have the supplemental centering code
offered by Spike (replacing </ahead> with the centering string), yet
to me they appear centered when viewing on a 4:3 monitor with a
1024x768 resolution setting. Maybe because I’m using a 984px page
width?? In fact, when I put in the centering code, it appears to me
the page is pushed too far to the right. For testing, I have now
added the centering code to one page – the Goose Dog Evaluation link
(Page 919). I would appreciate someone viewing this page, comparing
it to the others and letting me know what they see. Thanks.

 

[Goose]

At 1440 X 900 it is on the left
I did notice that the navigation bar on the home page acts differently than
the bars on other pages.  On the home page the hyperlink is available over
the entire area, where as the bars on other pages the hyperlink is not
available on the text, but above and under it is.  I am wondering if the
originator of the site altered the navigation bars.

Spike

What do guys know everything! Yes, I have mutilated the Navigation
bars. The lower bars were added after the upper ones and in some
manner when I would change the name for one page on the lower bar, all
of the other bar names would also change to that name (and even
sometimes the original Home/Contacts bar). They've been ungrouped, re-
texted, re-hyperlinked and generally bashed about everywhich way.

 

[Goose]

Re centering - my bad, I had cut and pasted the code still with the
760 px reference. I've corrected it to 984 and it centered. Thanks
again.

 

[Spike]

Goose

Thanks for the complement
BUT it isn't that we know everything
It is that we have made most of the errors and mistakes ourselves and have
learned form it
And it is centered here now at 1440 X 900

Spike

 

[DavidF]

Glad it worked out.

Trebuchet is a web friendly font. You shouldn't have to switch it. It may
look a bit different in different browsers, but that is somewhat normal from
what I know.

If you run across other cross browser issues, let us know. We should be able
to provide a workaround.

DavidF

You guys are awesome! I implemented David's suggestion to change the
font setting from 120 to 96 dpi (and as he deduced, I am using a
laptop to produce the Pub file) and republished the files. I do see
improvement to the FF viewing on all computers (as well as on IE on my
laptop). Previously, FF had displayed exaggerated vertical spacing,
but now it looks like it should and comparable to IE.

Fonts still display a bit different in their line weight, but I can
live with this for the time being. As Geoffrey and Maureen point
out, I am using non-web fonts throughout. To Publisher's credit the
warnings about using non-web fonts are clear, including having to un-
tick a box to make the non-web fonts available. Interestingly, I
even found font variation created when I changed one of the monitor's
refresh setting from 60 to 75 mhz. I do like Verdana, so I'll
experiment with swapping it out the Trebuchet MS, which is the bulk of
the font use.

Centering: The pages do not have the supplemental centering code
offered by Spike (replacing </ahead> with the centering string), yet
to me they appear centered when viewing on a 4:3 monitor with a
1024x768 resolution setting. Maybe because I'm using a 984px page
width?? In fact, when I put in the centering code, it appears to me
the page is pushed too far to the right. For testing, I have now
added the centering code to one page - the Goose Dog Evaluation link
(Page 919). I would appreciate someone viewing this page, comparing
it to the others and letting me know what they see. Thanks.

 

[GeoffreyChaucer]

David, brilliant explanation about the setting (standard 96 dpi).
I would not have thought of that.

Re-setting to 96 dpi will fix the display for Goose, but will it fix the
problem for visitors using HD monitors set at 120 dpi?

 

[DavidF]

Good question. Try changing the setting on your own monitor or screen
temporarily to 120 dpi and look at his site and your own. The results vary
with the browser used, but by and large I think producing pages at 96 dpi is
the best option. Pub 2000 sites are not affected as much as newer versions
;-).

DavidF