cross browser question

[deech]

Hi David,

this letter is in regard to the question below which I posted in the wrong
section. I have now downloaded Firefox and checked out my site.
www.anovelmillion.com

I am ready for any suggestions you might have. The issues appear to be:

-bottom links not working
-formatting in "buy words" page
-formatting in FAQ (under each question title, text has no space)
-FAQ- links (back to top) not working
-title page- A novel Million in text box looks funny (transparency effect is
odd)

Apart from that, I reckon it's not too bad. I'm a little dissapointed
though, that it might have turned some people away who have visited my site
(30% of 8000 hits)....I hope if it did that they return. I didn't realize
that I could just download firefox so easily.....should I also be downloading
other browsers and checking (any suggestions?). According to my web stats,
23% of people are using "unknown ?" browser, 10% using safari, and 1% each
Netscape, Mozilla, and Opera.

Thanks Deech


deech,

Pub 2003 does have limited cross browser support, but in your case you can
work around it. First of all, I would suggest that you download and install
FireFox so you can test your site. Don't wait until someone tells you it
doesn't work. If you are going to take the time to build a site, you should
take the time to test it.
http://www.mozilla.com/firefox/releases/1.5.0.4.html

You will note that after you get past your index.htm page, you have included
both a navbar at the top and the bottom of the page. The top navbar works
just fine, while the one at the bottom has been converted to an image, and
killed the links. There is a workaround.

The formatting on your Buy Words page is off in Firefox. There is a
workaround.

If you are interested in fixing your site, then please repost in the
webdesign group: microsoft.public.publisher.webdesign, and I'll help
you....but download and install FireFox first, because you will need to test
the fixes.

And in the meantime, you might want to read: "Are You Cross Browser
Compatible? by Matt Benya":
http://msmvps.com/blogs/dbartosik/articles/80825.aspx

DavidF

 

[DavidF]

Deech,

Publisher 2003 produces code that is supposed to take advantage of certain
features in IE, and different code for other browsers. Some things that work
in IE will not work in Firefox and other browsers, and thus the limited
cross browser support. You must remember that Publisher is a DTP first and
foremost, and it is never going to be as good of tool as FrontPage or some
other such application that is specifically designed for web design.
Publisher is intended for fairly small, simple static websites, and makes it
fairly easy to produce a site, but does have its limitations and trade offs
for the ease of use. When you choose to use Publisher, you learn to live
with the limitations or find workarounds. Sometimes this means changing your
design or other ways of doing what you want. Sometimes this means moving to
FrontPage or some other program.

First, back up your original Publisher file, so that as you try to fix
things you don't loose what works right.

Bottom links not working in FireFox:

Once you get beyond your "splash" or introduction page, your index.htm page,
you use both a top and bottom navbar. You will notice that your top navbar
works, but the bottom doesn't. I don't know why this happens, but there is a
workaround. You need give up on the navbar wizard to create the bottom
textual navbar and build your own textual navbar. You will use the "insert
HTML code fragment" feature to insert your new navbar. Read the following
article: "Code your own textual navigation menu in Publisher":
http://msmvps.com/blogs/dbartosik/archive/2006/01/16/81255.aspx
This will describe the process.

Note that you will need to write absolute links to your pages. As you are
using the index.htm page as a "splash" or intro page rather than your "home"
page, and apparently not using "organize supporting files in a folder"
option, your home page code would be:

<a href="http://www.anovelmillion.com/index_home.htm">Home</a> |

If you use the supporting folder, then it could be:

<a href="http://www.anovelmillion.com/index_files/index_home.htm">Home</a> |

Once your have written all your links, I would suggest that you insert the
code fragment box, move it to your existing navbar, and resize the code
fragment box by dragging the edges of the box and allowing it to "snap to"
the edges of the existing navbar. After you get your new textual navbar
working, you will delete each of your old navbars, and copy and paste the
code fragment box with the new navbar on each page.

But first "Publish to the Web" to a test folder on your hard drive where you
can easily find it. Now you can open your site in either IE or FireFox and
it gives you the opportunity to study the files that are generated when you
Publish to the Web. In FireFox go to File > Open File and browse to that
folder, and open the index.htm file. If you hover your mouse over each link
in your new navbar you can see where it will go in the status bar. Make sure
the new navbar works correctly on the first page before you copy and paste
it to the other pages, and delete the old navbar. When you make future
changes to your Publisher doc, just republish to that test folder, and then
after you are satisfied with all the changes, then republish your site. I
usually delete all the html files and subfolder from my site before I
republish to make sure there aren't any conflicts with the old site files.

Buy Words page formatting:

I am not sure what you are talking about here, as the page renders pretty
much the same in both browsers for me. Please explain in more detail what
you don't like. In general, you need to remember that what works in a print
document, won't always work on a web page. What works in IE doesn't always
work in other browsers. Publisher doesn't know how to convert everything
into html code that will work with IE, let alone all browsers. If you read
the other article I referenced, you will realize that producing code that
works in all browsers, all the time, is hard even with the best software.

For example, you cannot put a fill color into your new textual navbar...it
will convert the whole thing to an image and kill the links. Also, you will
find that wrapping images, tabs, columns, bulleted lists, indents and
several other print doc formatting techniques won't work the same in HTML.
This means that when any formatting is "off" you need to tweak and change
your design, and test to find out what works, and what doesn't. Trial and
terror...or the fun of web building....depends on how you look at it. Don't
forget to use the Design Checker tool in Publisher. It will show you some of
those things.

I knew this was likely to be a long winded answer to you, and that is part
of the reason I suggested that you repost in this newsgroup. I also must
stop now to do some other stuff...like getting ready for my real job, so I
will be back with more comments later, but this should get you started. Let
me know if you get the textual navbar working.

DavidF

 

[DavidF]

deech,

I have some more time...

In regards to the formatting on the buy words page, you can change the
Styles and Formatting. One thing you are doing that appears to show up in
both IE and Firefox, is you are doing an extra Return after each paragraph.
The Formatting you are using automatically gives extra space between the
paragraphs with one Return. Try just one Return after you finish a paragraph
and see if that gives you what you want.

FAQ formatting:

Probably the same issue as above. Go to Format > Styles and Formatting and
experiment. For example, select all the text in a text box, and choose Clear
Formatting. Then you will see "normal" spacing behavior, including the use
of Return.

In general you should avoid almost all paragraph formatting and stick to
font, font size and color. As you include special formatting, you can end up
with surprises. Once again experiment.

FAQ back to top links:

Actually they do work, but you have to hover your mouse a little over the
link. Once again, I think this is because of the formatting, and may be
resolved when you Clear Formatting. However, you can make it a little easier
for viewers to know when they are on the link. Try inserting the following
code snippet on a page, preview your site, and mouseover your links:

<style>
a:hover {color: #930015; font-weight: normal;}
</style>

To read more about this reference: "Replace underlined hyperlinks in your
Publisher web with non underlined hyperlinks":
http://msmvps.com/blogs/dbartosik/archive/2006/01/12/81269.aspx
and read to the bottom of the article.

Title page:

Here is a time where you simply will need to come up with a different
design. Perhaps move the title off the image, to the top in a redesigned
banner? By overlapping the text box and the image, you are going to get
strange results. When you add the textual navbar you will build, you will
probably need to redesign the page anyway.

And while I am at it, I would suggest that you change Click Picture to Enter
Here or Click Picture to Enter if you don't want to hyperlink the text.
Color me paranoid, but I don't click when I am told to unless I know where
it will go. Enter Here is a more universal message when I see a "splash
page", and I would be less reluctant.

Other comments:

The image you use on your index.htm page, though interesting and creative is
pretty large and takes quite a while to download on a dial-up connection,
and you are going to loose some impatient people. I would reduce, resample
and optimize it for the web in a third party image editor before inserting
it, so it will load quickly. If you don't want to do that then I would
compress it and all the other images you have on the site. Reference:
"Compress graphics file sizes to create smaller Publisher Web pages":
http://office.microsoft.com/en-us/assistance/HA011266301033.aspx

Before you republish, go to tools > options > web tab and untick "rely on
vml..." and "allow png...", and you will be smaller, faster loading pages.

That's all I have for you, other than to say that some people will put a
warning on their site that it is best viewed in IE. This won't exactly
endear you to those who use FireFox, but at least it will explain it. I
think that if you experiment now that you have FireFox, you should be able
to workaround most of the cross browser issues. If not, post back and we'll
try to help.

DavidF

 

[deech]

David that is awesome!

Thanks for such long and detailed responses. It is really great to be able
to get this advice from here.

You have now given me a lot of stuff to try out, so I will get to it, and
update you on how it all goes.

Thanks Deech

 

[deech]

Hi David,

just an little update. I have done just about everything I think I need to
for Firefox. Thankyou very much for your help. Tonight will also check out
the site on a few other browsers to see if it works there.

Thanks again, it's a big help.

Cheers Deech

 

[DavidF]

You are welcome...

DavidF

Hi David,

just an little update. I have done just about everything I think I need to
for Firefox. Thankyou very much for your help. Tonight will also check out
the site on a few other browsers to see if it works there.

Thanks again, it's a big help.

Cheers Deech

 

[deech]

HiDavid,

OK, I've finally gotten around to checking it out on the browsers and also
trying a few things out.

Firstly, I am quite happy about how the site is now, however there is 1
particular point that is not quite right. In the FAQ, #4 and #7, I have tried
to replicate a Word "borders and shading effect". When I tried to do this in
"Edit story in MS Word", it did not retain the shading when converted back to
Publisher. So the way it has been done is to create text boxes, fill them
with color and place them behind the text.

I cannot just make the text box that the text is writen in a filled with
color, because there are certain lines which need 2 diff. colors on them, and
it is quite difficult to align the text boxes and text on those lines. Hence
I just wrote the passages, and made "background" coloured text boxes. I am
not sure if this is the best way to do it, and it took a lot of fiddling and
checking with webpage preview to get it correct.

These boxes don't match up in certain browsers like they do in IE
(especially Opera). I am wondering if there is a way to get around this, or
do it better.
Perhaps I should try to colour the text boxes the text is written in again,
and just spend a bit of time in the webpage preview to make sure they get
aligned propely?

Thanks Deech

 

[DavidF]

Sounds like you are developing the right attitude about web design. If one
method or design technique doesn't work, then get creative and try something
else.

One of the ongoing limitations to your current approach will be the viewers
preferred text size. Open http://www.anovelmillion.com/index_FAQ.htm in
FireFox, and go to View > Text Size and increase it one tick, and look at #4
and #7 again. Notice the filled text boxes behind the text does not increase
in size as did the text. You have no control over what text size the user
chooses, so you need to come up with an alternative that factors that into
your design.

Perhaps, instead of using the filled text boxes, you could change the color
of the font...and consider using bold font, instead of normal? Or perhaps
place each new group of words in a new text box that you can fill with a
color from within Publisher? Right click your text box, Format Text Box,
Colors and Lines tab, and change the Fill color.

DavidF

 

[deech]

Cool, I'll try out that stuff tonight when I get home.

Deech

PS. If Microsoft feels like they want to get some extra exposure in NZ and
help build their business, it looks as though there will be an article in a
leading NZ paper about my site next week. So they could always buy words and
advertise their product to a few people who might not have heard of them

 

[deech]

Done!!!!

After a lot of fiddling around, I have now got the text boxes filled with
color, and the text written in the same text boxes. It looks fine in all
browsers with nomal font size. If font is changed, things get messed up, but
this happens to everything, not just the colored text boxes, so I'm not
worried about it , and hope most people look in default text size.

Thanks to everyone, sepecially David.

Deech

 

[DavidF]

Thanks for posting back and good luck in your project. If it takes off, you
owe me a consulting fee ;-)

DavidF

 

[deech]

Yep, 1 million is a lot of money for someone like me, and I am a generous
guy....consulting fee definitely a possibility!

 

[Mary Sauer]

And since I taught David everything he knows, I expect a generous cut...

 

[DavidF]

};>) You, David Bartosik and a lot of trial and terror...

DavidF