Ken wrote:
> It looked fine for me on Win2K, but when I looked at it from home on
> WinXP, I saw the problem you were describing--even though both are
> using IE 6.0.2800.1106.
>
> Work around: replace space by
>
> N.B. You should replace your ampersands by &
>
> I put the file up with both versions at
> http://invent3k.external.hp.com/~KEN.HIRSCH/tracy.html
Ken has great advice per usual. You really want to make any system
generated content "web safe" by using entities for your ampersands, quote
marks (single & double), and the less-than '<'.
The next thing that you should do, as well as anyone else who develops web
pages, is to include a DOCTYPE. Browsers have different rendering models
and defaults depending on the DOCTYPE. By specifying a DOCTYPE you minimize
the changes that can occur in browser behavior. For more information on
DOCTYPEs, see http://www.alistapart.com/articles/doctype/
It is also a good idea to make your html valid. This means include closing
tags, including the mandatory <head> element, etc. When you don't, it puts
the IE into 'quirks' mode and you lose the benefit of the DOCTYPE and are at
the mercy of whatever defaults the browser chooses for you.
Next, I like to separate the content from the presentation. I created a
simple style that makes the <p> element act like the <pre> element. I used
the line-height property to make the drawing lines line up better. This
version works in IE and Mozilla Firefox (and it should in other Gecko-based
browsers). I don't know about Macs (Safari & IE).
I did have one last issue. The lines for the "Change two Batteries" and
"Tune up", were not lining up (shifted 25 characters to the left) in IE only
(go figure). I found that if I put a right after the line-draw
entities then it didn't lose its mind.
Here's the new version:
http://invent3k.external.hp.com/~MGR.WONSIL/tracy1.html
For convenience I've included it here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Part List</title>
<style>
p {
background-color: White;
font-family: monospace;
line-height: 110%;
white-space: pre;
}
</style>
</head>
<body><A NAME="top"></A>
<p>
Ctyp Description(U99PP50AYY) Last#Used Actcode Description
PP50 ___Series 50 Power Plant__ 081205 Power Plant Series 50
├BATT Batteries 07006 CHANGE 2 BATTS,12
VOL
││ 07007 CHANGE
ALL BATTERIES
│├EIL1 Injector, #1 Left 08022 #1 INJECTOR
L.H.
│├EIL2 Injector, #2 Left 08023 #2 INJECTOR
L.H.
│└TUNE Tune-up 08123 TUNE
UP,ADJUST VALVES
│ 08126 TUNE-UP &
INJECTORS/R
├EIS5 Series 50 Injectors_______
│├IH50 Harness, Injectors Ser.50 08142 R&R
INJECTOR HARNESS
│├EI1 Injector #1, Series 50-60 08155 R & R
#1 INJECTOR
</p>
</body>
</html>
Finally, I like to put the style information in a separate sheet. The
benefit of this is that you can change the presentation without changing
your program. The style sheet caches too, so you are not downloading it
every time. Here is the final version:
http://invent3k.external.hp.com/~MGR.WONSIL/tracy2.html
http://invent3k.external.hp.com/~MGR.WONSIL/partlst.css
Now, if you really want to get serious about this, ;-), you may want to look
at making this a series of nested unordered lists. Then you can style the
daylights out of it. Here's a good starting place:
http://www.simplebits.com/archives/2003/10/19/styling_nested_lists.html
which gives this example:
http://www.nationwide.co.uk/Communications_Centre/Products-and-Services/Site
map.htm. With a little JavaScript, you can even make it a tree that expands
and contracts (like here:
http://evolt.jeffhowden.com/jeff/code/toggle_display.cfm). But that's for
another day. Got to get back to my paying gig. :-p
Mark W.
P.S. IE really blows when it comes to standards conformance. It's really
too bad that it's so prevalent. Not only that, Microsoft is not really
doing much with IE, other than security patches, until Longhorn comes out.
* To join/leave the list, search archives, change list settings, *
* etc., please visit http://raven.utc.edu/archives/hp3000-l.html *
|
