Christopher A. Cali

Christopher,

>: right now focusing on Opera 6 

You can pretty much ignore Opera 6. Opera 8+ is the current release. Opera
6 is still in use on a few phones (where your page style is not really
relevant anyway) and Mac OS 9, where newer versions of Opera will not be
released.

> Is there a certain
> hyerarchy or set of steps that you take in the testing process?

Debugging can be a laborious process, but it is something that has a very
simple methodology. The best way to write a page is to use multiple browsers
while making it in the first place.

Generally, there are two types of browsers (this is oversimplifying, but you
get the idea); standards compliant, and standards non-compliant. Most
browsers that are currently in use are in the standards compliant category.
IE is the main one that is not. All browsers will have little problems, but
IE is by far the worst, and will need the most special attention.

Writing pages:

When you are writing a page, it is best to use a compliant browser while
writing it, and after each change you make to the page HTML or CSS, test it
in that browser to make sure the page looks OK. Then test it in whatever
non-compliant browser you are interested in. In most cases, this is IE. You
may need to change things to get IE to display it correctly. Make sure that
this is not at the expense of the standards compliant browsers (test more
than one standards compliant browser at this stage to ensure that it is not
a problem with that browser). If needs be, check the CSS spec to make sure
you are using styles correctly, and use browser compatibility tables like
those on http://www.quirksmode.org/ to make sure that the browsers actually
support that style. (It also helps to use HTML and CSS validators at this
stage.)

My personal recommendation is to use Opera or Firefox while developing. They
both have good scripting error consoles, with Opera's usually being the more
helpful (Opera 9 can also give debugging information for CSS), and are very
good at following standards. My personal preference is Opera, but it is all
a matter of taste. If you have a Mac, then a Safari based browser can be
useful as well, and iCab can also be useful for its error console (although
it is still in beta). Konqueror is also a very good compliant browser on
Linux.

If you are debugging scripts, the principle is similar, but debugging is
harder. Since you are not using any problematic scripts, I will not go into
that here.


Debugging existing pages:

If you have made a page, and it works nicely in one browser, but not others,
then it is noticeably harder than when writing the page, but it is certainly
not impossible.

The general idea is to remove everything from the page, until you find the
cause of a problem. Keep removing parts that are not relevant to the problem
until you get the smallest possible example where the problem still occurs.

If the case of your page, most of the content can be removed, so just put
"foo" in there instead, then the navigation, and so on. You will also want
to do the same with the CSS. Set simple backgrounds and borders on things so
that you know where they all are (this is the first thing that shows the
problem with your page, since the #page div is nowhere near where you think
it should be). At each stage, check in the relevant browsers to make sure
the problem still appears in one but not the other

By now, you should have a simple page that makes it easy to see the problem
(although the cause may not be so obvious yet) - see "default2.htm"
attached.

For me, Opera is the most useful browser here. I load your page, view
source, start changing things and save my changes, then tools - advanced -
reload from cache, and I see my changes immediately, without even having to
save a copy of it locally. If I do save a copy locally, I _must_ use Opera
(assuming I am using windows) since Firefox duplicates dynamically generated
source code when saving, and IE corrupts CSS.


The problems on your page:

The problems you are running into concern IE's mishandling of floats and
overflow. The elements around the floats are stretching so that the float is
inside them. That is incorrect, and it has still not been fixed in IE 7.

* Adding clear:left; onto #page makes a big difference, since it pulls the
#page div below the header, instead of behind it.

* Removing clear:both; on the #menu div allows the splash image to appear in
the correct position.

* Adding a 1px high clearing div (with overflow to prevent IE making it too
big) inside the bottom of #page stretches #page so that it fits around
#content and #menu.

* Adding margin:0 auto; to the #w3c div centres the buttons (IE abuses
text-align to do that).

* Adding #w3c img { display: block; } makes the button display correctly,
without having an ugly half block from the link background.

* IE does not understand PNG very well, and it is not applying the gamma
correction used by your background images, so they look darker than they do
in other browsers. I suggest you remove the gAMA chunk using TweakPNG:
http://entropymine.com/jason/tweakpng/

See "default3.htm" attached, for a sample that works as you wanted. Note
that I have a border on the top of the footer; this prevents the margin from
the paragraph inside it from collapsing through, creating a gap. You already
have borders where needed, so you do not need to add anything.


Some unrelated points about your CSS:

background: #005200;
...
background: url('bg000001.png') repeat-y;

Only the second style will be used, since you are redefining the same style.

#navbar[class]

IE 6- does not understand this selector (although it does not have any
effect in this case, since the styles were already defined).


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

Christopher,

> it says Mozilla 5.0 but Firefox 1.5.0.2

*Deep breath*
Like many browsers, Firefox claims to be Mozilla 5.0 - meaning it supposedly
uses the fifth generation of the Mozilla engine used by Netscape, named
after its Mozilla ancestor, now renamed to Gecko 1.8. Confusingly, that is
totally out of line with the more recent browser formerly known as Mozilla
(to be continued as Seamonkey), which keeps its numbers in line with the
Gecko engine. Easy, huh?

To summarise, Firefox itself is version 1.5.0.2. Ignore the Mozilla version,
that means nothing (notice that IE claims to be Mozilla 4.0, even though it
has never used the Mozilla engine).

> So far the only browser that doesn't work is IE for Mac 5.2, do you know
> why the pages fails so badly in that browser and are what fixes do you
> recommend?

IE Mac is a very old, and very bad browser. Its makers have abandoned it, as
it was too much work for them to maintain, and has been replaced by Safari.

The main reason for the problems is that it has a totally broken float
model, so pages that rely on floats (like yours) usually do not look right
in it. To be honest, I was impressed to see it actually render your page so
well, and I doubt that it would be beneficial for you to spend your time
trying to invent workarounds.

Most people who are determined to make something work in IE Mac use its
commented backslash CSS hack on it:

/* start IE Mac comment \*/
IE mac will ignore anything in here
/* end IE Mac comment */

However, I do not recommend that approach. My personal recommendation for
you is to ignore IE Mac, since it is no longer developed, and there is now a
much better default browser on Macs.

Users who want a good browser on Mac OS Classic (where Safari, Opera, and
Mozilla/Firefox are not available), should use iCab, which renders the page
perfectly.

Users that insist on using IE on Mac can still read the page, and that is
the important part.

> What do you suggest here?  The intention is to keep
> non-members out of this area.

http://www.howtocreate.co.uk/tutorials/javascript/security
See the section on "password protecting a file"

> I haven't been able to look into what you suggested about the PNG's yet, is
> that something that can be done in Macromedia Fireworks?

I do not know Fireworks, it may have some functionality to remove the gAMA
information from the image. I recommend using TweakPNG, simply because it is
easy.