Publisher to Firefox

[RE361]

Good day. I created a website with Publisher that looks great on IE. When
viewing in Firefox or other browser the images (including text items that are
PNG overlays) are pixelated and lower resolution.

www.realestate361.com

Thanks VERY much.

Kevin

 

[DavidF]

You have at least a couple things happening...

Assuming that you are using Pub 2003, when you insert a jpg and then resize
the image by reducing the size of the image box, and add a 'fancy' border
around that image, you will get the results you did. For example here is the
image that you see when you view your image in IE:
http://www.realestate361.com/index_files/image353.jpg It is 'resized' on the
fly to fit within the image box size you specified. And here is the image
that Publisher produces for FireFox and other non-IE browsers:
http://www.realestate361.com/index_files/image3531.gif Notice that the
'fancy' border has been added to the image and you ended up with a low
resolution gif.

To fix this you need to do two things. One, either resize your image in a
third party image editor to the exact size you want to use in your
publication, or compress the image prior to converting to html. The second
option will be faster:

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

Reference: Compress Pictures dialog box (2007):
http://office.microsoft.com/en-us/help/HA100363901033.aspx?pid=CL100605171033

By 'compressing' the image, you have resampled the image to 96 dpi and
resized the image to the dimensions of the picture box. The next step is to
remove the fancy border from the image. Create a new text box the same size
as the picture box, add the fancy border to the text box, layer on top of
the image box, and then Arrange > Order > send to the back...or bring to the
front. In some cases it is better to send to back, and in some cases bring
to front...you will have to test. The point is, you need to layer the border
element on top of, or behind the image and don't add it to the image in
order to get your desired look, and not end up with the low quality gif.
Or....and I don't want to confuse you, but if you can live with a single
line border, Publisher will not choke on that...compress the image and you
won't end up with the bad gif.

As per the PNG...same issue. When you insert an oversized image Publisher
will make a low quality copy of that image, typically a gif file, to render
in FF. Here is your PNG:
http://www.realestate361.com/index_files/image468.png
and here is the GIF: http://www.realestate361.com/index_files/image4681.gif
.. The solution is once again to either resize and optimize your image before
you insert it, or to "compress" it before you produce your web files.

And finally, be sure to 'ungroup' any design elements that you might have
grouped together before producing your html files. Grouped elements will
also be converted to a low quality gif for FF, and will not render at all in
IE8.

If you have other cross browser issues or follow up questions, please post
in the web design group and we will try to help you there.

news://msnews.microsoft.com/microsoft.public.publisher.webdesign
or
http://www.microsoft.com/office/com...soft.public.publisher.webdesign&lang=en&cr=US

DavidF

 

[RE361]

David, thank you for the excellent reply. I was able to get cleaner versions
of the JPEG images but the PNG's, even scaled to the proper size in Office
Picture Manager are coming out with the same problem.

Any suggestions?

Thanks again for the excellent explanation.

 

[RE361]

I should have also mentioned that I have tried the "Compress Pictures" option
on the toolbar on the PNG's.

Thanks.

 

[DavidF]

You made some progress but didn't make all the changes I suggested. For
example here is an image one your home page in FF:
http://www.realestate361.com/index_files/image3531.gif
You need to remove the border art from the image and add it to a second text
box and layer the two, or Publisher will continue to make a bad gif image of
the image and the border.

Also, though I would normally not suggest this, try going to tools > options

web tab and select the option to "Allow PNGs...". At this point you have

no PNGs being rendered in FF, and if you can get a PNG version of this
image, then I would guess that it will be superior to the poor quality GIF
image you are getting:
http://www.realestate361.com/index_files/image4681.gif

Please repost your question in the web design group and we will pursue it
there. Be sure to provide a link to your site, Pub version, and specifics as
to what is not working. Which PNGs? etc.

DavidF

 

[RE361]

Ah-ha! Bingo. The allow PNG selection in the Options tabs looks like it
will do the trick. I had not uploaded your other suggestions to the actual
pages, just some hidden spots to do some tests. Your suggestions on the
border etc. were right on. I'll get to work and hop on all of the changes.

Many, many, many thanks!

 

[RE361]

I have the updated "PNG" versions online and they look great on Firefox. I
will post this in the web design group, but one last question, please. I
selected a gradient background that works fine in IE but is not showing
properly on Firefox. Any last suggestions are much appreciated.

Thanks again!

 

[DavidF]

Some print formatting just won't convert well, if at all to html, or be 100%
cross browser compatible. Sometimes there are workarounds such as what I
suggested for using border art, and sometimes you just need to change your
design or formatting. Publisher tends to have problems with gradients
whether it be print or web publications. From my experiments, single color
gradients are less likely to cause problems than two color. You may simply
have to go to a solid color rather than a gradient...sorry.

Glad the rest of it worked out for you. Once again, join us in the web
design group with additional questions, as too many of them in this group
can irritate some people ;-).

DavidF