Checking Backward Compatibility of a new page

[Griz]

Hi,

I'm working on a complete redo of my site. My objective is to provide a good
looking usable site to the widest possible range of users (browsers). I've
chosen HTML 4.0 strict and CSS1 as my compromise between backward
compatibility and capability.

I have a 2 col + header + footer basic page structure completed and have
been checking it against the "Web Page Backward Compatibility Viewer" at
http://www.delorie.com/web/wpbcv.html
but there are hundreds of browser ID strings listed at
http://www.delorie.com/web/agents.txt and I would guess that most are not
necessary to overtly check (e.g. if Mozilla/2. and Mozilla/4.0 work than do
I need to check Mozilla/3.0 ?)

Does anyone have a list of the specific browser ID strings that I should
check in order to catch all (99%) of the significant differences in
HTML4/CSS1 implementations.?

If you are interested my test page is at
http://home.att.net/~steve-stuff/test/new-form.html

Please let me know if it breaks down (overlaps etc.) with your browser.

I'm a newbie but have thick skin (and skull) so don't spare me the truth (as
you see it)

Thank You

 

[Toby A Inkster]

Does anyone have a list of the specific browser ID strings that I should
check in order to catch all (99%) of the significant differences in
HTML4/CSS1 implementations.?

I'm not sure what you mean "browser ID strings that [you] should check".
You don't check strings -- you check in the browsers themselves.

Check:

- Internet Explorer 5, 5.5 and 6 for Windows
- Internet Explorer 5+ for Mac
- Netscape 4.8
- Mozilla 1.4
- Opera 7
- Konqueror 3 or Safari 1
- Lynx

That is my recommended testing suite. Personally, I have no access to
IE/Mac, so I often have difficulty testing in that one.

 

[Steve Pugh]

I'm working on a complete redo of my site. My objective is to provide a good
looking usable site to the widest possible range of users (browsers). I've
chosen HTML 4.0 strict and CSS1 as my compromise between backward
compatibility and capability.

I have a 2 col + header + footer basic page structure completed and have
been checking it against the "Web Page Backward Compatibility Viewer" at
http://www.delorie.com/web/wpbcv.html
but there are hundreds of browser ID strings listed at
http://www.delorie.com/web/agents.txt and I would guess that most are not
necessary to overtly check (e.g. if Mozilla/2. and Mozilla/4.0 work than do
I need to check Mozilla/3.0 ?)

Does anyone have a list of the specific browser ID strings that I should
check in order to catch all (99%) of the significant differences in
HTML4/CSS1 implementations.?

I'd ignore user agent strings as (a) a lot of them are merely the same
browser under different distributions and (b) a lot of them are lies.

The main graphical browsers in use today can be split into several
families:
Windows IE
Mac IE
Netscape 4.x
Gecko (Mozilla, Netscape 6+, Firebird, Camino, etc.)
Opera
Konqueror/Safari

How many versions of each of the above you test in is up to you.
Testing in older versions of Win IE (e.g. 5 and 5.5) is going to cover
larger portions of your audience that testing in older versions of
Opera.

If you are interested my test page is at
http://home.att.net/~steve-stuff/test/new-form.html

Please let me know if it breaks down (overlaps etc.) with your browser.

I'll assume that the appearence in IE5.5 is correct.
In IE6 there are some scrolling issues (horizontal scrollbar appears)
In IE5 the header has a blue background.
Broken in Netscape 4.8.
Broken in Gecko based browsers (tested in Mozilla 1.5, Firebird 0.7
and Netscape 7.1)
Broken in Opera 5 and 6.
Broken, in a new way, in Opera 7.

The CSS doesn't pass validation.
The HTML does pass validation when a character encoding is enforced.

I'd hide the CSS entirely from NN4 and then do some research into the
CSS box model and IE's bugs in that area, it's probable that you've
coded to IE's bugs which is why it falls apart in other browsers.

Steve

 

[jake]

In message

Hi,

I'm working on a complete redo of my site. My objective is to provide a good
looking usable site to the widest possible range of users (browsers). I've
chosen HTML 4.0 strict and CSS1 as my compromise between backward
compatibility and capability.

I have a 2 col + header + footer basic page structure completed and have
been checking it against the "Web Page Backward Compatibility Viewer" at
http://www.delorie.com/web/wpbcv.html
but there are hundreds of browser ID strings listed at
http://www.delorie.com/web/agents.txt and I would guess that most are not
necessary to overtly check (e.g. if Mozilla/2. and Mozilla/4.0 work than do
I need to check Mozilla/3.0 ?)

Does anyone have a list of the specific browser ID strings that I should
check in order to catch all (99%) of the significant differences in
HTML4/CSS1 implementations.?

If you are interested my test page is at
http://home.att.net/~steve-stuff/test/new-form.html

Please let me know if it breaks down (overlaps etc.) with your browser.

I'm a newbie but have thick skin (and skull) so don't spare me the truth (as
you see it)

Thank You

You might want to think what to do about NS4.

(a) Forget about it altogether on the basis that probably less than 5%
of your audience use it, or
(b) Hide the *positioning* CSS from it, but supply a 2nd stylesheet to
use CSS to apply font sizes/colours, etc., or
(c) Hide all CSS and see if it degrades OK.
(d) Supply a 2nd stylesheet that will give you the layout you want.

A lot of people would say that (d) is not worth the effort, but I would
think that you should be able to make it work without too much trouble.

Anyway, this is how it looks in NS4.75:

http://www.gododdin.demon.co.uk/ng/NS4X.JPG

regards.

 

[Griz]

I'd ignore user agent strings as (a) a lot of them are merely the same
browser under different distributions and (b) a lot of them are lies.

The main graphical browsers in use today can be split into several
families:
Windows IE
Mac IE
Netscape 4.x
Gecko (Mozilla, Netscape 6+, Firebird, Camino, etc.)
Opera
Konqueror/Safari

How many versions of each of the above you test in is up to you.
Testing in older versions of Win IE (e.g. 5 and 5.5) is going to cover
larger portions of your audience that testing in older versions of
Opera.


I'll assume that the appearence in IE5.5 is correct.
In IE6 there are some scrolling issues (horizontal scrollbar appears)
In IE5 the header has a blue background.
Broken in Netscape 4.8.
Broken in Gecko based browsers (tested in Mozilla 1.5, Firebird 0.7
and Netscape 7.1)
Broken in Opera 5 and 6.
Broken, in a new way, in Opera 7.

Thank You for the detailed feedback. I was checking it with the tool at
http://www.delorie.com/web/wpbcv.html and it looked when I input the browser
ID string for each of the above browers into the tool input box. I now
realize that the tool was not showing me what the page looked like in those
browsers.

The CSS doesn't pass validation.

??? it tests ok at http://jigsaw.w3.org/css-validator/validator-uri.html for
me. How are you testing it?????

The HTML does pass validation when a character encoding is enforced.

It tested OK at http://www.htmlhelp.com/tools/validator/ but based on your
input I did add the character encoding string <META
HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

I'd hide the CSS entirely from NN4 and then do some research into the
CSS box model and IE's bugs in that area, it's probable that you've
coded to IE's bugs which is why it falls apart in other browsers.

I'm sure you are correct. Based on the comments I've recieved and some
further reading I've done I guess I need to download a mess of browsers to
support testing. I may also go back to a limited use of tables for basic
layout, then slowly add CSS (while monitoring browser compatibility). I'd
rather have stable and compatible than state-of-the-art and buggy.

Thanks again for your help.

For the linux, mac and webTV browsers (which I will not be able to test
myself) what do you think of
Browser Cam http://www.browsercam.com/default.aspx and/or NetMechanic
Browser Photo http://www.netmechanic.com/browser-index.htm#pricing_list

 

[Griz]

Does anyone have a list of the specific browser ID strings that I
should check in order to catch all (99%) of the significant
differences in HTML4/CSS1 implementations.?

I'm not sure what you mean "browser ID strings that [you] should
check". You don't check strings -- you check in the browsers
themselves.

I thought I was checking the page against specific browsers at
http://www.delorie.com/web/wpbcv.html by inputting the strings from
http://www.delorie.com/web/agents.txt into the tool input box. I now
realize that the tool was not showing me what the page looked like in those

Check:


That is my recommended testing suite. Personally, I have no access to
IE/Mac, so I often have difficulty testing in that one.
- Internet Explorer 5, 5.5 and 6 for Windows
- Internet Explorer 5+ for Mac
- Netscape 4.8
- Mozilla 1.4
- Opera 7
- Konqueror 3 or Safari 1
- Lynx

Thank you for your time and the list. I guess I need to gather a mess of
browsers for testing.
For testing linux, mac and webTV browsers (which I will not be able to test
myself) what do you think of
Browser Cam http://www.browsercam.com/default.aspx and/or NetMechanic
Browser Photo http://www.netmechanic.com/browser-index.htm#pricing_list ??

 

[Griz]

In message

You might want to think what to do about NS4.

(a) Forget about it altogether on the basis that probably less than 5%
of your audience use it, or
(b) Hide the *positioning* CSS from it, but supply a 2nd stylesheet to
use CSS to apply font sizes/colours, etc., or
(c) Hide all CSS and see if it degrades OK.
(d) Supply a 2nd stylesheet that will give you the layout you want.

A lot of people would say that (d) is not worth the effort, but I
would think that you should be able to make it work without too much
trouble.

Anyway, this is how it looks in NS4.75:

http://www.gododdin.demon.co.uk/ng/NS4X.JPG

regards.

Thank You for your feedback. I will be gathering a mess of browsers so I can
test my work first hand. Your option (d) would be my opjective but I may
well end up with one of the others.

 

[Steve Pugh]

Thank You for the detailed feedback. I was checking it with the tool at
http://www.delorie.com/web/wpbcv.html and it looked when I input the browser
ID string for each of the above browers into the tool input box. I now
realize that the tool was not showing me what the page looked like in those
browsers.

The ID string in that tool is what get's sent to _your_ server. It's
in case your site has some form of browser sniffing implemented on the
server. Also note the 1999 date on that page and reflect that even Ie
has had a new version released since then.

??? it tests ok at http://jigsaw.w3.org/css-validator/validator-uri.html for
me. How are you testing it?????

The same, but via an addon to Opera that allows me to submit pages
directly.

http://jigsaw.w3.org/css-validator/...rm.html&warning=1&profile=css2&usermedium=all
passes, but
http://jigsaw.w3.org/css-validator/...uff/test/new-form.html&warning=1&profile=css2
fails. Hmm. Something to do with the way border-color: inherit is
treated. Where it's getting the values of brown and Pink from I'm not
sure.

It tested OK at http://www.htmlhelp.com/tools/validator/ but based on your
input I did add the character encoding string <META
HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

That's the least optimal way of sending a character encoding, but it
will suffice until you can reconfigure your server to send it
properly.

For the linux, mac and webTV browsers (which I will not be able to test
myself) what do you think of
Browser Cam http://www.browsercam.com/default.aspx and/or NetMechanic
Browser Photo http://www.netmechanic.com/browser-index.htm#pricing_list

I have used browsercam. It's okay (and if you have your own domain you
can create unlimited numbers of free trials by using new e-mail
adresses each time). But all it does is show a static screengrab, it
doesn't show how the page reacts to variable window sizes, font sizes,
images on/off, CSS on/off, JavaScript on/off, etc. I've also noticed
that the Mac and Linux screenshots often don't work. :-(

Steve

 

[Steve Pugh]

Something to do with the way border-color: inherit is
treated. Where it's getting the values of brown and Pink from I'm not
sure.

Maybe if I'd actually looked at your code rather than the normalised
output from the validator...

Anyway, the error is easy to fix:
Brown and Pink are not allowed colour names in CSS2, see
http://www.w3.org/TR/CSS2/syndata.html#value-def-color

Steve

 

[Beauregard T. Shagnasty]

Quoth the raven named Griz:

and webTV browsers (which I will not be able to test myself)

Sure you can. <g> Fun, too!

http://developer.msntv.com/Tools/MSNTVVwr.asp

 

[Griz]

Quoth the raven named Griz:


Sure you can. <g> Fun, too!

http://developer.msntv.com/Tools/MSNTVVwr.asp

Thank You

 

[Griz]

The same, but via an addon to Opera that allows me to submit pages
directly.

http://jigsaw.w3.org/css-validator/...rm.html&warning=1&profile=css2&usermedium=all
passes, but
http://jigsaw.w3.org/css-validator/...uff/test/new-form.html&warning=1&profile=css2
fails. Hmm. Something to do with the way border-color: inherit is
treated. Where it's getting the values of brown and Pink from I'm not
sure.

I can not replicate the errors I see at
http://jigsaw.w3.org/css-validator/...uff/test/new-form.html&warning=1&profile=css2
by going to http://jigsaw.w3.org/css-validator/validator-uri.html and
playing with the options. I assume that media=all would be the worst case
but it looks like your browser is not selecting any media type at all.
I have not fixed the HTML color error yet because I'm still looking for a
CSS validation setup that will catch the problem (for future test
effectiveness).

That's the least optimal way of sending a character encoding, but it
will suffice until you can reconfigure your server to send it
properly.

You really pushed past my limit of knowleage on this one. Is the character
coding definition OK but being sent to you by my server in a "less than
optimal manner"??? or can I do something to the definition in the HTML to
improve the situation????

I'm currently "hosted" as a PWP at Worldnet so I have NO server side
control. Very shortly I will be moving to a REAL host with all the bells &
whistles so I can start a whole new learning curve.