Firefox Compatibility, Pub2007

[Warden]

Website created on Pub2007 works fine on IE7, but on Firefox after a few
seconds I get a dialogue box headed "Authentication Required" and asking for
user name and password for ftp://alal.co.uk. (My web address is
http://www.alal.co.uk.) I have to cancel the box a few times to get rid of
it, then I find I've lost contact with the host and can't change pages.
Connection remains broken even if Firefox is closed down and re-started.
Web host says it's a compatibility issue between Publisher and Firefox.
Any ideas?

 

[Rob Giordano [MS MVP]]

worse than that methinks.
getting permission errors with Chrome too...maybe published incorrectly or
file folder permissions are wacked.



--
~~~~~~~~~~~~~~~~~~
Rob Giordano
Microsoft MVP Expression

 

[DavidF]

This usually is caused by having pictures and other design elements on the
Master Page. Go to View > Master Page and if you are putting anything there,
drag those elements off into the scratch area, switch back to the main page
and drag the elements onto that page. It is unfortunate but the Master Page
feature works fine in a print publication but does not work consistently in
a web publication and you should not use it.

DavidF

 

[Eric James]

This problem is nothing to do with master pages - it has been caused by the
manner in which Publisher has built the pages. It has inserted references to
images on your web site ftp server, which is why the browser is asking for
login credentials. This is probably because the web site has been
'published' directly to an ftp site from within publisher. That will cause
problems. Try publishing the site to a local directory on your hard disc,
and then upload the page(s) and the index_files subdirectory to your web
host using an ftp client program such as CoreFTP.
Things appear to work better in IE because in IE the problematical image
file (the decorative side bars) isn't being used - the graphic is being
dynamically generated by embedded VML code.
There is another problem with your pages which I noticed - Publisher has
seduced you into using fonts which are not available in browsers other than
IE running on windows - particularly on the navigation tabs which
consequently look a bit ropey in anything but IE, but maybe elsewhere also.
To avoid issues like these and many others, it's a good idea to use
something other than Publisher to make web pages, as it is really intended
for generating printed material, and doesn't support browsers other than
Microsoft's very well. Try Xara Webstyle, Serif Webplus or Netobjects Fusion
which are all fairly easy to use. An older version of Serif's program is
available free here: www.freeserifsoftware.com/

 

[Warden]

Thank you, DavidF, you hit the nail on the head! I had used the master page
as I normally do with any publication. When I dragged copies onto the
individual pages and re-uploaded, I no longer had the authentication request
on Firefox. I never would have guessed that fix! In case others think it was
a coincidence, I uploaded several times yesterday with stuff on the master
page, and the authentication request appeared every time.

 

[Warden]

Thank you for your comprehensive reply, and especially for your comments on
our site. On the ftp authentication request, please see my reply to DavidF
earlier. I take your point about the fonts, although the poor quality of some
of the graphics reproduced on Firefox is more of a concern at the moment.
I'll have a look at the alternative applications you suggest.

 

[Eric James]

Good to hear you fixed the main problem anyway.
You can use master pages if you wish with a bit of care to make sure that
the embedded image paths end up being correct.
You could also have fixed your earlier versions by editing the html files a
little to correct the paths - obviously it's a trade off between the pain of
doing whatever is required or not using master pages in this instance.

As far as the different look of graphics in IE & Firefox goes - this is in
part another fundamental limitation of Publisher. In IE, graphics can be
quite well done by the VML rendering engine, but in all other browsers this
has to be achieved by substituting image files. For some reason, Microsoft
chose to use GIF format files for doing this, which are limited to a 256
colour palette. It is possible to get very bizarre effects with multiple gif
images using different palettes, but things such as gradients, which you
have down each side of your page, will often show a stepped banding effect
if in a gif image.
Getting web pages to look identical in all browsers can however be quite
difficult at the best of times, and it is impossible if using newer versions
of Publisher.
Also be aware that there are fairly serious compatibility problems with
Publisher and Internet Explorer 8. Microsoft have announced that an update
for the office suite to be released within days will address these - it will
almost certainly be essential to obtain that a.s.a.p.

 

[DavidF]

Warden,

You are welcome.

While it certainly your choice to use Publisher or another program to build
your site, be advised that the other person that answered your question is
our resident troll. Unfortunately his primary mission here is to not help
people, it is to convince people to not use Publisher to build websites, and
sometimes attack those of us that help people here. Even more unfortunately
he does have some knowledge and can appear credible, but obviously he does
not understand how to use Publisher correctly, as you can tell by his answer
about what was causing the ftp issue. You probably know the type...just
enough knowledge to be dangerous <g>. Much of the rest of what he had to say
is also inaccurate, and certainly his suggestion that you need to use a
different program. If you want to stay with Publisher we will be able to
help you work through all the other issues you might have with your site.
Your choice.

I noticed that you are concerned about some of the poor quality images that
are rendered in FireFox. While you weren't specific I can see that your
'banner' area image needs some tweaking. If you were to look in your
'index_files' folder in thumbnail view on your local computer, you would see
this image: http://www.alal.co.uk/index_files/image468.gif As you can see
all the elements you have used in your 'banner' have been converted to one
combined, low quality .gif image. This is usually caused by 'grouping'
different elements together. When you do that Publisher makes a combined
image of all the elements that are grouped together and serves up that image
in FF.

Assuming that is the problem, the fix is probably as simple as ungrouping
the elements from each other. Chances are when you click on any of those
design elements, you will see a grouping icon at the bottom which looks like
a couple boxes overlapping each other. Just click that icon and this
ungroups the elements from each other. If you don't recognize the grouping
icon, you can also go to Arrange > Ungroup. While grouping elements together
so that you can drag them around while you are designing and laying out your
pages is a handy tool, be sure to ungroup them before you publish your web
files.

Now to test this, rather than take the time to upload new web files, when
you 'Publish to the Web' direct your index.htm file and the index_files
folder to somewhere on your computer where you can easily find them. I
direct them to a test folder I keep on my desktop for this purpose. After
publishing new files, go to the 'index.htm' file (your home page) or the
other *.htm files (your other pages) in the 'index_files' folder, right
click > Open with > FireFox. This way you can preview what your pages will
look like in FF before you upload. You can also just open FF > File > Open
File and browse to where you directed your .htm files on your computer if
you prefer.

Now to the follow up on the comments in the second post by our favorite
troll about how Publisher handles images, his answer and information is
again inaccurate and misleading and again demonstrates his ignorance of
how Publisher works. I will explain with a specific example. On your home
page you have this image: http://www.alal.co.uk/index_files/image332.jpg . I
suspect that after you inserted your original .jpg image you resized the
picture box to get the size and proportion you wanted on your web page. I
also suspect that you then used the 'compress pictures' tool on that image
because it has been 'resampled' from the original size and resolution to a
384 X 256 pixel image at 96 dpi. This is exactly the correct thing to do
with Publisher. Now if you had inserted a large, high resolution image and
changed the size of the picture box, and not used the 'compress
pictures' tool Publisher would have made either a low resolution .gif image
copy of that .jpg or possibly a resized jpg for FF and other non-IE
browsers, and also made a copy of the original jpg for IE. Unfortunately
that original high resolution image would take a long time to load in IE and
if Publisher made a .gif copy for FF it would be low quality. You can test
and confirm this for yourself. Try this experiment.

Open a blank Publisher web page. Insert either your original high
resolution/large .jpg image that we talked about above or another high
resolution image. Now resize the picture box to less than the original size
of that image. Then without using the 'compress pictures' tool, Publish to
the web and direct your output to that test folder on your desktop. Open the
index_files folder and look at the contents in thumbnail view (View >
Thumbnails). You will see at least two copies of the image that you just
inserted. It may be two jpg images or a jpg and a gif. Now switch to Details
view, and if you have the Size showing, notice the difference in file
size...or if you don't have the size showing in Details view you can also
just right click the thumbnail > properties and it will show you the
difference in file size. In fact if you compare the file size of the larger
one, you will notice that it is the same file size as your original
image...it is simply a copy of that original.

Now, go back to the Pub file > Select the image > and find the 'compress
pictures' button on the Picture Toolbar and click. On the dialog that comes
up choose 'Web' under 'Target Output'. Now Publish to the Web again and
again go to the index_files folder. Now you will see only one copy of your
image, and that copy will have been resampled and compressed, and it will be
the image that is rendered in IE and in FF and other browsers. If you open
that copy in a graphics editor such as Photoshop, Photoshop Elements or
Irfanview which is a good freebie, you will also see that the picture is now
96dpi. As I said, our resident troll has just enough knowledge to be
dangerous as he is misleading people.

As per his comments about using the Master Page feature in Publisher, once
again I would suggest you ignore him as once again he demonstrates that not
only does he not understand how Publisher works, but he is dogmatic about
his views even when he is wrong and in spite of when given evidence to the
contrary. Besides one of the biggest advantages of using Publisher is that
you should never need to look at or directly edit the HTML coding in a
Publisher web. You change your pages by changing your design, layout or
formatting in the original Pub file and when you Publish to the web, the
Publisher html coding engine handles all the coding in the background just
as you did by properly moving the design elements off the Master Page. Much
easier than learning how to write and edit code...

Now, as per the fonts. I notice that you are using 'Cambria'. This is not a
'web safe font' which are fonts that most people have on their computers.
Select any of your text boxes > Format > Fonts. In that Font dialog notice
the option box 'Show only Web Fonts'. Check that box and now you will see a
list of the fonts that you can safely use on the web. If you choose to use a
non-web safe font frequently what will happen is that Publisher will convert
that text into an image, which as a rule you would not want to do. Text that
has been converted to an image cannot be read by the search engine webbots
when they index your site, or by text readers. One exception to this rule in
my opinion would be if you were using a specialty font in a logo, a banner
or some other design element where the design is more important than the
text. In that case you could add an Alt tag to the image, and that would be
read and indexed by the search engines and read by the text readers. So,
while I did not search out where you were using Cambria, you should consider
changing the font. Oh, and by the way...it would probably not matter what
program you used to produce your site. If you use a non-web font and the
viewer does not have that font installed on their computer, then the browser
will usually substitute in what it thinks is a suitable replacement, and
your design will still not be as you intended. Best to use web fonts in a
web page, but if you are using it in a logo, etc. post back and I will
explain how best to use it in that capacity.

Now, as to the text on your navbar buttons. The reason that text is 'fuzzy'
is again because it has been converted to an image for FF. Each button on
your navbar is made up of several design elements. Usually it is a
background image, a text box and a 'hotspot link' box. All those elements
are grouped together and you can again select the navbar > Arrange > Ungroup
and that will fix the text. However, before you do this you should know that
it will also 'disengage' the navbar from the Publisher navbar wizard. This
means that if you decide to add another page then a new navbar button will
not be added and propagated throughout your site. In that case you would
need to rebuild your navbar, but that would not be that difficult with as
few pages as you have. However, you might want to wait a few weeks until the
new Office 2007 SP2 is released, as it sounds like it is going to fix some
things, and one of them is likely to be this navbar issue. I can elaborate
on that if you want, but it is a longer discussion, that you can read in my
reply to the post " Re: Buttons disapear on my web page with IE" by
bradedwards17 the 17th . The short explanation is that it *sounds like* the
SP2 will fix the navbar issue and may even fix the 'grouping' issue that you
are currently having with your banner.

Reference: Navigation bars and other content is missing from Publisher HTML
output in Internet Explorer 8: http://support.microsoft.com/kb/969705

Once again our resident troll misleads and tries to scare people by
suggesting that there are major problems with Publisher webs being
compatible with IE8. The only compatibility issue reported thus far is this
'grouping' issue and it is easily fixed by ungrouping.

I will stop now, but if you have other questions please post back. Once
again, there is absolutely no need to switch to a different program if you
don't want to. Obviously if you just tweak a couple things with your design
and formatting, your site will look good in both IE and FF, and as a result
will also look good in all the major browsers. Also be ready for a follow up
to my post by our troll. He will find some term I used or something that I
didn't explain exactly right, bring up some other totally irrelevant or
spurious argument against using Publisher...or he will resort to a personal
attack or name calling, because the reality is there is no logical, rational
reason to not use Publisher to build your site. But as I said, it is your
choice...good luck.

DavidF

 

[Eric James]

I don't think I need to comment any further on the technicalities of the
issues raised here, but from this short exchange alone you will I hope have
gained some impression of the depth of limitations, difficulties, hidden
problems, unavoidable compromises and pain in store for the Publisher user
in making web pages. Most of this will not be immediately apparent to the
uninitiated and some will only emerge months or years later, but can
nonetheless be foreseen. It's supposed to be easy.

As for this newsgroup, it is obvious there are motives not consistent with
the best interests of the reader at work here, but it really isn't the place
to find a balanced discussion, or even to glean much useful information, on
general techniques for making good web pages or the pros and cons of page
editing tools.

 

[Eric James]

Sorry folks but it turns out I do need to comment on this again, as I'd
guess that some readers of Davids post may now be even more confused than
before. It turns out that the problem David has seen and which others may
not, is in fact yet another bug/deficiency of Publisher, call it what you
will, but David doesn't seem to have realised that.
If you insert a picture into a web document using the insert->picture option
from the top menu, which I personally never do as the picture will usually
come in at nowhere near the required size and in the wrong place, you will
suffer the incorrect operation of the program roughly as he describes. If
however, you do it by clicking on the picture frame tool in the toolbox and
drawing the box first, it then works as would be expected, and there is no
need to go near the 'compress pictures' button. Slightly ironic really, as
David is always banging on about using the program 'correctly'.

 

[Eric James]

And while I'm here David, I see you still don't understand what 'dpi' means.
Try this experiment, in thought if not actually in practice:

Put a picture, your 384 X 256 pixel one for the sake of example, on your
computer screen somehow. It doesn't matter how.
For the sake of simplicity, we'll equate pixels with dots. Now - what is the
dpi value of the picture you are looking at? (Clue - all you will need is a
ruler, with inches on it, to work this out. Don't worry about the actual
dots/pixels on your screen - they are irrelevant here as its only the
picture we are interested in)
....just in case you're struggling with this one, the answer should be equal
to the width of the picture, in inches, divided by 384 (or the width in
pixels of the picture you've used, if different to 384). Just to make it
interesting, the height of the height of the picture divided by 256 will
also do but will probably give a different answer... I'll leave you to think
about that one for homework.
Now - repeat the procedure on a different sized monitor, or change your
display settings to set the screen to a different resolution.
Compare your two sets of results - you will find they are different. How can
this be, when the picture hasn't changed?

You can do the same thing by printing the same picture at different sizes on
a piece of paper - the crucial point being that the dpi value is a property
of the output or presentation device, not the picture itself, as it requires
a specific physical size as a frame of reference. A dpi value may be used
within a dtp program however, to calculate a suitable size for a picture (in
pixels) in order to get acceptable quality on a specific output device. This
is probably the root of all confusion.

(answer to the homework question - the pixel resolution of your screen may
not be the same in both horizontal and vertical directions)

I don't suppose it will help....

 

[Eric James]

Astute readers may have noticed that I put the sums the wrong way up in this
giving inches per dot... duh.
You should of course divide the pixels/dots by the inches to get dots per
inch, sorry.
And there was a spurious "height of the" clause. Typing is not my strong
point.

 

[DavidF]

Sigh...

This is a PS to Warden or anybody else that happens upon this thread. I am
sorry Warden that you have been sucked into this nonsense. Just do the
experiment I suggested and you will see how Publisher 2007 works for
yourself. Also here are some MSFT references for you that I should have
included the first time:

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 the way...dpi and ppi are frequently used interchangeably, and the
difference does not change the facts as I explained them. Our troll is just
trying to muddy the waters...

DavidF

 

[Warden]

Hello again DavidF or anyone else who can help ...
To avoid the poor definition in my banner area and to get the font always
rendered correctly, I scanned in my letterhead and used the resulting cropped
picture instead of the made-up version that's currently live. This approach
should also prevent the underlines being in the wrong place on some browsers.
However on checking the result with IE, FF and Safari, I found with FF &
Safari that the text was jagged and the underlines sort of dotted. As I had
slightly reduced the size of the image, I tried compressing it on one page
while leaving it on another, but there was no difference in the results. On
checking the files in the test folder I had used, I found only one new banner
(not a compressed and an uncompressed) - this may be because Publisher had
only "uploaded" the image once. The file is rendered as a JPEG image of
197kB, much larger than the 1.04kB GIF file currently live.
Any suggestions for improving the image on FF and Safari?
Warden

 

[DavidF]

Warden,

I don't see any major problem with your banner area anymore. Before you
apparently had all the banner elements grouped together and as a result
Publisher combined them into one low quality .gif image:
http://www.alal.co.uk/index_files/image468.gif
However, now when you go to your home page the banner area looks fine in
both IE and FF and is broken up into different components: The logo:
http://www.alal.co.uk/index_files/image321.jpg , The background picture:
http://www.alal.co.uk/index_files/image328.jpg and the text is still text,
as you can left click and drag to select it. The only slight difference I
see is the text renders a bit different in FF than in IE, but unless you
look carefully you would hardly notice. That may be because you have it in
italics, or it may be that you are using a non web font. If that font is
supposed to be 'Cambria' then that might explain the slight variation. In
that case, change the font to a web font. But as I said, I don't see a
problem with your 'banner' on your home page in IE or FF.

DavidF

 

[Warden]

DavidF,
I've been checking the new banner by publishing it to a test folder, so it
isn't uploaded yet. Another reason why I thought of using my scanned-in
letterhead is that it accurately renders my house font, which isn't web-safe.
Obviously I've had to ditch house font for bulk text and headings, but I
thought it would be good at least to use it for the banner.
Another question is to do with my logo, in which the burgundy areas come out
blotchy on all browsers, even though they look perfectly flat on Publisher.
Is this to do with using web-safe colours? If so, how can any colour image be
rendered accurately? Yet the pictures seem to be rendered with accurate
colours.
Thank you,
Warden

 

[DavidF]

Warden,

I am not sure there is still a question in the first part of your comments
or not. However I will say that I personally would give up on using your
"house font" on your website if it means converting it to an image. Yes, in
my long response after your original post I did discuss how sometimes having
a small amount of text converted into an image in a banner image might not
be a bad thing, but I personally would rather have the search engine webbots
reading the company name and slogan. I think that perhaps you need to
remember that this is a different medium than print, and needing to use a
slightly different font than the house font in order to use the medium
effectively, is a worthwhile tradeoff. In other words, I would leave it the
way it is.

Now as per the logo, that is a different story. There you just about have to
convert the text into an image. Personally I don't find the slight
blotchyness of the image noticeable, but after you point it out I can see
it. That blotchyness is probably caused by the compression used on the
image. To get a better quality image you will have to experiment.

Check the inserted logo image on your Publisher page to confirm it is at
100% scale. Select it > right click > format picture > Size tab and confirm
or change the Scale to 100% height and width.

Or...try right clicking the original logo image on your Publisher page >
Save as a Picture. Under Save as type choose PNG instead of JPG. Under
Resolution click change and choose Web (96) instead of standard 150 or high
quality. Go back to your first page and click the original logo > right
click > change picture > from file and browse to your new PNG version of the
image. After inserting the new PNG > right click > format picture > Size tab
and confirm or change the Scale to 100% height and width. Now test and see
if you like the quality of the png version better than the current jpg
version. I frequently find the PNG is a bit better quality for logos,
clipart, wordart etc., though the file size is a bit larger. You could also
try saving the original logo as a gif and a jpg and insert those images, and
confirming the size at 100%. Chances are the PNG is going to give you the
best quality.

If using Publisher to produce a version of your logo doesn't give you the
results you want, then the next choice is to use a third party image editing
program to optimize and produce your logo and any other images at a less
compression than Publisher uses, and inserting those images. Just be sure to
output the images at exactly the size you want to use in Publisher at 96
ppi, and then insert and scale at 100%. But once again, I am not sure anyone
but you are ever going to notice the slight blotchyness of the logo, and all
this might be more work than necessary.

Good luck.

DavidF