Problem displaying web pages

[terryp]

I have 2 publisher web pages produced on Publisher 2003 which until about a
month ago worked fine. They still work fine on 2 other computers I have
checked but they no longer display correctly on my laptop.
The pictures have a very grainy appearance on the home page and do not
display at all on other pages. When you right click the image and look at
properties they are listed as gif files even though they were jpeg in the
original document.
There are other images on the web pages which are still displaying as they
should and these still list as being jpeg images.

It seems that my laptop is now reading these images incorrectly and that a
setting must have changed on my laptop.

Can anyone help??

 

[DavidF]

Since you cannot right click an image to view the properties of an image in
IE, I assume that you are using FireFox or some other browser than IE.
Publisher uses VML and effectively produces two sets of code - one for IE
and one for all other browsers. It also makes copies of each inserted image
in different formats with the goal of serving up the best image depending on
the browser, with dubious results. Without more explanation of what goes on
in the background, I would suggest that you go to Tools > Options > Web tab
and uncheck "rely on VML..." and "allow PNG...", if you haven't already done
so. And probably more importantly you should compress your graphics before
you upload. This will resize and resample images so that when they are
copied during the publishing process, you are less likely to have jpg images
converted to gif images.

Reference: Compress graphics file sizes to create smaller Publisher Web
pages (2003):
http://office.microsoft.com/en-us/publisher/HA011266301033.aspx

And if these steps don't resolve the issue, then post back with your results
and a link to your site and a specific page where you are seeing the
problem. There are other reasons a jpg may be converted to a gif, but we
need to see the site and specific examples of the problem before we can help
further.

DavidF

 

[terryp]

Thanks David,
I 'm using ie7 with Vista but I can right click the images and display their
properties on my laptop. The other 2 computers I mentioned are also using ie7
and Vista but if I right click the images on those computers they say it's a
html document.
I uploaded Firefox to my laptop but it displays the web pages exactly the
same as ie7 does.
I tried compressing the graphics but this made no difference.
I couldn't find the Web tab you mentioned to uncheck "rely on VML..." and
"allow PNG...". Can you offer some more advice here?
I even found some other Publisher web sites and they displayed fine on my
laptop it's just my web pages that are misbehaving.

 

[terryp]

Links to both web sites are;
www.gutterguys.com.au
www.aluminiumguttersupplies.com.au

Both will load the home page but the images are very grainy.
Other pages load but the grainy images are not shown, just a box with a red
cross

 

[terryp]

Correction to my earlier post. Other Publisher Web sites are not displaying
correctly as I said earlier. They are doing the same thing. ie. pictures are
grainy on the home page and then do not show up on the next pages.

 

[DavidF]

terryp,

First of all, I have no idea how you can right click an image in a Publisher
2003 page with IE7. The VML coding prevents that. I guess you are special
;-)

I am guessing that part of your problem is because of how you have the
display settings different on the laptop vs. the other two computers. When I
view your site the page is 1,254 pixels wide and everything seems oversized.
So, first of all did you actually make your pages that width on purpose? Go
to File > Page Setup in Publisher and look at the page width. What is it?

Now right click your desktop > Properties to get a Display Properties
dialog. This may be different in Vista, in which case go to your control
panel and the display dialog that way. In that dialog, go to Settings tab >
Advanced button, and under Display check to see what the DPI setting is. It
should be either 120 or 96 dpi. Now check the other machines. They probably
differ from the laptop. If you produce you web files via Publisher on a
computer with the display set at 120 DPI and view the pages at 96 dpi, the
graphics and the whole page views are enlarged and could explain the grainy
nature of the images. Change the dpi setting on the laptop to the same as
the other two computers and see if that makes any difference. In general I
would recommend producing your site on a machine set at 96 dpi, as the
pictures are outputted at that resolution from Publisher when you produce
your web files.

Also, from another test I did, it appears to me that you have some of the
images on a Master Page. This creates major problems when viewing the pages
in FF and other browsers. Put all the images and other content on the main
page of your publication. Go to View > Master page to see if there is indeed
anything on the master page, including your navbar?

Another possible explanation for why your jpgs have been converted to lower
resolution gif files is that you did not compress them. Be sure when you run
the compress graphics feature that you compress all the graphics throughout
the publication. There should be that option when you select one image and
try to compress it.

Another possible explanation for the same thing is that if you group a jpg
with other design elements it can sometimes combine those elements into one
low resolution gif. Ungroup your design elements.

Also if you haven't done it, run the design checker under tools to see if
that spots any other issues.

Let me know if any of this fixes your issues. If it doesn't we can look for
other causes.

DavidF

 

[John G.]

As far as I can see none of the links work in Firefox so I suggest you get a
copy of FF and test your pages there as well as IE.

For the sake of your business it would be good if you made it clear that you
are away "over there" unless your aim is actually to cover the eastern
states as well.

John G.
..

 

[terryp]

Thanks once again David,
I checked the monitor resolution on my laptop and on one of the computers
that is working properly. Both are set to the highest resolution available so
I don't believe this is the cause of the problem. Additionally I haven't
changed my laptop resolution and it was working fine a few weeks ago.
I do have images on the master page and will modify this so they will
display on FF but this would not be causing my current problem.
I have compressed and reloaded the images but this has not made any
difference.
T have also run design checker and corrected the errors but this has not
solved the problem.
Any more ideas?

Terry

 

[DavidF]

Terry,

If you want help, then please answer my questions. It is possible that my
questions have nothing to do with the problems you are having with your
laptop, but I need the answers in order to eliminate the most obvious
problems.

As per my last post:

When I view your sites the pages are 1,254 pixels wide and everything seems
oversized. So, first of all did you actually make your pages that width on
purpose? Go to File > Page Setup in Publisher and look at the page width.
What is it?

I didn't ask you about the screen resolution. I asked what the dpi settings
were on your laptop and on your other computers. Are they set at 96 dpi or
120 dpi? See my last post on how to find the dpi setting. Also tell me which
computer you are using to produce your web files, and what the dpi setting
is on that computer. What are the settings on your laptop?

Before I suggested that you make sure some settings were correct and you
said you couldn't find them. So try again. In your Publisher file go to
Tools on the top menu. Click Options and this will open a dialog box. Click
the Web tab. On that page be sure to uncheck "Rely on VML..." and "Allow
PNG...". Right now your navbar does not function at all in FireFox and this
might be a possible reason, and might also be affecting the quality of your
images.

Speaking of the navbar, do you perhaps have it grouped with some other
design element. If so, ungroup it from the other elements, but don't ungroup
the elements within the navbar itself.

Remove all pictures and anything else you might have on a Master Page and do
this for every page of your Publisher doc. It is creating a major problem
when viewed with FireFox and effectively crashing FF. You or others can view
this link in FF to see what I mean:
http://www.aluminiumguttersupplies.com.au/index_files/Page329.htm
Be aware that I had to do a Ctrl + Alt + Del to shut down FF altogether in
the task manager when I tried to open it.

You really need to make sure the pages view well in FF as well as IE. FF has
gained market share, and almost as many people use it as IE. In fact, you
should eventually plan on downloading and installing it to test your pages
before you upload. It is a relatively small download, and as long as you opt
out of making it your default browser when you install it, it will not
create any problems for you. FireFox (7.8 MB):
http://www.mozilla.com/en-US/firefox/ You can do this later though.

You said that you compressed the images and reloaded the images. Did you
mean that you use the Compress Graphics tool in Publisher? If not, do so.

Reference: Compress graphics file sizes to create smaller Publisher Web
pages (2003):
http://office.microsoft.com/en-us/publisher/HA011266301033.aspx

After you have changed the options, or confirmed the options are unchecked
under the Web tab, after you have moved all the design elements off all
pages of your site, after you have compressed all the graphics, after you
have checked to see if your navbar is grouped with another design element,
etc.,then Publish to the web and upload your new files. Then come back with
the answers to my questions, and we will try this again. You need to work
with me here...

DavidF

 

[terryp]

David,
I deliberately set the page width on the "Gutter Guys" web site to 1250px
and on the "Aluminium Gutter Supplies" site to 1000px. If I set these to the
available options of "narrow" or "standard" the web page only fills 3/4 of
the laptop screen. Additionally on the other computers it only covers about
half of the screen.

These web sites were created on my laptop. My laptop is set to 96dpi as are
the other 2 computers I use.

I have found "Rely on VML" and "Allow PNG" and both were already unchecked.

I have used the "compress graphics tool" in publisher to compress the images.

I have removed all pictures from the master page of the "Aluminium Gutter
Supplies" website. Did you mean that I also have to remove the text boxes and
shapes that make up the coloured frame of the web site as I have not removed
them. Without these there will be nothing left on the master page. Please let
me know if that is what you meant.

I checked the navbar and it consists of 7 buttons each of which is made up
of a text box with the text written inside. I wanted the whole button to be
clickable rather than just the text (unfortunately I can't create a hyperlink
to a text box) so I made up a grid of autoshapes which overlays these
buttons. These autoshapes contain the hyperlink. All of these components are
linked together to make the nav bar.

I uploaded the modified web page to the net but the problems are still
exactly the same. I also viewed this page with Firefox and cannot access
anything beyond the home page as was the case previously.

The link you gave me to view my web page on FF obviously gets past the home
page. Interestingly, this image is exactly what I see when I look at the
pages (excl home page) of the web site from my laptop using ie7.

terryp

 

[DavidF]

terryp,

Thank you. That helped eliminate some potential issues, and provided some
additional insights.

Master Page - Yes, you should remove all design elements from the Master
Page. In general you should not use the Master Page feature in a Publisher
web and save that for print publications. It is unfortunate as it would be
great to use in exactly the way you are, but it just causes too many
problems in a Publisher web. But to be clear, I am talking about going to
View > Master Page and doing this for each page of the publication. Move
everything off the Master Page and to the main pages of your publication.

As per how you fixed the navbar in
http://www.aluminiumguttersupplies.com.au/ , that was a creative approach
but is probably the reason your navbar is not working in FF. By design
Publisher 2003 allows one to group two or more design objects together so
that it is easy to move those design elements around in a group and maintain
the relative space and layout between them. It also makes it possible to
right click that group and save as a picture. Unfortunately this also can
result in those objects being converted to one combined image that is
usually a low resolution gif when you Publish to the Web and convert to
html. It also tends to kill any hyperlinks that may be in a text box, or
otherwise. This is probably why your navbar does not function on your home
page when viewed in FF. This also means that you may not be able to use the
autoshapes and overlay the navbar as you are.

I would first try ungrouping the autoshapes grid as you put it, from the
navbar and from each other. Publish to the web and see if your navbar
functions correctly in FF. You do not need to upload the files to test. Just
direct your web files to somewhere on your computer where you can find them
when you Publish to the Web. Then find the index.htm file, right click, and
choose to Open With FireFox. (alternatively you can open FF go to File >
Open File and browse to where the index.htm file is on your computer, or to
test the other .htm files contained in the index_files folder). If the
navbar links don't work, then you might try selecting them and going to
Arrange > Order > Bring to Front. Produce new html files and test again. If
the navbar links still don't work, then you will need to remove the
autoshapes. You might be able to use a simple text box the size of each
navbar with no text or fill in them, but with the hyperlink inserted by way
of a hotspot, which is found all the way on the left side of Publisher, is a
small icon that looks like a small ball or button with a dotted square
around it. After moving the text box over the navbar link, and sizing it
exactly the same size, or perhaps a bit smaller, bring it to the front of
the navbar, do not group it to the navbar, and test again. If this approach
also kills the link in the navbar, I am out of suggestions, and you may have
to live with the fact that the user will have to point at the text in the
navbar to use the link. This far less a problem than having a dysfunctional
navbar when you view your site in FF.

Now, back to perhaps what was your original issue. You indicated that there
were images on your home page and other pages that were blurry, had been
converted to gifs or simply did not load. Are you still having that problem?
Look first to whether you have that image grouped to some other design
element. If so ungroup it as when grouped it will frequently make a combined
image of the two elements, and specifically a low resolution gif.
Furthermore if you insert a jpg into a Publisher page, and then change the
size of that image box to anything other than the pictures normal full size,
then Publisher will tend to make a lower resolution gif copy of that image,
and serve up that image when you view the page in FF. However, if you run
the compress graphics feature, Publisher will resample and resize that image
to the new size, and the problem of getting a low resolution copy are
generally eliminated.

It is possible that something else is going on that is creating problems
only with your laptop, because as you said the issue only started a few
weeks ago. But at this point I would work through the issues and needed
fixes that I have identified thus far, as they need to be addressed anyway.
And they may also in some way be the reason for your issues with viewing
your sites with your laptop.

So, with that said, are you still having problems with the quality of your
images after moving everything off the Master Page, fixing the navbar,
ungrouping all images and running the compress graphics feature? If so,
please post a link to the page where the image is, and tell us specifically
which image(s) is giving you problems. When I look at your home page the
pictures appear ok to me in IE7. Hang in there, we will get there...

DavidF

 

[terryp]

Thanks again David,

I have removed all design elements from the master page.

I ungrouped the nav bar on the home page, deleted the grid overlay and
created hot spots for each nav button. All pages are now loading fully in
both ie7 and FF. The nav bar now works in FF too. Well done and thanks.

The images however are still grainy and I have noticed that it is not just
the images but also the text that is grainy too. As i mentioned before, this
only appears to be on my laptop.

The images are not grouped with other design elements.

I have resized jpg images but have also run the "compress graphics feature".

The images listed below are the images that are very grainy, however as I
mentioned earlier the text is displaying poorly too, and I suspect the other
images may be grainy but it's not as noticable.
1. Aluminium Gutter Supplies logo
2. Colortuff logo
3. All the product images in the product list.

Looking forward to your suggestions.

Terry

 

[DavidF]

Terryp,

Hey...making progress...good work!

The issue of the images being grainy can be explained, but the text is a
different story...especially as it is not grouped and being converted to an
image and is just happening on your laptop. So let me make a stab at that
first. Sometimes when you do not have an LCD screen set at its 'native'
resolution, you can end up with fuzzy images and text. I am wondering if
your text would look better if you changed the resolution on your laptop
back to where it was set when you got it. And even if you didn't reset the
resolution at some point of time, try dropping the resolution one or two
notches from where it is set. If it is at 1280, then drop it to 1152 or
whatever is the next size smaller for your laptop. Remember you can access
those controls via the display properties.

Here is another stab that you might try first. Open IE7 > Tools > Internet
Options > Advanced Tab. Scroll down to the Multimedia section and make sure
that 'Always use Clear Type for HTML' is selected. This can help make text
more crisp.

Now as to the images being grainy, I am guessing that what you see is the
difference in appearance of how those logos look on IE vs. how they look on
FF for me. They are grainy, lower resolution pictures than what I see on
IE7. To explain, first of all, the compress graphics feature does not change
any graphic that is less than 100 kb, which I am certain includes your
logos. Secondly because of the way the coding engine works and the built-in
VML, Publisher almost always produces a low resolution copy of clipart that
renders in FF poorly. Part of the reason is that many times a person inserts
a logo or piece of clipart that is at 72 dpi, but Publisher makes a 96 dpi
copy of that image for FF when you produce your web files, which results in
a grainy, low res image. Regardless of the reason why it does this there is
a fix...usually.

Open your publication, right click your logo > Save as a Picture and look
for the resolution option above the file name. Choose the Web (96 dpi)
option. Then try saving as a GIF, a PNG and maybe even a JPG. The GIF file
will be the smallest file size and will load the fastest. Insert these new
images into your page instead of the original logo image. Then be sure to
select that image > Format > Size tab and confirm that the scale is at 100%.
Now when you produce your web files, Publisher will use that image instead
of making a bad copy of it. Test to see which file format gives you the best
results. I would test in FF on one of your other computers to confirm what
will be seen by other people, but of course I hope that it also gives you a
better quality image on your laptop too.

You can also optimize these logos and other images in a third party image
editor if you prefer. Though it is a bit more work to optimize the images
before you insert them, I do it, because I prefer the results to what I get
when doing the Save as an image approach from Publisher, and from the
compress images approach on larger jpg images. I can also control the
compression and quality more directly that way and get the smallest file
size that still looks good, but also loads the fastest on my pages. There
are a number of free image editors out there. I use Adobe Photoshop Elements
but also http://www.irfanview.com/ which is a very good freebie. Just
remember to use 96 dpi and not 72 dpi and I find about 30% compression seems
to be a pretty good compromise between quality and file size...but you can
experiment.

And even if the first stabs at fixing the problems with your laptop work, I
would suggest that you go to the trouble of fixing these logos and your
product images for the general public who views your site in FF. You have
put a lot of work into your websites, and you may as well invest a bit more
work and get it as good as you can....and your logo is probably your most
important brand image...you want it as good as your company is ;-)

Hope that helps.

DavidF

 

[terryp]

David,

I went into multimedia and "Always use cleartype for HTML" was already
checked.

I changed the screen resolution down but this made no difference.

The grainyness only occurs when I view this site through ie7 and FF. When
viewing this site in publisher the images are good quality.

I saved the images as 96dpi gif images and confirmed that they are
displaying at 100%. Interestingly, as soon as I did this the images appeared
grainy in publisher as well as the two browsers. Is there a clue here?

Terry

 

[DavidF]

Terry,

OK, let's set aside the issue of your laptop for the moment...especially
since I am currently out of good ideas

However, in studying the code of the page you currently have posted at
http://www.aluminiumguttersupplies.com.au I see that your code is still
rendering two different versions of both your company logo and the Colortuff
logo. Here is the company logo image rendered in IE7 for me:
http://www.aluminiumguttersupplies.com.au/index_files/image591.jpg
Notice that it is a jpg file 1798 X 616 image at 96 pixels per inch. Where
as in FF a different image is rendered:
http://www.aluminiumguttersupplies.com.au/index_files/image5911.gif
It is a gif file 384 X 132 @ 72 ppi, and is of much lower quality than the
jpg.

A similar situation for the Colorstuff logo. Here is the image that is
rendered in IE7:
http://www.aluminiumguttersupplies.com.au/index_files/image541.jpg
Notice it is a jpg file 1257 X 520 @ 300 pixels per inch, and the version
seen in FF is:
http://www.aluminiumguttersupplies.com.au/index_files/image5411.gif
It is a gif 132 X 44 @ 72 ppi

This suggests to me that though you thought you compressed those pictures,
you did not. Publisher would not be making a low quality gif copy of the
original jpg if you had. So, select each logo and go to Format > Picture >
Picture tab and at the bottom see the Compress button. Click it and in the
Compress Pictures dialog make sure that Resample pictures is checked, and
the target output is web. And though you can Apply to all pictures, I think
that because of the default setting that does not automatically resample any
graphic smaller than 100 kb, it will not do the color stuff logo
automatically. I think you might have to compress or more specifically
resample each.

Now Publish to the Web and see if that makes any difference as to how it
looks on your local computer? And, so I can monitor your progress, do upload
the new web files to your host so I can see if the change helps in how it
looks for me on FF.

That is all I have time for this morning, so if you can compress those two
logos again, and upload the new files and let me know if it made any
difference on how they look on your laptop, we will take it from there. By
the way, I assume that you are keeping original copies of all these images
as we mess with them?

DavidF

 

[terryp]

David,
I selected the logo and then went to "Format" "picture" "picture tab" but
there is no compress button. I tried right clicking the image and got to the
same place but still no compress button.

 

[DavidF]

Terry,

My bad. I was looking at Pub 2007 when I gave you those directions, and
Compress pictures is built-in. I forgot that you were using Pub 2003 and
need to add the feature:

Reference: Compress graphics file sizes to create smaller Publisher Web
pages (2003):
http://office.microsoft.com/en-us/publisher/HA011266301033.aspx

You add it to the picture toolbar after installing the SP. And the compress
picture dialog does not give you as many options as it does in Pub 2007. The
option to resample pictures is not on the dialog, but it will resample
anyway. Perhaps before you do it, Publish to the web and direct all your
files to your desktop or somewhere else you can easily find them. Go into
the index_files folder and find the pictures we are talking about. Before
you compress the image, you should find two copies of the picture, and two
different sizes. Now compress the picture and republish to your desktop and
look at the image files again. This time you should find only one copy of
the picture, and the dimensions and the file size should be smaller.

And finally if you don't like the quality of the picture you get through the
compress pictures function, try resampling and optimizing the picture in
Irfanview or some other image editors before you insert it, as suggested.

DavidF

 

[terryp]

David,
I have changed all of the pictures to 96dpi gif images and there is now only
1 copy of each image, however the images are now poor quality on the other
computers as well as my laptop.
I downloaded Ifanview. Can you please explain how to resample and optimise
these images?

 

[terryp]

David,
Forget the previous post, I worked out how to do this.

I now have both web sites working in ie7 and in FF but my laptop is still
displaying high quality images poorly when viewing them through ie7 and FF. I
don't know if this is your area of expertise and if not would like to thank
you for getting me to this point.

 

[DavidF]

Terry,

Yes, your site looks good in both IE7 and FF3 on my computer, and the new
logos you created also are much better in FF. Good job.

Now, I must concede that as you said from the beginning there seems to be
something specific to your laptop that is resulting in your pages rendering
poorly. The fact that the pages look good to me and to you on the other
machines,
does indeed suggest the problem is specific to your laptop and not Publisher
websites. And as you suggested it might be tied into something that happened
several weeks ago.

Do you have the same problem with viewing websites other than your own? Does
this site look fuzzy on your laptop?
http://office.microsoft.com/en-us/publisher/CH100793371033.aspx

How about the pictures on this site?
http://www.beltonstud.com/

Do you have your laptop set for automatic updates, or did you install any
new software on or about the time this started to happen?

If this issue is non Publisher websites specific, then yes, it might be
beyond me, but perhaps someone else reading this thread might be able to
provide some insight.

DavidF